CSS box-sizing 속성이란?
box-sizing 속성은 HTML 요소의 너비(width)와 높이(height)가 어떻게 계산되는지 결정하는 CSS 속성입니다. 패딩(padding)이나 테두리(border)를 추가했을 때 요소의 전체 크기가 어떻게 변하는지를 제어할 수 있어, 레이아웃 작업 시 매우 유용하게 사용됩니다.
기본 박스 모델의 크기 계산 방식
CSS2부터 박스 모델은 기본적으로 아래와 같은 방식으로 동작했습니다.
width + padding + border = 요소 박스의 실제 화면상(렌더링된) 너비 height + padding + border = 요소 박스의 실제 화면상(렌더링된) 높이
즉, 기본값인 content-box에서는 지정한 width 값에 패딩과 테두리 두께가 추가로 더해져 실제 표시되는 크기가 커지게 됩니다. 예를 들어 width가 300px이고 padding이 50px라면, 실제 요소는 400px 이상으로 렌더링됩니다.
box-sizing 예제
box-sizing 속성의 동작 방식을 이해하기 위해 간단한 예제를 살펴보겠습니다.
<html>
<head>
<style>
.div1 {
width: 300px;
height: 100px;
border: 1px solid blue;
box-sizing: border-box;
}
.div2 {
width: 300px;
height: 100px;
padding: 50px;
border: 1px solid red;
box-sizing: border-box;
}
</style>
</head>
<body>
<div class = "div1">TutorialsPoint.com</div><br/>
<div class = "div2">TutorialsPoint.com</div>
</body>
</html>코드 설명
- .div1: 너비 300px, 높이 100px에 파란색 테두리만 적용된 요소입니다.
- .div2: .div1과 동일한 크기에 빨간색 테두리와 50px의 패딩이 추가된 요소입니다.
두 요소 모두 box-sizing: border-box;가 적용되어 있습니다. 이 값이 설정되면 패딩과 테두리가 width·height 안에 포함되어 계산됩니다. 따라서 div2처럼 패딩이 50px 추가되더라도 요소의 전체 크기는 그대로 300px × 100px로 유지되며, 대신 내부 콘텐츠 영역이 줄어들게 됩니다.
box-sizing의 주요 값
- content-box(기본값): width·height는 콘텐츠 영역만 포함하며, 패딩과 테두리는 별도로 더해집니다.
- border-box: width·height에 패딩과 테두리가 모두 포함되어, 지정한 크기 그대로 화면에 표시됩니다.
실무에서는 레이아웃 예측을 쉽게 하기 위해 대부분의 프로젝트에서 다음과 같이 전역적으로 border-box를 적용하는 것이 일반적입니다.
* {
box-sizing: border-box;
}이렇게 하면 모든 요소의 크기 계산이 직관적으로 일관되게 유지되어, 반응형 레이아웃이나 그리드 시스템 구축 시 발생할 수 있는 크기 오류를 효과적으로 방지할 수 있습니다.