브라우저는 CSS 박스 모델(box model)을 기준으로 웹 페이지에서 각 요소가 어떻게 표시될지를 결정합니다. 박스 모델은 요소의 크기뿐 아니라 테두리(border), 안쪽 여백(padding), 바깥 여백(margin)까지 하나의 구조로 표현하며, 개발자는 이 각각의 영역을 개별적으로 스타일링할 수 있습니다.
웹 페이지의 모든 요소는 사각형 박스로 둘러싸여 있습니다. 이 박스가 어떻게 동작하는지 이해하는 것은 원하는 위치에 요소를 정확하게 배치하기 위해 반드시 알아야 하는 핵심 개념입니다.
CSS 박스 모델은 박스가 웹 페이지에서 어떤 모습으로, 어느 위치에 나타날지를 결정하는 데 사용됩니다. 이 모델은 하나의 박스를 구성하는 네 가지 요소, 즉 콘텐츠(content), 패딩(padding), 테두리(border), 마진(margin)을 다룹니다. 이 글에서는 CSS 박스 모델의 기본 개념과 주요 구성 요소를 하나씩 살펴보겠습니다.
CSS 박스 모델이란?
CSS 박스 모델은 CSS의 모든 박스에 적용되는 기본 구조입니다. 이 모델은 박스를 이루는 각 부분이 어떻게 조합되어 화면에 하나의 요소로 나타나는지를 브라우저에 알려주며, 콘텐츠·패딩·테두리·마진 네 가지 영역을 포함합니다.
박스 모델의 각 요소를 간단히 정리하면 다음과 같습니다.
- 콘텐츠(Content): 박스의 실제 내용이 들어가는 영역으로, 텍스트, 이미지, 폼 등 다양한 웹 요소가 이곳에 표시됩니다.
- 패딩(Padding): 콘텐츠와 테두리 사이의 공간입니다. 패딩 영역은 투명합니다.
- 테두리(Border): 콘텐츠(또는 패딩이 지정된 경우 패딩)를 감싸는 윤곽선으로, 색상과 스타일을 자유롭게 지정할 수 있습니다.
- 마진(Margin): 테두리 바깥쪽 가장자리와 페이지 내 다른 요소 사이의 공간입니다. 마진 역시 투명합니다.
이제 각 구성 요소가 무엇인지, 그리고 실제로 어떻게 사용하는지 하나씩 자세히 알아보겠습니다.
콘텐츠 영역(Content Area)
콘텐츠 영역은 박스 모델의 중심에 있는 부분으로, 텍스트와 이미지 같은 실제 요소가 표시되는 공간입니다. 콘텐츠 영역의 크기는 CSS의 width(너비)와 height(높이) 속성으로 지정합니다.
기본적으로 콘텐츠 영역의 크기는 그 안에 담긴 요소의 크기를 따릅니다. 예를 들어 한 줄짜리 텍스트가 있다면, 박스는 그 텍스트 줄만큼의 너비와 높이를 가지게 됩니다.
그렇다면 높이 200px, 너비 200px 크기의 박스를 만들어 보겠습니다. 다음 코드를 사용하면 됩니다.
<html>
<p>This is a box.</p>
</html>
<style>
p {
height: 200px;
width: 200px;
}
</style>위 코드에서는 HTML의 <p> 태그로 문단을 하나 만들었습니다. 앞서 말했듯 웹 디자인의 모든 요소는 박스 형태이므로, 박스 모델은 <p> 태그에도 그대로 적용됩니다. CSS 코드에서는 모든 <p> 태그의 높이를 200px, 너비를 200px로 설정하는 규칙을 작성했습니다.
너비와 높이 속성, 그리고 CSS 콘텐츠 영역에 대해 더 깊이 알고 싶다면 CSS 너비·높이 입문 가이드를 함께 참고하면 좋습니다.
패딩 영역(Padding Area)
패딩 영역은 콘텐츠 영역을 확장하는 개념으로, 콘텐츠와 테두리 사이에 여백을 만들어 줍니다. 패딩은 웹 페이지에서 배너나 공지사항처럼 시각적으로 강조하고 싶은 요소를 만들 때 특히 유용합니다.
박스에 패딩을 적용하려면 CSS의 padding 속성을 사용합니다. 예를 들어 앞서 만든 박스에 20px의 패딩을 적용하고 싶다면 다음과 같이 작성할 수 있습니다.
<html>
<p>This is a box.</p>
</html>
<style>
p {
height: 200px;
width: 200px;
padding: 20px;
}
</style>padding 속성을 지정하고 값을 20px로 설정하면, 콘텐츠 영역과 테두리 사이에 20px의 여백이 생깁니다.
결과적으로 박스 안쪽에 일정한 간격이 확보되어, 텍스트가 테두리에 바로 붙지 않고 여유 있게 배치됩니다.
테두리 영역(Border Area)
테두리 영역은 박스의 테두리가 그려지는 부분입니다. 테두리는 패딩 바깥쪽을 감싸는 윤곽선으로, 원하는 어떤 색상이든 지정할 수 있으며 실선(solid), 점선(dashed), 이중선(double) 등 다양한 기본 스타일도 제공됩니다.
예를 들어 박스 주위에 너비 5px의 연한 파란색 테두리를 추가하고 싶다면 다음 코드를 사용할 수 있습니다.
<html>
<p>This is a box.</p>
</html>
<style>
p {
height: 200px;
width: 200px;
padding: 20px;
border: 5px solid lightblue;
}
</style>CSS의 border 속성으로 너비 5px, 연한 파란색(lightblue) 테두리를 정의했습니다. 이 테두리는 'solid' 스타일을 사용해 실선 하나로 그려집니다. 테두리가 콘텐츠와 일정 거리를 두고 떨어져 있는 것을 확인할 수 있는데, 이는 박스 주변에 20px의 패딩을 지정했기 때문입니다.
마진 영역(Margin Area)
마진 영역은 박스 모델의 가장 바깥쪽 계층입니다. 이 영역은 해당 요소와 페이지 내 다른 요소들을 분리하는 빈 공간을 만들어 줍니다.
예를 들어 웹 페이지에서 두 박스 사이에 10px의 간격을 만들고 싶다면 다음과 같이 작성할 수 있습니다.
<html>
<p>This is a box.</p>
<p>This is another box.</p>
</html>
<style>
p {
height: 200px;
width: 200px;
padding: 20px;
border: 5px solid lightblue;
margin: 10px;
}
</style>이번에는 HTML 파일에 두 개의 박스를 만든 뒤, margin 속성을 사용해 각 박스에 10px의 마진을 적용했습니다.
실행 결과 두 박스 사이에 10px의 간격이 생긴 것을 확인할 수 있습니다. 마진은 박스의 테두리와 페이지의 다른 요소들 사이에 공간을 만들기 때문입니다.
마진 영역에 대해 더 알고 싶다면 CSS 마진 관련 튜토리얼을 참고해 보세요.
실제 너비와 높이 계산 방법
초보자가 흔히 저지르는 실수 중 하나는 요소의 높이와 너비 속성값에 패딩, 마진, 테두리까지 포함되어 있다고 생각하는 것입니다. 하지만 이것은 사실이 아닙니다.
width와 height 속성은 웹 요소의 콘텐츠 영역 크기만 지정합니다. 즉, 이 값에는 테두리, 패딩, 마진이 포함되지 않습니다.
앞선 예제의 박스가 실제로 차지하는 전체 공간을 알고 싶다면 간단한 계산이 필요합니다. 앞서 '마진 영역' 예제에서 지정한 값은 다음과 같습니다.
- 높이(height): 200px
- 너비(width): 200px
- 패딩(padding): 20px
- 마진(margin): 10px
- 테두리(border): 5px
전체 너비는 다음과 같이 계산할 수 있습니다.
- 200px (너비) +
- 40px (좌우 패딩 20px × 2) +
- 10px (좌우 테두리 5px × 2) +
- 20px (좌우 마진 10px × 2)
계산 결과, 이 박스가 실제로 차지하는 전체 너비는 270px입니다.
높이도 같은 방식으로 계산합니다. 박스의 높이에 상하 방향의 패딩, 테두리, 마진 값을 각각 더하면 됩니다.
마무리
CSS 박스 모델은 웹 페이지에 요소를 렌더링할 때 사용되는 기본 구조입니다. HTML의 모든 요소는 직사각형 박스이며, 박스 모델은 이 박스를 이루는 콘텐츠, 패딩, 테두리, 마진이 어떻게 표시되는지를 정의합니다.
박스 모델을 정확히 이해하면 요소의 크기 조절과 레이아웃 배치가 훨씬 수월해집니다. 오늘 배운 네 가지 구성 요소를 직접 코드로 작성해 보면서 감각을 익혀 보세요.