피그마를 보고 Vending Machine 제작
피그마를 보고 똑같이 구현하는 토이 프로젝트를 하였습니다. 개발스택은 HTML, CSS를 사용했으며 반응형으로 제작하였습니다. 왼쪽 컨테이너는 grid를 사용해서 만들었고 전체적인 틀은 flex를 사용했습니다.
- float과 flex를 필요한 곳에 적재적소에 배치해야한다.
- position: relative와 position: absolute를 남발하지 말자 코드가 지저분해 보인다.
- width 값을 지정하고 height 값은 지정하지 않는다. padding margin으로 자연스럽게 height 값을 맞춘다.
- 공통적으로 사용될 모듈을 찾아 코드를 줄인다.
- box-sizing으로 border의 두께가 높이,너비의 포함되지 않게 한다.