상자 네 겹

모든 요소는 상자로 그려집니다. 상자는 안에서부터 내용 · 안쪽 여백(padding) · 테두리(border) · 바깥 여백(margin) 네 겹이고, 배경색은 테두리 밑까지 칠해지며 바깥 여백은 투명합니다.

레시피 카드의 글이 테두리에 딱 붙어 답답하거나, 카드가 페이지 가장자리에 붙어 있을 때가 있습니다. 둘 다 '여백을 준다'로 풀지만 어느 겹을 늘리느냐에 따라 결과가 다릅니다. 안쪽 여백은 칠한 면 안에서 글과 테두리 사이를 벌리고, 바깥 여백은 칠한 면 밖의 빈틈을 벌립니다. 이 레슨은 네 겹과, 그 숫자를 개발자 도구에서 읽는 법을 봅니다.

이 단원을 마치면 레시피 카드에 여백 · 둥근 모서리 · 그림자를 주고, 본문을 화면 가운데로 모을 수 있습니다. 이 단원(박스 모델)을 이미 안다면 단원 연습 문제부터 풀고 틀린 레슨만 보세요. 건너뛸지 볼 때는 힌트를 펴지 않고 풉니다.

그림 준비 중

1상자 네 겹

브라우저 규칙 6. 모든 요소는 상자입니다 — 안에서부터 내용 · 안쪽 여백 · 테두리 · 바깥 여백입니다.

<div class="box">김치볶음밥</div>

.box {
  padding: 16px;
  border: 4px solid #1d1d1f;
  margin: 24px;
  background-color: #f5f5f7;
}

글 '김치볶음밥' 둘레에 16px 안쪽 여백, 그 밖에 4px 테두리, 그 밖에 24px 바깥 여백이 붙었습니다.

padding: 16px 한 줄은 위 · 오른쪽 · 아래 · 왼쪽 네 방향을 한꺼번에 정합니다. 잰 값 칸은 그 가운데 위쪽을 보였고, 나머지 셋도 16px입니다. margin: 24px도 같고, border: 4px solid #1d1d1f⁠는 네 방향 테두리의 굵기 · 종류 · 색을 한 줄에 정합니다. 한 줄이 여럿을 한꺼번에 정하는 꼴은 여백 짧게 적기에서 자세히 봅니다.

2안쪽 여백은 칠해지고, 바깥 여백은 비친다

페이지 바탕을 회색으로 칠하고 상자를 흰색으로 칠하면 두 여백이 갈려 보입니다.

<div class="box">김치볶음밥</div>

body {
  background-color: #d2d2d7;
}

.box {
  padding: 16px;
  border: 4px solid #1d1d1f;
  margin: 24px;
  background-color: #ffffff;
}

흰 칠은 글 둘레 16px 안쪽 여백까지 퍼지고, 테두리 밖 24px 바깥 여백에는 회색 바탕이 그대로 비칩니다. 바깥 여백은 상자의 몫이지만 칠하지 않는 빈 자리입니다. 배경색은 테두리 선 밑까지 칠해지고, 테두리 선이 그 위에 그려집니다. 그래서 글과 테두리 사이를 넉넉하게 하려면 안쪽 여백 padding을, 상자와 이웃 · 가장자리 사이를 띄우려면 바깥 여백 margin을 늘립니다.

3개발자 도구의 상자 그림 — Computed 창

네 겹의 숫자는 개발자 도구에서 읽습니다. 요소 위에서 마우스 오른쪽 단추 → 검사를 누르면 Elements 패널에서 그 요소의 줄이 짚입니다. 같은 패널의 Computed 창(한국어 화면에서는 '계산됨')을 엽니다.

• 창 위쪽의 상자 그림은 바깥에서부터 margin · border · padding 겹을 그리고, 겹마다 위 · 오른쪽 · 아래 · 왼쪽 숫자를 적습니다. 가운데에는 내용 칸의 크기가 적힙니다.
• 그 아래 목록은 브라우저가 마지막으로 정한 값(계산된 값)입니다. 이 과목의 잰 값 칸과 같은 글자입니다. 짧게 적기 padding은 목록에 padding-top · padding-right처럼 방향마다 따로 보입니다.

CSS를 쓰지 않은 요소에도 기본 스타일이 준 숫자가 있습니다.

<h2>재료</h2>
<ul>
  <li>밥 2공기</li>
  <li>김치 1컵</li>
</ul>

페이지 가장자리가 비는 것은 body의 바깥 여백 8px이고, 목록 앞 점이 들어가는 자리는 ul의 왼쪽 안쪽 여백 40px입니다(크롬 기준). 4단원 브라우저 기본 스타일과 Styles 창의 찾는 차례에 다섯째 줄을 더합니다 — 5. 이겼는데도 생각과 다르게 보이면 상자를 봅니다. 값이 이겼는데 자리가 이상하면 Computed 창의 상자 그림에서 겹마다 숫자를 봅니다(브라우저 규칙 6). 이 줄의 '배치'는 12단원 flex에서 더합니다.

4테두리는 굵기 · 종류 · 색

