Box model/Introduction

김동현·2026년 3월 18일

mdn 학습 번역 - CSS

목록 보기

47/190

CSS 박스 모델 입문 (Introduction to the CSS box model)

안녕하세요! 프론트엔드 개발의 세계에 오신 것을 환영합니다. 오늘 배울 내용은 CSS의 가장 기본이자 핵심인 CSS 박스 모델(Box model)입니다.

브라우저가 웹 페이지의 레이아웃을 잡을 때, 렌더링 엔진은 표준 CSS 기본 박스 모델에 따라 페이지 위의 모든 요소(element)를 하나의 직사각형 박스(box)로 취급하여 표현합니다. CSS는 바로 이 박스들의 크기(size), 위치(position), 그리고 시각적인 속성들(배경색, 테두리 두께 등)을 결정하는 역할을 하죠.

모든 요소의 박스는 중심부터 바깥쪽으로 향하는 네 개의 구역(또는 영역)으로 구성되며, 각 구역의 끝을 나타내는 경계선(edge)들에 의해 정의됩니다. 그 네 가지 구역은 안쪽부터 순서대로 콘텐츠(content) 경계, 패딩(padding) 경계, 테두리(border) 경계, 그리고 마진(margin) 경계입니다.

각 영역이 정확히 어떤 역할을 하는지 차근차근 살펴볼까요?

콘텐츠 영역 (Content area)

가장 안쪽에 위치한 콘텐츠 영역(Content area)은 '콘텐츠 경계'로 둘러싸여 있으며, 요소의 진짜 내용물(텍스트, 이미지, 비디오 플레이어 등)을 담고 있는 가장 핵심적인 구역입니다.

이 영역의 크기는 콘텐츠 너비(content-box width)와 콘텐츠 높이(content-box height)로 불립니다. 종종 배경색(background-color)이나 배경 이미지(background-image)가 이 영역을 채우게 되죠.

만약 요소의 box-sizing 속성이 기본값인 content-box로 설정되어 있고 해당 요소가 블록 레벨 요소(block element)라면, 여러분은 width, min-width, max-width, height, min-height, max-height 속성들을 이용해 이 콘텐츠 영역의 크기를 명시적으로 지정할 수 있습니다.

💡 강사님의 꿀팁: 쉽게 생각해서 귤 상자(박스) 안에 들어있는 진짜 '귤' 자체가 바로 이 콘텐츠 영역이라고 생각하시면 됩니다!

패딩 영역 (Padding area)

그다음 층인 패딩 영역(Padding area)은 '패딩 경계'로 둘러싸여 있으며, 안쪽의 콘텐츠 영역을 감싸면서 요소의 내부 여백(패딩)을 형성합니다. 이 영역의 전체 크기는 패딩 박스 너비(padding-box width)와 패딩 박스 높이(padding-box height)가 됩니다. (콘텐츠 크기 + 패딩 크기를 합친 것이죠.)

패딩의 두께는 padding-top, padding-right, padding-bottom, padding-left 속성을 각각 설정하거나, 한 번에 네 방향을 모두 지정할 수 있는 단축 속성인 padding을 통해 결정됩니다.

💡 강사님의 꿀팁: 상자 안에서 귤이 다치지 않게 싸두는 뽁뽁이나 스티로폼 완충재가 바로 패딩입니다. 요소의 바탕색(background)은 콘텐츠 영역뿐만 아니라 이 패딩 영역까지 칠해진다는 사실을 꼭 기억하세요!

테두리 영역 (Border area)

세 번째 층인 테두리 영역(Border area)은 '테두리 경계'로 둘러싸여 있으며, 패딩 영역 바깥에 위치하여 요소의 시각적인 외곽선을 만들어 냅니다. 이 영역의 전체 크기는 테두리 박스 너비(border-box width)와 테두리 박스 높이(border-box height)로 불립니다.

테두리의 두께는 border-width 속성이나 단축 속성인 border를 통해 결정됩니다.

여기서 아주 중요한 개념이 나옵니다. 만약 box-sizing 속성을 border-box로 설정하면, 여러분이 CSS에서 width나 height로 지정한 크기가 콘텐츠 영역이 아니라 이 테두리 영역(border area)까지 포함한 전체 크기를 의미하게 됩니다. (요즘 웹 개발에서는 너비 계산을 편하게 하기 위해 거의 모든 요소에 box-sizing: border-box;를 기본으로 깔고 시작합니다.)

또한, 박스에 배경(background-color 또는 background-image)을 설정하면, 기본적으로 그 배경은 패딩을 지나 테두리 영역의 바깥쪽 가장자리까지 뻗어 나갑니다. (즉, 테두리 선 바로 아래층(z-index)에 배경이 칠해지는 것이죠.) 만약 테두리에 점선을 적용하면 점선 사이로 배경색이 보이는 걸 확인할 수 있어요. 이 기본 동작은 background-clip CSS 속성을 통해 바꿀 수도 있습니다.

💡 강사님의 꿀팁: 스티로폼(패딩)을 감싸고 있는 '진짜 종이 상자'의 껍데기 두께가 바로 테두리(border)입니다!

마진 영역 (Margin area)

가장 바깥쪽 층인 마진 영역(Margin area)은 '마진 경계'로 둘러싸여 있으며, 테두리 바깥에 텅 빈 공간을 만들어내어 현재 요소와 주변에 있는 이웃 요소들 사이의 간격을 벌려주는 역할을 합니다. 이 영역의 전체 크기는 마진 박스 너비(margin box width)와 마진 박스 높이(margin box height)가 됩니다.

마진 영역의 크기는 margin-top, margin-right, margin-bottom, margin-left 속성을 사용하거나, 단축 속성인 margin을 통해 결정됩니다.

한 가지 주의할 점은, 여러 박스가 위아래로 인접해 있을 때 마진 상쇄(Margin collapsing) 현상이 발생할 수 있다는 점입니다. 두 마진이 서로 겹치면서 더 큰 마진 하나로 합쳐지는 현상인데, 이때는 박스들 사이의 마진 영역 경계가 명확하게 정의되지 않고 하나로 공유됩니다.

마지막으로 알아두실 점은, 비치환 인라인 요소(non-replaced inline elements, 예를 들어 일반적인 <span>이나 <a> 태그 같은 글자 요소들)의 경우, 테두리(border)와 패딩(padding)이 콘텐츠 주변에 시각적으로 그려지기는 하지만, 실제로 위아래 요소들을 밀어내며 줄 간격(줄의 높이)에 기여하는 공간은 패딩이나 테두리가 아니라 line-height 속성에 의해 결정된다는 사실입니다.