CSS 강좌 / display와 기본 배치 흐름 이해하기

요소는 별도 배치 규칙이 없으면 문서의 기본 흐름(normal flow)에 따라 놓입니다. 블록은 보통 새 줄에서 시작하고 인라인은 문장 속에 이어지며 공간이 부족하면 줄바꿈됩니다. display는 요소가 만드는 박스의 배치 방식을 바꾸지만 HTML 요소의 의미를 바꾸지는 않습니다.

같은 요소를 블록·인라인·인라인 블록으로 비교하기

div·p는 보통 블록, span·a는 보통 인라인으로 표시됩니다. 블록에 별도 너비를 주지 않으면 일반적으로 부모의 사용 가능한 너비를 채웁니다. 인라인은 문장의 글자처럼 줄 안에서 배치되므로 긴 콘텐츠가 여러 줄에 걸쳐 나뉠 수 있습니다. inline-block은 줄 안에 놓이는 하나의 상자로 취급되어 상자 내부의 내용은 줄바꿈되어도 상자 자체가 일반 인라인처럼 여러 조각으로 나뉘지 않습니다.

.item { width: 120px; height: 48px; padding: 8px; margin: 8px; }
.blocks .item { display: block; }
.inlines .item { display: inline; }
.inline-blocks .item { display: inline-block; }

전체 예제는 같은 span 세 개에 같은 크기와 여백을 주고 display만 바꿉니다. block은 항목마다 새 줄을 쓰고, inline-block은 공간이 있으면 같은 줄에 놓입니다. inline의 width·height 선언은 스타일 목록에 남아 있어도 일반 텍스트 span의 실제 박스 크기를 그 숫자로 만들지 않습니다. 계산된 선언과 실제 사용된 크기를 구분해 확인하세요.

인라인의 여백과 이미지 예외

일반 인라인에서 좌우 여백과 padding은 줄 안의 공간에 영향을 줍니다. 위아래 padding과 border는 그려질 수 있지만 블록처럼 주변 줄을 밀어내는 방식으로 줄 높이를 결정하지 않습니다. 여러 줄 텍스트에 큰 세로 padding을 주면 겹쳐 보일 수 있습니다. 전체 예제에서는 줄 높이에 여유를 주어 표시를 관찰합니다.

“인라인은 크기를 지정할 수 없다”는 설명을 모든 요소에 적용하지 마세요. img처럼 외부 콘텐츠로 채워지는 대체 요소(replaced element)는 기본 표시가 인라인이어도 width와 height로 크기를 정할 수 있습니다. 예제의 파란 직사각형 이미지는 120×60px입니다. 일반 텍스트 span과 같은 조건이라고 생각하지 않는 것이 중요합니다. 기본 흐름은 MDN의 블록·인라인 배치 안내를 참고하세요.

숨기는 두 방법은 공간이 다릅니다

DOM(Document Object Model)은 브라우저가 HTML 문서를 요소 구조로 다루는 모델입니다. CSS로 숨기는 것과 HTML 요소를 삭제하는 것은 다릅니다. display: none인 문단도 개발자 도구의 Elements에서 찾을 수 있습니다. 전체 예제의 “앞·대상·뒤” 행에서 hidden은 대상 자리의 빈칸이 남고 none은 뒤쪽 글자가 앞으로 당겨집니다.

두 속성 모두 보조 기술이나 키보드 접근에도 영향을 줄 수 있습니다. 중요한 안내를 단순히 보이지 않게 만드는 것은 화면 장식만의 문제가 아닙니다. 이번 실습은 정적인 상자의 공간 차이에 집중하며 실제 메뉴·버튼을 숨길 때는 포커스 이동과 사용 가능한 정보도 함께 확인해야 합니다. MDN의 display 설명와 MDN의 visibility 설명를 참고하세요.

inline-block의 정렬과 기본 흐름의 한계

inline-block은 글자 줄 안에 있으므로 기본적으로 줄의 기준선(baseline)에 맞춰집니다. 항목 아래에 빈 공간이 보이거나 높이가 다른 항목이 어긋나면 vertical-align과 line-height를 함께 확인하세요. HTML에서 항목 사이의 공백이나 줄바꿈도 인라인 배치에서는 눈에 보이는 간격이 될 수 있습니다.

