웹사이트 레이아웃 구성

개념 이해하기

웹 레이아웃은 header, navigation, main, aside, footer 같은 의미 구조 위에 CSS Grid로 열과 행을 배치합니다. 내부의 작은 한 방향 정렬에는 Flexbox를 함께 사용할 수 있습니다.

grid-template-areas의 네 문자열이 네 행을 그리는데, header와 nav와 footer는 이름을 두 번 적어 두 열을 모두 차지하고 셋째 행만 main과 aside로 나뉩니다. 열 너비가 1fr 180px라 aside는 180px로 고정되고 main이 남은 폭을 가져가며, .site 전체는 최대 720px 폭으로 가운데에 놓입니다. 화면이 560px 이하이면 미디어 쿼리가 영역을 한 열로 다시 그려 aside가 main 아래로 내려갑니다.

grid-template-areas의 각 이름은 직사각형 모양으로만 이어져야 하며, ㄱ자처럼 꺾인 배치를 적으면 그 선언 전체가 무효가 됩니다. 비워 둘 칸은 마침표로 적어 이름 없는 셀로 남기는데, 마침표 여러 개를 붙여 써도 한 칸으로 취급되므로 열 너비를 맞춰 보기 좋게 정렬해 둘 수 있습니다.