[하루한냥] 레이아웃 구현 : 반응형 웹페이지를 위한 준비 프로젝트를 모바일에 최적화된 화면으로 기획했기 때문에 다양한 모바일 기종의 화면 크기에 맞추는 작업이 필요하다. 레이아웃 구현 단계를 진행하며 반응형으로 구현하고자 신경 쓴 부분이 크게 3가지가 있었다. 첫째로는 Layout 컴포넌트의 스타일 속성, 둘째로 스타일 토큰에서의 사이즈 지정, 마지막으로 Body 컴포넌트에서의 flex 속성 적용이 있다. 이번 포스트에서는 반응형 프로젝트를 만들기 위한 코드를 기록하려 한다. 1. Page, Layout 컴포넌트 구현 우선 배경이 될 Page 컴포넌트에서는 width, height를 100vw, 100vh로 잡고 연한 회색으로 칠해주었다. Layout 컴포넌트에서는 모바일 최적화를 위해 440x920으..
