display와 배치

🎯 학습 목표

이 강을 마치면 여러분은 요소들이 화면에 어떻게 배치되는지를 결정하는 display 속성을 이해하고, block·inline·inline-block의 차이를 활용해 원하는 배치를 만들 수 있게 됩니다. 3강에서 잠깐 나온 '블록 요소' 개념을 여기서 제대로 파헤칩니다. 이 display 속성은 이후 배울 본격적인 레이아웃 기법들의 바탕이 됩니다.

구체적으로는 세 가지를 배웁니다. 첫째, 요소가 쌓이는 기본 원리인 문서 흐름을 이해합니다. 둘째, block·inline·inline-block의 세 가지 표시 방식을 익힙니다. 셋째, 요소를 완전히 숨기는 none을 살펴봅니다.

🌊 문서 흐름 — 요소는 어떻게 쌓이나

이 섹션에서는 요소들이 배치되는 기본 원리, 문서 흐름부터 살펴보겠습니다.

우리가 특별한 배치를 지정하지 않으면, HTML 요소들은 정해진 순서와 규칙에 따라 자동으로 놓입니다. 이 자연스러운 배치의 흐름을 문서 흐름(normal flow)이라 합니다. 그리고 이 흐름에서 요소가 어떻게 자리 잡는지는, 그 요소가 블록(block)이냐 인라인(inline)이냐에 따라 크게 달라집니다.

3강에서 배웠듯 제목(h1)이나 문단(p) 같은 블록 요소는 한 줄 전체를 차지하며 위에서 아래로 차곡차곡 쌓입니다. 반면 <a>(링크)나 <strong>(강조) 같은 인라인 요소는 글자처럼 옆으로 나란히 흐릅니다. 즉 블록은 세로로 쌓이고, 인라인은 가로로 이어지는 것이 기본입니다.

그런데 CSS의 display 속성을 쓰면 이 성질을 바꿀 수 있습니다. 원래 블록인 요소를 인라인처럼, 인라인인 요소를 블록처럼 만들 수 있는 것입니다. 이것이 배치를 다루는 첫 번째 열쇠입니다. 이제 세 가지 값을 하나씩 살펴봅시다.

🧱 block과 inline — 두 가지 기본 흐름

이 섹션에서는 block과 inline의 차이를 자세히 살펴보겠습니다.

display: block은 요소를 블록으로 만듭니다. 블록 요소의 특징은 세 가지입니다. 첫째, 한 줄 전체를 차지해 다음 요소는 아래로 밀려납니다. 둘째, 지난 강에서 배운 width·height를 지정할 수 있습니다. 셋째, 상하좌우 마진·패딩이 모두 적용됩니다.

반대로 display: inline은 요소를 인라인으로 만듭니다. 인라인 요소의 특징은 이렇습니다. 첫째, 내용만큼만 너비를 차지하고 옆으로 나란히 놓입니다. 둘째, 중요한 제약으로 width·height를 지정할 수 없습니다. 셋째, 좌우 여백은 되지만 상하 여백(margin)은 제대로 적용되지 않습니다.

이 차이가 중요한 이유가 있습니다. 예를 들어 여러 항목을 가로로 나란히 놓고 싶어 <div>(블록)를 쓰면, 자꾸 세로로 쌓여 버립니다. 반대로 인라인 요소에 너비를 주려 해도 먹히지 않습니다. 이럴 때 필요한 것이 두 성질을 합친 다음 값입니다.

🎯 inline-block — 두 성질의 결합

이 섹션에서는 block과 inline의 장점을 합친 inline-block을 살펴보겠습니다.

때로는 요소를 옆으로 나란히 놓으면서도(인라인처럼) 크기는 지정하고 싶을(블록처럼) 때가 있습니다. 예를 들어 같은 크기의 버튼 여러 개를 가로로 배열하는 경우입니다. 이때 쓰는 것이 display: inline-block입니다.

.button {
  display: inline-block;
  width: 100px;
  height: 40px;
}

