[CSS] 레이아웃 설정하기

보통 header - main - footer 의 세 영역으로 레이아웃을 나눔

header와 footer에는 각 height를 설정해주고 main 에는 min-height를 설정해주는 것이 일반적

 

 

요소를 배치하는 방법

 - width, height, position 속성 등

 - flex 박스

 - grid 시스템

 

주로 간단한 레이아웃은 flex, 복잡한 레이아웃은 grid를 사용하고

position 속성은 필요할 때 부분적으로 사용됩니다.

 

margin: 0 auto;

- 엘리먼트는 width만큼 너비를 차지하면서 가로 중앙에 옴

 

max-width: 600px;

margin: 0 auto;

- 작은 창에도 맞춤 가능