테두리는 종류(solid)를 정해야 그려집니다. 종류에는 실선 solid · 점선 dashed · 점 dotted가 있고, 처음 값은 '선 없음' none입니다. 굵기 · 색은 빼도 처음 값(굵기 3px · 색은 글자색)으로 그려지지만, 굵기(4px) · 종류 · 색(#1d1d1f)을 함께 적어 둡니다. 표의 칸 사이 선도 테두리입니다. 칸마다 테두리를 주면 이웃 칸의 선이 좁은 틈을 두고 두 줄로 그려집니다. 표에 border-collapse: collapse⁠를 주면 이웃 칸의 선이 한 줄로 합쳐집니다.

<table>
  <tr>
    <th>열량</th>
    <td>550 kcal</td>
  </tr>
  <tr>
    <th>단백질</th>
    <td>18 g</td>
  </tr>
</table>

table {
  border-collapse: collapse;
}

th,
td {
  padding: 8px;
  border: 1px solid #d2d2d7;
}

칸 안의 글과 선 사이는 칸의 안쪽 여백 8px입니다. 표 칸도 상자 네 겹을 따릅니다.

예제

레시피 카드에 여백 주기

바탕을 옅은 회색으로 두고, 흰 카드에 안쪽 여백과 옅은 테두리를 줍니다.

<article class="recipe-card">
  <h2>김치볶음밥</h2>
  <p>한식 · 조리 15분</p>
</article>

body {
  background-color: #f5f5f7;
}

.recipe-card {
  padding: 16px;
  border: 1px solid #d2d2d7;
  margin: 16px;
  background-color: #ffffff;
}

• 글이 테두리에서 16px 떨어져 숨 쉴 틈이 생겼습니다 — 안쪽 여백입니다.
• 카드 밖 16px에는 회색 바탕이 비칩니다 — 바깥 여백입니다.
• 할 일 화면의 .app 카드도 같은 길로 안쪽 여백 24px을 줍니다.

자주 틀리는 곳

틀린 생각: 테두리는 굵기와 색만 적으면 그려진다.

<div class="box">된장찌개</div>

.box {
  border: 4px #1d1d1f;
}

테두리가 보이지 않고 오류도 나지 않습니다. 종류를 적지 않아 '선 없음'이 되었고, 선이 없으니 굵기도 0px입니다. border 한 줄이 적지 않은 칸을 처음 값으로 되돌린 것입니다 — 까닭은 여백 짧게 적기에서 봅니다.

맞는 규칙: 테두리는 굵기 · 종류 · 색을 함께 적습니다(border: 4px solid #1d1d1f). 안 보이면 Computed 창에서 border-top-style부터 봅니다.

틀린 생각: 상자 사이를 띄우려면 padding을 늘린다.

<div class="box">계란말이</div>
<div class="box">떡볶이</div>

.box {
  padding: 24px;
  background-color: #d2d2d7;
}

두 상자의 회색 칠이 커졌을 뿐, 둘은 여전히 맞붙어 한 덩어리처럼 보입니다. 안쪽 여백은 칠한 면 안의 틈이라 상자 사이를 벌리지 못합니다.

맞는 규칙: 상자 사이는 바깥 여백 margin으로 띄웁니다. 칠한 면 안 글 둘레는 padding입니다.

틀린 생각: 배경색은 바깥 여백까지 칠해진다.

<p class="note">
  김치는 잘 익은 것이 좋습니다.
</p>

.note {
  margin: 24px;
  background-color: #d6ecff;
}

하늘색 띠는 글자 위아래에 바짝 붙어 끝나고, 띠 둘레 24px은 비어 있습니다. 글자가 칠한 면 가장자리에 붙어 보입니다.

맞는 규칙: 배경색은 내용 · 안쪽 여백 · 테두리 밑까지만 칠해집니다. 칠한 면을 넓히려면 padding을 줍니다.

확인 문제

1. 예제의 레시피 카드 테두리를 border: 4px dashed #1d1d1f(점선)로 바꿨습니다. 점선의 점과 점 사이 틈에는 무엇이 보일까요?

<article class="recipe-card">
  <h2>김치볶음밥</h2>
  <p>한식 · 조리 15분</p>
</article>

body {
  background-color: #f5f5f7;
}

.recipe-card {
  padding: 16px;
  border: 4px dashed #1d1d1f;
  margin: 16px;
  background-color: #ffffff;
}

• ① 카드의 흰 배경색
• ② 페이지 바탕의 회색
• ③ 아무것도 없이 비어 있다

2. 동아리 공지 상자의 글이 테두리에 붙어 있습니다. 글과 테두리 사이를 12px 띄우는 선언을 ____ 자리에 쓰세요.

<div class="notice">
  사진 동아리 모임은 금요일입니다.
</div>

.notice {
  border: 2px solid #005bb5;
  ____
}

<div class="notice">
  사진 동아리 모임은 금요일입니다.
</div>

.notice {
  border: 2px solid #005bb5;
  padding: 12px;
}

3. 여행 일정표 칸에 선을 긋는 CSS입니다. 결과 화면에 칸 사이 선이 하나도 보이지 않아 Computed 창에서 td를 보니 잰 값 칸처럼 나옵니다. 어디를 어떻게 고치면 될까요?

<table>
  <tr>
    <th>첫날</th>
    <td>부산 도착</td>
  </tr>
</table>

th,
td {
  border: 1px #6e6e73;
}

<table>
  <tr>
    <th>첫날</th>
    <td>부산 도착</td>
  </tr>
</table>

th,
td {
  border: 1px solid #6e6e73;
}

컴퓨터에서 해 보기(선택) — 점수에 들지 않습니다. 폰으로만 보고 있다면 건너뛰세요. 예제의 HTML과 CSS를 index.html과 style.css로 저장하고 link로 이어 엽니다(문서 뼈대의 body 안에 예제 HTML을 넣습니다). .recipe-card의 padding을 32px로 늘리면 흰 칠과 회색 빈틈이 어떻게 될지 먼저 적고, 저장하고 새로고침해 맞춰 봅니다. 카드를 검사해 Computed 창 상자 그림의 padding 겹 숫자도 봅니다.