영역에 이름 붙이기

grid-template-areas는 격자의 칸마다 이름을 적어, 글자로 그린 지도처럼 페이지 틀을 정하는 속성입니다. 따옴표 한 쌍이 한 줄이고, 자식은 grid-area로 그 이름 자리에 놓입니다.

카드 목록처럼 같은 칸을 되풀이하는 격자와 달리, 페이지 틀은 머리글 · 내비게이션 · 본문 · 바닥글이 저마다 다른 자리를 차지합니다. 선 번호로 자리를 셈하는 대신 이름을 지도로 적으면 틀이 코드에서 그대로 보입니다. 이 레슨은 글자 지도를 읽고 쓰는 법과, 지도가 통째로 버려지는 꼴을 봅니다.

그림 준비 중

1따옴표 한 쌍이 한 줄

<div class="page">
  <header>머리글</header>
  <nav>내비</nav>
  <main>본문</main>
  <footer>바닥글</footer>
</div>

.page {
  display: grid;
  grid-template-columns:
    100px 1fr;
  grid-template-areas:
    "header header"
    "nav main"
    "footer footer";
}

.page > * {
  background-color: #d2d2d7;
}

header {
  grid-area: header;
}

nav {
  grid-area: nav;
}

main {
  grid-area: main;
}

footer {
  grid-area: footer;
}

문자열이 셋이라 줄이 셋, 문자열마다 이름이 둘이라 열이 둘입니다. 같은 이름을 이웃한 두 칸에 쓰면 그 두 칸이 한 영역이 됩니다 — 머리글과 바닥글은 두 열을 다 씁니다. 내비게이션은 첫째 열(100px), 본문은 그 옆(왼쪽 108px)입니다.

지도만 적어서는 아무 요소도 옮겨지지 않습니다. 자식마다 grid-area로 들어갈 영역 이름을 적어야 그 자리에 놓입니다. 영역 이름은 요소 이름과 따로입니다 — 여기서는 알아보기 좋게 같은 이름을 지었을 뿐입니다.

문자열 하나는 한 줄에 두고 그 안에서 줄을 나누지 않습니다. 세미콜론은 마지막 문자열 뒤에 한 번만 씁니다.

2비워 둘 칸은 .

<div class="page">
  <header>머리글</header>
  <nav>내비</nav>
  <main>본문</main>
</div>

.page {
  display: grid;
  grid-template-columns:
    100px 1fr;
  grid-template-areas:
    "header header"
    "nav main"
    ". main";
}

.page > * {
  background-color: #d2d2d7;
}

header {
  grid-area: header;
}

nav {
  grid-area: nav;
}

main {
  grid-area: main;
}

마침표 .는 이름이 없는 칸, 곧 비워 둘 칸입니다. 셋째 줄 첫째 칸은 비고, main은 둘째 · 셋째 줄에 걸친 세로 영역이 되었습니다. 클래스 선택자 앞의 점과는 쓰는 자리가 다릅니다.

3같은 이름은 꽉 찬 직사각형으로

내비게이션을 왼쪽 위에서 꺾인 'ㄱ' 자로 놓으려 했습니다.

<div class="page">
  <header>머리글</header>
  <nav>내비</nav>
  <main>본문</main>
  <footer>바닥글</footer>
</div>

.page {
  display: grid;
  grid-template-columns:
    100px 1fr;
  grid-template-areas:
    "header nav"
    "nav main"
    "footer footer";
}

.page > * {
  background-color: #d2d2d7;
}

header {
  grid-area: header;
}

nav {
  grid-area: nav;
}

main {
  grid-area: main;
}

footer {
  grid-area: footer;
}

nav가 첫 줄 둘째 칸과 둘째 줄 첫째 칸에 있어 직사각형이 아닙니다. 브라우저는 이런 지도를 알아듣지 못해 선언을 통째로 버렸습니다(브라우저 규칙 4) — 계산된 값이 none입니다. 지도가 없으니 자식들의 영역 이름도 가리킬 곳이 없어, 네 요소가 모두 지도 밖 한 칸에 포개졌습니다. 맨 나중에 그린 바닥글만 보입니다.

Styles 창에서는 그 선언에 경고 표시와 취소선이 보입니다.

예제

레시피 한 페이지의 틀입니다. 결과 화면을 펴기 전에, 재료(aside)가 어느 줄들을 차지하고 바닥글이 몇 열에 걸칠지 지도에서 읽어 보세요.

<div class="page">
  <header>레시피 노트</header>
  <main>김치볶음밥</main>
  <aside>재료</aside>
  <footer>바닥글</footer>
</div>

.page {
  display: grid;
  grid-template-columns:
    200px 1fr;
  grid-template-areas:
    "header header"
    "main aside"
    "footer aside";
}

header {
  grid-area: header;
}

main {
  grid-area: main;
}

aside {
  grid-area: aside;
}

footer {
  grid-area: footer;
}

자주 틀리는 곳

틀린 생각: 칸을 비우려면 빈칸으로 띄워 둔다.

