CSS3 box-sizing 속성으로 박스 너비와 높이 조절하기

CSS의 box-sizing 속성을 활용하면 요소의 너비(width)뿐만 아니라 높이(height)까지 계산 방식을 자유롭게 변경할 수 있습니다. 이 속성은 패딩(padding)과 테두리(border)가 요소의 실제 크기에 어떻게 영향을 주는지를 결정하며, 레이아웃 설계 시 매우 유용하게 사용됩니다.

box-sizing 속성이란?

기본적으로 CSS에서 요소의 너비는 콘텐츠 영역만을 기준으로 계산됩니다(content-box). 따라서 패딩이나 테두리를 추가하면 실제 화면에 표시되는 요소의 전체 크기가 지정한 너비보다 커지게 됩니다.

반면 box-sizing: border-box;를 적용하면 패딩과 테두리까지 포함한 값이 곧 요소의 최종 크기가 되므로, 원하는 크기를 정확하게 유지할 수 있다는 장점이 있습니다.

예제 코드

다음은 CSS3의 box-sizing 속성을 사용하여 박스 크기를 비교하는 예제입니다.

<!DOCTYPE html>
<html>
<head>
<style>
body {
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
div {
    width: 200px;
    height: 200px;
    display: inline-block;
}
.contentBox {
    padding: 50px;
    border: 1px solid rgb(255, 0, 128);
}
.borderBox {
    box-sizing: border-box;
    padding: 50px;
    border: 1px solid rgb(194, 0, 194);
}
</style>
</head>
<body>
<h1>Box sizing example using CSS</h1>
<div class="contentBox">
This div doesn't have box sizing property that's why it looks bigger
</div>
<div class="borderBox">
This div has box sizing property
</div>
</body>
</html>

코드 설명

.contentBox: box-sizing 속성이 적용되지 않은 기본 상태(content-box)입니다. 너비 200px에 좌우 패딩 50px씩과 테두리 1px가 더해져 실제 렌더링 크기는 302px가 됩니다.
.borderBox: box-sizing: border-box;가 적용된 상태입니다. 패딩과 테두리가 너비 200px 안에 포함되므로, 콘텐츠 영역은 자동으로 줄어들어 전체 크기가 정확히 200px로 유지됩니다.

실행 결과

위 코드를 실행하면 두 개의 div 요소가 나란히 표시되지만, box-sizing 속성이 없는 첫 번째 박스가 훨씬 크게 보이는 것을 확인할 수 있습니다.

CSS3 box-sizing 속성으로 박스 너비와 높이 조절하기

마무리

box-sizing: border-box는 반응형 웹 디자인에서 레이아웃이 어긋나는 문제를 방지하는 데 필수적인 속성입니다. 대부분의 개발자는 아래와 같이 모든 요소에 일괄 적용하여 사용하기도 합니다.

* {
    box-sizing: border-box;
}