블록과 인라인 display

display는 요소가 놓이는 방식을 정하는 CSS 속성입니다. 블록(block)은 줄을 통째로 차지하고, 인라인(inline)은 글자처럼 줄 안에서 흐르며 너비 · 높이 · 위아래 바깥 여백을 쓰지 않습니다(그림 img는 인라인이어도 씁니다). 인라인 블록(inline-block)은 줄 안에서 흐르면서 너비 · 높이가 먹고, none은 아예 그리지 않습니다.

div·span과 블록·인라인에서 span에 준 너비가 먹지 않는 것을 봤습니다. 배지를 120px 칸으로 만들거나 링크의 누르는 칸을 키우려면, 요소를 바꾸지 않고 놓는 방식만 바꿉니다. 이 레슨은 display 값 넷이 무엇을 바꾸는지 봅니다.

그림 준비 중

1display는 놓는 방식을 정한다

div가 블록인 것은 기본 스타일이 준 display 값이고, span이 인라인인 것은 display의 처음 값이 inline이기 때문입니다. 우리 CSS로 이 값을 바꾸면 같은 요소가 다르게 놓입니다(브라우저 규칙 7).

표의 inline 줄은 글을 담는 인라인(span · a · strong)의 모습입니다. 그림 img는 인라인이어도 너비 · 높이가 먹습니다. display에는 flex · grid 같은 값도 있습니다 — 12 · 13단원에서 봅니다.

2inline — 너비 · 높이 · 위아래 여백을 쓰지 않는다

<div class="tags">
  <span class="tag">한식</span>
  <span class="tag">15분</span>
</div>

.tag {
  width: 120px;
  height: 40px;
  margin: 12px;
  background-color: #d6ecff;
}

하늘색 칠은 글자만큼이고, 두 배지는 왼쪽 · 오른쪽 바깥 여백만큼 떨어졌을 뿐 위아래로는 비지 않았습니다. 너비 · 높이 · 위아래 바깥 여백 선언은 배지에 닿았지만, 인라인이라 쓰이지 않습니다. span에 준 너비가 안 먹던 까닭이 이것입니다. 개발자 도구 Styles 창은 이 가운데 width · height 선언을 흐린 글로 보이고 곁에 ⓘ 표시를 붙입니다. 값은 맞지만 지금 놓는 방식에서는 효과가 없다는 뜻이고, 표시에 마우스를 올리면 까닭이 나옵니다.

3inline-block — 줄 안에서 흐르며 너비가 먹는다

같은 배지에 display: inline-block⁠을 더합니다.

<div class="tags">
  <span class="tag">한식</span>
  <span class="tag">15분</span>
</div>

.tag {
  display: inline-block;
  width: 120px;
  height: 40px;
  background-color: #d6ecff;
}

배지는 여전히 한 줄에 나란하고, 칠은 120 × 40px이 되었습니다. 밖에서 보면 인라인처럼 흐르고, 안에서 보면 블록처럼 크기를 가진 상자입니다. block으로 바꾸면 크기는 같아도 줄을 통째로 차지해, 배지 둘이 두 줄로 쌓입니다(.tags의 줄 수 2).

4none — 자리도, 읽는 쪽도 없앤다

<p>장보기를 마쳤나요?</p>
<button class="later">
  나중에
</button>
<button>저장</button>

.later {
  display: none;
}

'나중에' 단추는 그려지지 않고 자리도 남기지 않아, '저장' 단추가 그 자리로 당겨 왔습니다. 화면 읽기 프로그램도 이 단추를 읽지 않습니다. CSS로 아예 그리지 않으면 읽는 쪽에서도 사라집니다(브라우저 규칙 3) — 글자 없는 단추와 숨긴 라벨에서 라벨을 이 길로 숨기지 않은 까닭입니다.

예제

내비게이션 링크의 누르는 칸 키우기

링크는 인라인이라 누르는 칸이 글자만큼입니다. inline-block으로 바꾸면 한 줄에 나란한 채 칸을 키울 수 있습니다.

<nav>
  <a href="index.html">레시피</a>
  <a href="about.html">소개</a>
</nav>

nav a {
  display: inline-block;
  width: 96px;
  height: 44px;
  background-color: #f5f5f7;
}

• 링크마다 96 × 44px 칸이 칠해지고, 그 칸 어디를 눌러도 링크가 열립니다.
• 두 링크는 한 줄에 나란합니다 — 인라인 블록은 줄을 바꾸지 않습니다.

자주 틀리는 곳

틀린 생각: 인라인 블록 둘은 사이 틈 없이 맞붙는다.

