Week 3 · 레이아웃과 컴포넌트 조립
Day 19 / 42
Grid 전체 레이아웃 — grid-template-areas
이번 주에 만든 블록들을 한 페이지에 배치합니다
10초 핵심 요약
grid-template-areas는 레이아웃을 글자 그림으로 그려서 배치하는 방법입니다.- Header, Sidebar, Main(본문)을 각각 이름 붙이고, 그 이름을 그림처럼 배치하면 끝입니다.
- 이번 주 만든 세 블록(Header, Sidebar, PostCard 목록)이 오늘 하나의 페이지로 합쳐집니다.
01
건물 평면도처럼 생각하기
건물 설계도를 보면 "1층 로비, 2층 사무실, 2층 창고, 3층 옥상"처럼 공간에 이름을 붙이고 배치합니다. grid-template-areas도 똑같습니다 — 각 영역에 이름을 붙이고, 그 이름들을 텍스트로 그림처럼 나열하면 그대로 레이아웃이 됩니다.
02
영역 이름 붙이고 배치하기
.layout {
display: grid;
grid-template-columns: 1fr 280px; /* 본문:사이드바 = 나머지:280px */
grid-template-areas:
"header header"
"main sidebar";
gap: 24px;
}
.site-header { grid-area: header; }
main { grid-area: main; }
.sidebar { grid-area: sidebar; }
텍스트로 그린 그림 그대로, header는 위 전체를 가로지르고 main과 sidebar가 나란히 배치됩니다. 각 줄의 칸 수는 grid-template-columns의 칸 수와 같아야 합니다. 각 요소는 grid-area로 자신이 어느 영역에 속하는지 이름만 지정해주면 됩니다.
03
라이브 데모 — 영역 재배치
예상해보세요 — sidebar를 main 왼쪽으로 옮기려면 grid-template-areas 문자열 순서만 바꾸면 될까요, 아니면 HTML 순서도 바꿔야 할까요?
답: HTML 순서는 그대로 두고 grid-template-areas 문자열만 바꾸면 됩니다. 이것이 Grid의 핵심 장점 — 마크업 순서와 화면 배치 순서를 분리할 수 있습니다.
04
Day 19 완료 체크리스트
grid-template-areas로 header/main/sidebar 레이아웃을 만들었다.
grid-area로 각 요소를 영역 이름에 배치했다.
HTML 순서를 바꾸지 않고도 배치를 바꿀 수 있다는 걸 확인했다.
스스로 설명해보기 — grid-template-areas를 쓰면 HTML 순서를 안 바꿔도 화면 배치를 바꿀 수 있는 이유를 설명할 수 있나요?
오늘의 용어
grid-template-areas
영역 이름을 텍스트 그림으로 배치하는 Grid 속성
grid-area
요소를 특정 영역 이름에 소속시키는 속성