CSS에서 요소의 실제 크기가 어떻게 계산되는지 이해하는 것은 레이아웃 작업의 기본입니다. CSS2의 기본 크기 계산 방식과 CSS3에서 도입된 box-sizing 속성은 같은 width, height 값을 지정해도 화면에 나타나는 결과가 완전히 다릅니다. 지금부터 두 방식의 차이를 예제 코드와 함께 자세히 살펴보겠습니다.
CSS2 크기 속성의 동작 방식
CSS2에서는 width와 height 속성이 콘텐츠 영역(content box)에만 적용됩니다. 여기에 padding이나 border를 추가하면 그만큼 요소의 전체 크기가 커지게 됩니다.
예를 들어 아래 코드에서 .div1은 지정한 대로 200×100px로 표시되지만, .div2는 좌우 패딩 50px씩, 상하 패딩 50px씩 더해져 실제로는 약 302×202px로 렌더링됩니다.
<html>
<head>
<style>
.div1 {
width: 200px;
height: 100px;
border: 1px solid green;
}
.div2 {
width: 200px;
height: 100px;
padding: 50px;
border: 1px solid pink;
}
</style>
</head>
<body>
<div class = "div1">TutorialsPoint.com</div></br>
<div class = "div2">TutorialsPoint.com</div>
</body>
</html>
이처럼 CSS2 방식에서는 패딩과 테두리가 늘어날 때마다 전체 크기를 직접 다시 계산해야 하므로, 복잡한 레이아웃에서는 크기가 어긋나는 문제가 자주 발생했습니다.
CSS3 box-sizing 속성의 동작 방식
CSS3에서 새롭게 제공되는 box-sizing: border-box 속성을 사용하면 이야기가 달라집니다. 이 경우 width와 height 값에 패딩과 테두리까지 모두 포함되어 계산됩니다.
즉, 아래 예제의 두 div는 패딩 유무와 관계없이 모두 정확히 300×100px로 표시됩니다. 패딩이 커질수록 내부 콘텐츠 영역이 줄어들 뿐, 요소의 외부 크기는 절대 변하지 않습니다.
<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>
핵심 차이점 한눈에 보기
| 구분 | CSS2 (content-box) | CSS3 (border-box) |
|---|---|---|
| width/height 적용 범위 | 콘텐츠 영역만 | 콘텐츠 + 패딩 + 테두리 전체 |
| 패딩·테두리 추가 시 | 요소 전체 크기 증가 | 요소 전체 크기 불변, 내부 영역만 축소 |
| 레이아웃 예측성 | 낮음 (직접 계산 필요) | 높음 (직관적 설계 가능) |
실무 활용 팁
현대 웹 개발에서는 대부분 프로젝트 시작 시 다음과 같이 전역으로 border-box를 적용합니다. 이렇게 하면 모든 요소의 크기를 직관적으로 관리할 수 있어 반응형 레이아웃 작업이 훨씬 수월해집니다.
*, *::before, *::after {
box-sizing: border-box;
}
정리하면, CSS2 방식은 크기 계산이 번거로운 반면 CSS3의 box-sizing: border-box는 패딩과 테두리를 포함한 최종 크기를 그대로 지정할 수 있어 훨씬 안정적이고 예측 가능한 레이아웃을 만들 수 있습니다.