CSS에서 모든 요소는 박스 형태로 구성되며, 이 박스 모델(Box Model)은 요소가 화면에서 차지하는 공간을 결정하는 기본 개념이다. 박스 모델은 아래와 같은 4가지 주요 영역으로 이루어져 있다.
Content (내용 영역)
- 요소의 실제 콘텐츠(텍스트, 이미지 등)가 들어가는 부분이다.
width,height속성으로 크기를 조정할 수 있다.
Padding (안쪽 여백)
- 콘텐츠와 테두리(border) 사이의 여백을 의미한다.
padding속성으로 조정하며, 요소의 배경색이 패딩 영역까지 적용된다.
예시
div {
padding: 20px; /* 모든 방향에 20px 패딩 */
}Border (테두리)
- 패딩과 마진 사이의 경계선 역할을 한다.
border속성으로 크기, 스타일, 색상을 설정할 수 있다.
예시
div {
border: 2px solid black; /* 2px 두께, 실선, 검은색 테두리 */
}Margin (바깥 여백)
- 요소 바깥쪽의 공간으로, 다른 요소와의 간격을 조절할 때 사용한다.
margin속성으로 설정한다.
예시
div {
margin: 10px; /* 모든 방향에 10px 마진 */
}- 마진 병합 (Margin Collapse): 인접한 요소의 수직 방향 마진이 겹칠 경우, 더 큰 마진 값 하나만 적용된다.
기본적인 크기 계산
박스 모델에서 요소의 전체 크기(총 너비와 높이)는 다음과 같이 계산된다.
Total Width = width + padding-left + padding-right + border-left + border-right + margin-left + margin-right
Total Height = height + padding-top + padding-bottom + border-top + border-bottom + margin-top + margin-bottom속성
기본적으로 width와 height는 content 영역의 크기를 의미하지만, box-sizing 속성을 이용하면 계산 방식을 변경할 수 있다.
기본값 (box-sizing: content-box)
width와height가 content 영역만을 포함하며, padding과 border는 추가됨.
div {
width: 200px;
height: 100px;
padding: 20px;
border: 5px solid black;
}실제 총 너비
200 + 20 + 20 + 5 + 5 = 250pxbox-sizing: border-box
width와height가 padding과 border까지 포함한 크기로 계산됨.
div {
width: 200px;
height: 100px;
padding: 20px;
border: 5px solid black;
box-sizing: border-box;
}실제 총 너비
200px 그대로 유지됨 (padding과 border가 내부에서 조절됨)
실무에서는
box-sizing: border-box를 주로 사용하여 크기 계산을 더 직관적으로 만든다.
실제 예제 코드
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Box Model</title>
<style>
* {
box-sizing: border-box;
}
.box {
width: 300px;
height: 150px;
padding: 20px;
border: 5px solid black;
margin: 10px;
background-color: lightblue;
}
</style>
</head>
<body>
<div class="box">This is a box</div>
</body>
</html>정리
- Box Model은 콘텐츠(Content), 패딩(Padding), 테두리(Border), 마진(Margin)으로 구성됨.
box-sizing: border-box;을 사용하면 더 직관적으로 크기를 조절할 수 있음.- 마진 병합(Margin Collapse) 현상에 유의해야 함.
Turning Vision into Reality.