HTML 문서의 모든 요소는 CSS에 의해 하나의 직사각형 박스(box)로 취급됩니다. 이것이 CSS의 기본 레이아웃 방식이며, 필요에 따라 자유롭게 커스터마이징할 수 있습니다. 요소의 위치 지정, 콘텐츠 배치, 그리고 주변 요소와의 간격 조절은 모두 CSS 박스 모델을 기준으로 이루어집니다.
먼저 다음 이미지를 통해 박스 모델의 전체 구조를 살펴보겠습니다.
출처: w3.org
CSS 박스 모델의 4가지 구성 요소
1. 콘텐츠(Content)
텍스트, 이미지, 동영상 등 실제 데이터가 표시되는 영역입니다. width와 height 속성으로 이 영역의 크기를 조절할 수 있습니다.
2. 패딩(Padding)
콘텐츠 바깥 경계와 테두리 사이의 내부 여백을 의미합니다. padding 속성으로 크기를 조절할 수 있으며, padding-left, padding-bottom처럼 특정 방향만 개별적으로 설정할 수도 있습니다.
3. 테두리(Border)
패딩의 바깥 경계부터 마진의 안쪽 경계까지가 요소의 테두리 영역입니다. 기본 두께는 0이며, border 속성으로 정의합니다. 필요에 따라 각 변을 개별적으로 스타일링하는 것도 가능합니다.
4. 마진(Margin)
요소의 박스와 주변 요소의 박스 사이의 외부 여백을 말합니다. 책 페이지의 여백과 비슷한 개념으로, 색상은 항상 투명합니다. 패딩과 성격이 유사하지만, 패딩이 테두리 내부의 공간을 확보하는 반면 마진은 테두리 바깥쪽 공간을 확보한다는 점이 다릅니다. 역시 각 방향별로 개별 설정이 가능합니다.
박스 모델 기본 예제
다음 예제를 통해 박스 모델이 실제로 어떻게 적용되는지 확인해 보겠습니다.
<!DOCTYPE html>
<html>
<head>
<style>
div {
margin: 25px;
padding: 35px;
width: 200px;
background-color: lightseagreen;
border: 20px dashed indianred;
}
</style>
</head>
<body>
<div>
Content demo box<br/>
</div>
</body>
</html>실행 결과
위 예제에서는 <div> 요소의 크기를 CSS에서 직접 지정했습니다. 이 요소의 전체 너비는 360px이며, 다음과 같이 계산됩니다.
width + (left+right)padding + (left+right)border + (left+right)margin
= 200 + (35+35) + (20+20) + (25+25)
= 360px마진과 패딩이 단순히 불필요한 공간을 더하는 것처럼 보일 수 있지만, 실제로는 반응형 웹페이지 제작에 폭넓게 활용됩니다. 박스 모델을 잘 이해하고 활용하면 요소를 훨씬 더 정교하게 배치할 수 있습니다.
박스 모델 활용 예제
다음 예제들은 CSS 박스 모델의 다양한 활용 방법을 보여줍니다.
예제 2 – 원형 박스 만들기
<!DOCTYPE html>
<html>
<head>
<style>
div {
margin: auto;
padding: 35px;
width: 80px;
box-shadow: inset 0 0 22px indianred;
border-radius: 50%;
}
div > div {
padding: 0 0px 100px 0px;
border-radius: 3%;
box-shadow: inset 0 0 22px seagreen;
}
</style>
</head>
<body>
<div>
<div></div>
</div>
</body>
</html>실행 결과
예제 3 – box-sizing 속성 비교
<!DOCTYPE html>
<html>
<head>
<style>
#demo {
width: 350px;
display: flex;
float: left;
border: 6px solid black;
border-radius: 6%;
}
.d1 {
margin-left: 20px;
width: 150px;
height: 80px;
box-shadow: 0 0 0 4px mediumslateblue;
box-sizing: border-box;
border-radius: 36%;
}
.d2 {
width: 150px;
height: 80px;
padding: 30px;
box-shadow: 0 0 0 4px darkred;
box-sizing: border-box;
border-radius: 36%;
}
</style>
</head>
<body>
<div id="demo">
<div class="d1"></div>
<div class="d2"></div>
</div>
</body>
</html>실행 결과