inline-block은 이름 그대로 두 성질을 결합합니다. 인라인처럼 옆으로 나란히 놓이면서, 동시에 블록처럼 width·height와 상하 여백을 지정할 수 있습니다. 위 코드는 여러 개의 .button을 가로로 늘어놓으면서 각각 100×40 크기를 갖게 합니다. inline만으로는 크기 지정이 안 되고 block만으로는 가로 배열이 안 되는 문제를, inline-block이 한번에 해결하는 것입니다.

inline-block은 과거에 가로 배치를 위해 많이 쓰였습니다. 다만 뒤에서 배울 Flexbox가 가로 배치를 훨씬 편하게 해 주기 때문에, 요즘은 Flexbox를 더 많이 씁니다. 그래도 inline-block은 각 표시 방식의 성질을 이해하는 데 좋은 개념이니 익혀 두면 도움이 됩니다.

🚫 요소 숨기기 — display: none

이 섹션에서는 요소를 화면에서 감추는 display: none을 살펴보겠습니다.

display: none은 요소를 화면에서 완전히 사라지게 합니다. 이 값이 특별한 점은, 단지 안 보이는 것을 넘어 그 요소가 차지하던 공간까지 없어진다는 것입니다. 마치 그 요소가 처음부터 없었던 것처럼, 뒤의 요소들이 빈자리를 메웁니다.

.hidden {
  display: none;
}

이것은 특정 요소를 조건에 따라 보였다 감췄다 할 때 매우 유용합니다. 예를 들어 메뉴 버튼을 눌렀을 때만 목록을 보여 주거나, 작은 화면에서 일부 요소를 숨기는 데 쓰입니다. (요소를 켜고 끄는 실제 동작은 자바스크립트로 하지만, 그 '숨김' 상태를 만드는 것이 이 display: none입니다.)

참고로 비슷하지만 다른 것으로 visibility: hidden이 있습니다. 이것은 요소를 안 보이게 하되 공간은 그대로 남겨 둡니다. 즉 display: none은 '자리까지 없앰', visibility: hidden은 '안 보이지만 자리는 유지'입니다. 대부분의 경우 자리까지 없애는 display: none을 씁니다.

⚠️ display를 다룰 때의 주의점

이 섹션에서는 흔한 실수를 정리하겠습니다.

첫 번째, 인라인 요소에 width·height를 주고 안 된다고 당황하는 것입니다. 순수 인라인 요소는 크기 지정이 무시됩니다. 크기를 주고 싶으면 inline-block이나 block으로 바꿔야 합니다.

두 번째, 가로 배치를 억지로 만들려는 것입니다. 블록 요소를 가로로 놓으려 여러 편법을 쓰기보다, 상황에 맞게 inline-block을 쓰거나 다음 강들에서 배울 Flexbox를 쓰는 것이 훨씬 깔끔합니다.

세 번째, display: none과 visibility: hidden을 혼동하는 것입니다. 자리까지 없앨지(none), 자리는 남길지(hidden)를 구분해서 목적에 맞게 쓰세요.

📝 핵심 요약

이번 강에서는 display와 배치를 배웠습니다.

• 문서 흐름 — 요소는 기본적으로 순서대로 배치되며, 블록은 세로로 쌓이고 인라인은 가로로 흐릅니다.
• block과 inline — block은 한 줄 전체+크기 지정 가능, inline은 내용만큼+크기 지정 불가입니다. display로 이 성질을 바꿉니다.
• inline-block — 옆으로 나란히 놓이면서 크기도 지정할 수 있어, 두 성질의 장점을 결합합니다.
• none — 요소를 차지 공간까지 완전히 없애 숨깁니다. visibility: hidden은 자리를 남긴다는 점이 다릅니다.

이제 요소의 기본 배치 성질을 이해했습니다. 다음 강에서는 요소를 문서 흐름에서 떼어내 원하는 위치에 고정하는 position 속성을 배우겠습니다. 다음 강 「position」에서 이어가겠습니다.

📚 참고 자료

• display — MDN Web Docs
• 문서 흐름(Normal Flow) — MDN Web Docs
• 블록과 인라인 배치 — MDN Web Docs