CSS의 시각적 서식 모델(Visual Formatting Model)에 따르면, 문서 트리(document tree)의 모든 요소는 처리 과정에서 하나 이상의 박스(box)를 생성합니다. 생성된 박스에는 특정 CSS 속성이 연결되어 있으며, 이 속성 값에 따라 화면에 렌더링됩니다.
CSS에서 생성되는 대표적인 박스 유형은 다음과 같습니다.
- 블록 레벨 요소와 블록 박스 — 익명 블록 박스 포함
- 인라인 레벨 요소와 인라인 박스 — 익명 인라인 박스 포함
블록 레벨 요소와 블록 박스란?
<div>, <p>, <h1>~<h6> 같은 블록 레벨 요소는 항상 새로운 줄에서 시작하며, 기본적으로 부모 요소의 가용 너비 전체를 차지합니다. 각 블록 레벨 요소는 자신의 콘텐츠를 감싸는 주 블록 박스(principal block box)를 생성합니다.
익명 블록 박스(Anonymous Block Box)
블록 컨테이너 안에 블록 박스와 일반 텍스트가 섞여 있으면, 브라우저는 텍스트 부분을 별도의 익명 블록 박스로 감싸서 처리합니다. 예를 들어 <div> 내부에 텍스트와 <p> 요소가 번갈아 배치되어 있다면, 각 텍스트 조각이 하나의 익명 블록 박스가 됩니다.
예제 1: 블록 레벨 요소와 블록 박스
아래 코드는 블록 레벨 요소(<div class="child">)가 각각 독립된 블록 박스로 렌더링되어 세로 방향으로 쌓이는 모습을 보여줍니다.
<!DOCTYPE html>
<html>
<head>
<title>CSS 블록 레벨 요소와 블록 박스</title>
<style>
form {
width: 70%;
margin: 0 auto;
text-align: center;
}
* {
padding: 2px;
box-sizing: border-box;
}
input[type="button"] {
border-radius: 10px;
}
.child {
height: 40px;
width: 100%;
color: white;
border: 4px solid black;
}
.child:nth-of-type(1) { background-color: #FF8A00; }
.child:nth-of-type(2) { background-color: #F44336; }
.child:nth-of-type(3) { background-color: #C303C3; }
.child:nth-of-type(4) { background-color: #4CAF50; }
.child:nth-of-type(5) { background-color: #03A9F4; }
.child:nth-of-type(6) { background-color: #FEDC11; }
</style>
</head>
<body>
<form>
<fieldset>
<legend>CSS 블록 레벨 요소와 블록 박스</legend>
<div id="container">
주황색
<div class="child"></div>
빨간색
<div class="child"></div>
보라색
<div class="child"></div>
</div>
<br>
</fieldset>
</form>
</body>
</html>
출력 결과
실행 결과를 보면 각 <div> 요소가 가로 폭 전체를 차지하며 위에서 아래로 순서대로 쌓이는 것을 확인할 수 있습니다. 이것이 블록 박스의 기본 동작 방식입니다.
인라인 레벨 요소와 인라인 박스란?
<span>, <a>, <strong>, <em> 같은 인라인 레벨 요소는 줄바꿈을 만들지 않고 텍스트 흐름 안에 그대로 배치됩니다. 이러한 요소는 인라인 박스를 생성하며, 여러 인라인 박스가 하나의 라인 박스(line box) 안에 가로로 나란히 놓일 수 있습니다.
익명 인라인 박스(Anonymous Inline Box)
인라인 서식 맥락에서 인라인 요소로 감싸지 않은 텍스트는 익명 인라인 박스로 처리됩니다. 예를 들어 <div> 안에 "일반 텍스트 <span>강조</span> 일반 텍스트"처럼 섞여 있으면, <span> 바깥쪽의 텍스트들이 각각 익명 인라인 박스가 됩니다.
예제 2: 인라인 레벨 요소와 인라인 박스
아래 코드는 인라인 레벨 요소(<span class="child">)가 줄바꿈 없이 한 줄에 나란히 배치되는 모습을 보여줍니다.
<!DOCTYPE html>
<html>
<head>
<title>CSS 인라인 레벨 요소와 인라인 박스</title>
<style>
form {
width: 70%;
margin: 0 auto;
text-align: center;
}
* {
padding: 2px;
}
input[type="button"] {
border-radius: 10px;
}
.child {
color: white;
border: 4px solid black;
}
.child:nth-of-type(1) { background-color: #FF8A00; }
.child:nth-of-type(2) { background-color: #F44336; }
.child:nth-of-type(3) { background-color: #C303C3; }
.child:nth-of-type(4) { background-color: #4CAF50; }
.child:nth-of-type(5) { background-color: #03A9F4; }
.child:nth-of-type(6) { background-color: #FEDC11; }
</style>
</head>
<body>
<form>
<fieldset>
<legend>CSS 인라인 레벨 요소와 인라인 박스</legend>
<div>
<span class="child">주황색</span> 색상
<span class="child">빨간색</span> 색상
<span class="child">보라색</span> 색상
</div>
<br>
</fieldset>
</form>
</body>
</html>
출력 결과
실행 결과를 보면 <span> 요소들이 각자 새로운 줄을 만들지 않고, 텍스트 사이에 자연스럽게 끼어들어 한 줄에 나란히 배치되는 것을 확인할 수 있습니다.
마무리: 박스 유형을 이해해야 하는 이유
생성되는 박스의 유형을 정확히 이해하면 다음과 같은 이점이 있습니다.
- display 속성(block, inline, inline-block 등)을 상황에 맞게 선택할 수 있습니다.
- 레이아웃이 의도대로 적용되지 않는 원인을 빠르게 진단할 수 있습니다.
- 마진 겹침(margin collapsing)처럼 블록 박스에서만 발생하는 현상을 미리 예측할 수 있습니다.
핵심 차이를 요약하면, 블록 박스는 세로 방향으로 쌓이고, 인라인 박스는 한 줄 안에 가로로 나열됩니다. 두 유형의 동작 방식을 익혀두면 CSS 레이아웃 작업이 훨씬 수월해집니다.