display로 모양을 바꿔도 span이 제목 의미를 갖거나 div가 버튼으로 동작하지는 않습니다. 의미에 맞는 HTML을 고른 뒤 배치를 설정하세요. 여러 상자의 정렬·간격·크기를 함께 관리해야 한다면 이후 Flexbox·Grid에서 배우는 규칙이 더 적합할 수 있습니다. 기본 흐름을 이해하면 그 배치가 무엇을 바꾸는지 판단하기 쉬워집니다.

전체 예제를 실행하고 한 값씩 바꾸기

아래 코드를 display.html에 UTF-8로 저장하고 엽니다. 이미지 예제는 파일 없이 실행할 수 있는 SVG 데이터를 포함합니다. 세 배치 방식과 세 숨김 상태를 같은 문서에서 비교합니다.

<!doctype html>
<html lang="ko">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>display와 숨김 비교</title>
  <style>
    * { box-sizing: border-box; }
    body { margin: 16px; color: #333; font: 16px/1.6 sans-serif; }
    .example { margin-block: 24px; padding: 8px; border: 1px dashed #777; }
    .item { width: 120px; height: 48px; padding: 8px; margin: 8px;
      border: 1px solid #a8653e; background: #ffe8dd; }
    .blocks .item { display: block; }
    .inlines { line-height: 3; }
    .inlines .item { display: inline; }
    .inline-blocks .item { display: inline-block; }
    .visibility-row { margin-block: 16px; padding: 8px; border: 1px solid #aaa; }
    .target { display: inline-block; width: 120px; height: 48px; background: #d9eee2; }
    .none .target { display: none; }
    .hidden .target { visibility: hidden; }
    .replaced { width: 120px; height: 60px; vertical-align: middle; }
  </style>
</head>
<body>
  <h1>블록과 인라인 비교</h1>
  <h2>block</h2><div class="example blocks"><span class="item">항목 A</span><span class="item">항목 B</span><span class="item">항목 C</span></div>
  <h2>inline</h2><div class="example inlines"><span class="item">항목 A</span><span class="item">항목 B</span><span class="item">항목 C</span></div>
  <h2>inline-block</h2><div class="example inline-blocks"><span class="item">항목 A</span><span class="item">항목 B</span><span class="item">항목 C</span></div>
  <h2>표시·숨김·제거 비교</h2>
  <div class="visibility-row">앞 <span class="target">표시된 대상</span> 뒤</div>
  <div class="visibility-row hidden">앞 <span class="target">숨겨진 대상</span> 뒤</div>
  <div class="visibility-row none">앞 <span class="target">박스가 없는 대상</span> 뒤</div>
  <h2>인라인 대체 요소인 이미지</h2>
  <p>앞 <img class="replaced" alt="너비 120px, 높이 60px인 파란 직사각형" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='24'%3E%3Crect width='48' height='24' fill='%237ebad3'/%3E%3C/svg%3E"> 뒤</p>
</body>
</html>

1. 개발자 도구에서 block과 inline-block 항목의 테두리까지 크기를 확인합니다. 공통 border-box 규칙 때문에 120×48px입니다. inline 항목은 같은 width 선언이 있어도 120px 너비로 고정되지 않습니다.
2. 창을 좁혀 inline-block의 세 번째 항목이 다음 줄로 넘어가는지 확인합니다. block은 넓은 화면에서도 각각 새 줄에서 시작합니다.
3. .none .target의 display: none 선언을 끕니다. 대상이 나타나면서 뒤쪽 글자 위치가 달라지는지 확인하세요. hidden의 visibility 선언을 끄면 대상이 나타나지만 원래 확보한 공간은 유지됩니다.
4. 이미지의 width만 160px로 바꿉니다. 일반 인라인 span과 달리 크기가 변하는지 확인하고 120px로 되돌립니다. height 60px을 고정한 채 너비만 바꾸면 원래 비율이 달라집니다.

예상과 다른 배치는 최종 display 값, 부모의 배치 방식, 박스 크기와 줄 높이를 확인하세요. 적용되지 않는 크기 선언을 반복해서 추가하기보다 요소 종류와 기본 흐름을 먼저 구분하는 것이 도움이 됩니다.