가운데 모으기

본문을 화면 가운데로 모으려면 상자 너비의 상한을 max-width로 두고, 남는 자리를 margin: 0 auto로 왼쪽 · 오른쪽에 똑같이 나눕니다. text-align: center는 상자 안의 글을 가운데로 보낼 뿐 상자를 옮기지 않습니다.

넓은 화면에서 글 줄이 화면 끝까지 길어지면 줄 끝에서 다음 줄 처음을 찾기 어렵습니다. 그래서 본문 너비에 상한을 두는데, 상한만 두면 상자가 왼쪽에 붙고 오른쪽만 넓게 빕니다. 이 레슨은 남는 자리를 양쪽에 나누는 법과, 창 폭에 따라 결과가 어떻게 바뀌는지 봅니다.

그림 준비 중

그림의 창 폭이 곧 화면 폭입니다 — 휴대전화는 좁은 창, 컴퓨터는 넓은 창입니다.

1max-width — 이보다 넓어지지 않는다

너비와 box-sizing에서 본 것처럼 너비를 적지 않은 블록은 부모 내용 칸을 채웁니다(브라우저 규칙 6). max-width: 520px은 그 너비에 상한을 둡니다. 창이 넓으면 520px에서 멈추고, 좁으면 부모 내용 칸만큼 줄어듭니다. 상한에서 멈춘 상자는 왼쪽에 붙고, 오른쪽에 자리가 남습니다. 이 남는 자리를 나누는 것이 auto입니다.

2margin: 0 auto — 남는 자리를 양쪽이 똑같이

<main>
  <h1>레시피 노트</h1>
</main>

main {
  max-width: 520px;
  margin: 0 auto;
  background-color: #d6ecff;
}

하늘색으로 칠한 main이 가운데에 섰습니다. 창 폭 1280px에서 body 내용 칸은 바깥 여백 8 × 2를 뺀 1264px입니다. main이 520px을 쓰고 남는 744px을 auto가 왼쪽 · 오른쪽 372px씩 똑같이 나눴습니다. 잰 값 '왼쪽 자리'는 페이지 맨 왼쪽에서 main 테두리까지라, body 바깥 여백 8을 더한 380px입니다. margin: 0 auto 한 줄은 위아래를 0, 왼쪽 · 오른쪽을 auto로 정합니다 — 한 줄이 네 방향을 정하는 꼴은 여백 짧게 적기에서 자세히 봅니다. 가운데로 모을 상자 자신에게 줍니다.

3창이 좁으면 가득 찬다

같은 코드를 창 폭 400px에서 그립니다.

<main>
  <h1>레시피 노트</h1>
</main>

main {
  max-width: 520px;
  margin: 0 auto;
  background-color: #d6ecff;
}

body 내용 칸이 384px이라 상한 520px에 닿지 못하고, main이 내용 칸을 가득 채웁니다. 남는 자리가 없으니 auto가 나눌 것도 없어 양쪽 바깥 여백은 0입니다.

한 줄 CSS가 넓은 화면에서는 가운데 모으기로, 좁은 화면에서는 가득 채우기로 저절로 바뀝니다.

4상자를 옮기는 것과 글을 옮기는 것

둘은 따로 씁니다. 제목 글까지 가운데로 보내려면 상자를 모은 뒤 text-align: center를 더합니다.

예제

할 일 화면의 카드

할 일 화면은 모든 요소를 border-box로 바꾸고, .app 카드에 상한 · 가운데 모으기 · 안쪽 여백을 줍니다.

<div class="app">
  <h1>오늘 할 일</h1>
</div>

* {
  box-sizing: border-box;
}

body {
  background-color: #f5f5f7;
}

.app {
  max-width: 520px;
  margin: 0 auto;
  padding: 24px;
  background-color: #ffffff;
}

• border-box라 안쪽 여백 24를 주어도 카드가 차지하는 너비는 520 그대로입니다.
• 넓은 창에서는 흰 카드가 가운데에 뜨고, 휴대전화처럼 좁은 창에서는 가득 찹니다.

자주 틀리는 곳

틀린 생각: margin: 0 auto만 주면 가운데로 모인다.

<main>
  <h1>레시피 노트</h1>