바닥글을 첫째 칸에만 두고 둘째 칸은 빈칸으로 비워 두면 될 것 같습니다.

<div class="page">
  <header>머리글</header>
  <nav>내비</nav>
  <main>본문</main>
  <footer>바닥글</footer>
</div>

.page {
  display: grid;
  grid-template-columns:
    100px 1fr;
  grid-template-areas:
    "header header"
    "nav main"
    "footer    ";
}

빈칸은 칸이 아니라 이름 사이를 가르는 글자일 뿐이라, 셋째 줄은 칸 하나입니다. 줄마다 칸 수가 달라 지도가 통째로 버려졌습니다.

맞는 규칙: 비워 둘 칸은 .로 적어 칸 수를 맞춥니다 — "footer .".

틀린 생각: 지도에 이름만 늘어놓으면 된다.

이름이 곧 지도이니 따옴표 없이 적어도 될 것 같습니다.

<div class="page">
  <header>머리글</header>
  <nav>내비</nav>
</div>

.page {
  display: grid;
  grid-template-columns:
    100px 1fr;
  grid-template-areas:
    header header nav;
}

따옴표가 없으면 브라우저가 줄을 알아보지 못해 선언을 버립니다(브라우저 규칙 4).

맞는 규칙: 지도는 줄마다 따옴표 한 쌍으로 적습니다.

틀린 생각: 영역 이름을 조금 틀려도 비슷한 자리에 놓인다.

main을 mian으로 잘못 적었습니다.

<div class="page">
  <header>머리글</header>
  <nav>내비</nav>
  <main>본문</main>
  <footer>바닥글</footer>
</div>

.page {
  display: grid;
  grid-template-columns:
    100px 1fr;
  grid-template-areas:
    "header header"
    "nav main"
    "footer footer";
}

.page > * {
  background-color: #d2d2d7;
}

header {
  grid-area: header;
}

nav {
  grid-area: nav;
}

main {
  grid-area: mian;
}

footer {
  grid-area: footer;
}

mian은 지도에 없는 이름이라, 본문이 지도 밖 넷째 줄 오른쪽 새 칸으로 밀려났습니다. 지도의 본문 자리는 빈 채 남습니다. 선언 자체는 알아들은 꼴이라 Styles 창에 경고가 없습니다.

맞는 규칙: 자식의 grid-area는 지도의 이름과 글자 하나까지 같아야 합니다. 경고 없이 엉뚱한 자리에 놓이면 이름부터 맞춰 봅니다.

확인 문제

1. 예제 지도의 둘째 문자열을 "aside main"으로 바꿨습니다. 결과 화면은 어떻게 될까요?

• ① 재료가 왼쪽 위 칸과 오른쪽 아래 칸 두 곳에 놓인다
• ② 지도가 버려져 네 요소가 한 칸에 포개진다
• ③ 재료가 왼쪽 열을 둘째 · 셋째 줄 내내 차지한다

<div class="page">
  <header>레시피 노트</header>
  <main>김치볶음밥</main>
  <aside>재료</aside>
  <footer>바닥글</footer>
</div>

.page {
  display: grid;
  grid-template-columns:
    200px 1fr;
  grid-template-areas:
    "header header"
    "aside main"
    "footer aside";
}

header {
  grid-area: header;
}

main {
  grid-area: main;
}

aside {
  grid-area: aside;
}

footer {
  grid-area: footer;
}

2. 머리글이 두 열을 다 쓰게 하려 합니다. ____ 자리에 알맞은 문자열을 쓰세요.

.page {
  display: grid;
  grid-template-columns:
    100px 1fr;
  grid-template-areas:
    ____
    "nav main"
    "footer footer";
}

3. 동아리 공지 페이지에서 사진 모음을 왼쪽, 모임 공지를 오른쪽에 두려 했는데 둘이 거꾸로 놓였습니다. 어디를 어떻게 고치면 될까요?

<div class="club">
  <p class="notice">모임 공지</p>
  <p class="photo">사진 모음</p>
</div>

.club {
  display: grid;
  grid-template-columns:
    1fr 1fr;
  grid-template-areas:
    "photo notice";
}

.photo {
  grid-area: "photo";
}

.notice {
  grid-area: "notice";
}

.photo {
  grid-area: photo;
}

.notice {
  grid-area: notice;
}

컴퓨터에서 해 보기(선택) — 점수에 들지 않습니다. 폰으로만 보고 있다면 건너뛰세요. hello.html의 body 안을 1절 HTML로, style 요소 안의 규칙을 1절 CSS 둘로 바꿔 저장 · 새로고침합니다. 지도의 둘째 문자열을 "main nav"로 바꾸면 내비게이션과 본문이 자리를 바꿉니다 — HTML은 그대로입니다. 개발자 도구 Elements 패널에서 .page 줄 끝의 grid 표시를 누르고 Layout 창의 Show area names를 켜면, 페이지 위에 영역 이름이 겹쳐 보입니다.