<div class="tags">
  <span class="tag">한식</span>
  <span class="tag">15분</span>
</div>

.tag {
  display: inline-block;
  width: 120px;
  background-color: #d6ecff;
}

두 칸 사이에 좁은 틈이 생깁니다. HTML에서 두 태그 사이 줄을 바꾼 자리의 줄바꿈 글이, 같은 줄 안의 빈칸 한 칸으로 그려진 것입니다(브라우저 규칙 2). 틈의 너비는 글꼴의 빈칸 너비라 기기마다 조금 다릅니다.

맞는 규칙: 인라인 · 인라인 블록 사이의 줄바꿈 · 빈칸은 빈칸 한 칸으로 그려집니다. 틈 없이 붙이려면 12단원 flex로 놓습니다 — flex로 놓으면 이 틈이 생기지 않습니다.

틀린 생각: display: none은 모습만 감추고 자리는 남긴다.

<div class="tag">한식</div>
<div class="tag hide">15분</div>
<div class="tag">2인분</div>

.tag {
  height: 40px;
  background-color: #d6ecff;
}

.hide {
  display: none;
}

'2인분'이 페이지 위 48px(body 바깥 여백 8 + '한식' 40)에서 시작합니다. '15분'의 자리 40px이 사라져 아래 칸이 당겨 왔습니다. 모습만 감추고 자리를 남기는 것은 visibility: hidden입니다 — 같은 자리에 쓰면 '2인분'은 88px에 남고, 이것도 읽는 쪽에서 사라집니다.

맞는 규칙: none은 상자를 아예 만들지 않아 자리도 없습니다. 자리를 남기려면 visibility: hidden입니다.

틀린 생각: 블록에 너비를 주면 줄의 남은 자리에 다음 요소가 들어온다.

<div class="box">재료</div>
<div class="box">조리 순서</div>

.box {
  width: 120px;
  background-color: #d6ecff;
}

둘째 칸은 첫 칸 오른쪽 빈 자리가 아니라 다음 줄에 놓입니다. 블록은 너비를 줄여도 줄을 통째로 차지하고, 남은 오른쪽은 빈 채로 남아 다음 요소가 들어오지 않습니다.

맞는 규칙: 블록은 너비와 상관없이 줄을 바꿉니다. 남은 자리를 양쪽에 나눠 가운데로 모으는 법은 가운데 모으기에서 봅니다.

확인 문제

1. 예제의 nav a 규칙에 margin-top: 16px;을 더하면, 링크 칸의 위 자리는 몇 px이 될까요? 위 자리는 페이지 맨 위에서 칸의 위 테두리까지입니다. 지금은 body 바깥 여백만큼인 8px입니다.

• ① 8px
• ② 16px
• ③ 24px

<nav>
  <a href="index.html">
    레시피
  </a>
  <a href="about.html">
    소개
  </a>
</nav>

nav a {
  display: inline-block;
  width: 96px;
  height: 44px;
  margin-top: 16px;
  background-color: #f5f5f7;
}

2. 플로우 카페 메뉴판에서 품절된 메뉴 줄을 화면에서도, 화면 읽기 프로그램에서도 빼려고 합니다. ____ 자리에 선언을 쓰세요.

<ul>
  <li>커피 4000원</li>
  <li class="sold-out">
    쿠키 2000원
  </li>
</ul>

.sold-out {
  ____
}

<ul>
  <li>커피 4000원</li>
  <li class="sold-out">
    쿠키 2000원
  </li>
</ul>

.sold-out {
  display: none;
}

3. 사진 동아리 신청 페이지입니다. 링크 · 배지 · 단추에 같은 높이를 주었습니다. Computed 창에서 본 세 요소의 display는 잰 값 칸과 같습니다. 높이가 40px로 그려지는 요소를 모두 고르세요.

<a href="rules.html">회칙 보기</a>
<span class="badge">
  마감 임박
</span>
<button>신청</button>

a,
.badge,
button {
  height: 40px;
}

• ㉠ a 회칙 보기
• ㉡ span 마감 임박
• ㉢ button 신청

컴퓨터에서 해 보기(선택) — 점수에 들지 않습니다. 폰으로만 보고 있다면 건너뛰세요. 2절 코드를 index.html과 style.css로 저장하고 link로 이어 엽니다(문서 뼈대의 body 안에 예제 HTML을 넣습니다). 개발자 도구로 배지를 검사해 Styles 창에서 width · height가 흐린 글인지 봅니다. display: block을 더하면 무엇이 바뀔지 먼저 적고, 저장하고 새로고침해 맞춰 봅니다.