</main>

main {
  margin: 0 auto;
}

main이 내용 칸 1264px을 가득 채워 남는 자리가 없습니다. auto가 나눌 것이 없어 바깥 여백은 0입니다.

맞는 규칙: auto는 남는 자리를 나눕니다. 먼저 max-width(또는 width)로 상자를 내용 칸보다 좁게 만들어야 남는 자리가 생깁니다.

틀린 생각: 부모에 text-align: center를 주면 안의 상자가 가운데로 간다.

<div class="card">여행 일정</div>

body {
  text-align: center;
}

.card {
  width: 200px;
}

카드는 왼쪽(페이지 왼쪽에서 8px)에 그대로이고, 카드 안 글 '여행 일정'만 카드 안에서 가운데로 갔습니다. text-align은 물려받아 카드 안 글에 닿았습니다.

맞는 규칙: text-align은 줄 안의 글과 인라인을 놓을 뿐 블록 상자를 옮기지 않습니다. 상자는 그 상자에 margin: 0 auto입니다.

틀린 생각: margin: auto면 위아래로도 가운데에 온다.

<main>
  <h1>레시피 노트</h1>
</main>

main {
  max-width: 520px;
  margin: auto;
}

왼쪽 · 오른쪽은 372px씩 나눴지만 위 바깥 여백은 0이라, main은 페이지 위쪽에 붙어 있습니다. 일반 흐름에서 위아래 auto는 0으로 셈합니다.

맞는 규칙: margin: auto는 일반 흐름에서 가로만 나눕니다. 세로 가운데는 12단원 flex에서 봅니다.

틀린 생각: 링크 같은 인라인 요소도 margin: 0 auto로 가운데에 놓인다.

<a href="kimchi.html">레시피</a>

a {
  width: 200px;
  margin: 0 auto;
}

링크는 왼쪽에 그대로입니다. Computed 창의 margin-left도 auto 그대로라, 남는 자리를 나눈 숫자가 없습니다. 인라인은 너비를 쓰지 않아 나눌 남는 자리가 생기지 않습니다.

맞는 규칙: margin: 0 auto는 너비가 있는 블록에 씁니다. 인라인은 display: block으로 바꾸거나, 감싼 블록에 text-align: center를 줍니다.

확인 문제

1. 예제의 .app에서 max-width를 520px에서 600px로 바꾸면, 창 폭 1280px에서 .app의 margin-left는 몇 px일까요?

• ① 332px
• ② 340px
• ③ 372px

<div class="app">
  <h1>오늘 할 일</h1>
</div>

* {
  box-sizing: border-box;
}

.app {
  max-width: 600px;
  margin: 0 auto;
  padding: 24px;
}

2. 예제에서 리셋(* 규칙)을 빼면 .app 카드가 차지하는 너비가 바뀝니다. 상자 셈의 둘째 걸음 값을 쓰세요.

<div class="app">
  <h1>오늘 할 일</h1>
</div>

.app {
  max-width: 520px;
  margin: 0 auto;
  padding: 24px;
}

3. 여행 일정 칸 .trip을 창 가운데로 모으려고 합니다. 아래 세 가지 가운데 칸을 가운데로 옮기는 것을 고르세요.

<div class="trip">여행 일정</div>

.trip {
  max-width: 300px;
}

• ① body에 text-align: center;를 더한다.
• ② .trip에 margin: 0 auto;를 더한다.
• ③ body에 margin: 0 auto;를 더한다.

<div class="trip">
  여행 일정
</div>

.trip {
  max-width: 300px;
  margin: 0 auto;
}

컴퓨터에서 해 보기(선택) — 점수에 들지 않습니다. 폰으로만 보고 있다면 건너뛰세요. 2절 코드를 index.html과 style.css로 저장하고 link로 이어 엽니다(문서 뼈대의 body 안에 예제 HTML을 넣습니다). 브라우저 창 폭을 넓혔다 좁혔다 하며 main이 언제 가득 차는지 봅니다. margin: 0 auto에서 auto를 0으로 바꾸면 넓은 창에서 어떻게 될지 먼저 적고, 저장하고 새로고침해 맞춰 봅니다.