HTML DOM의 boxSizing 속성은 요소의 전체 너비와 높이를 계산하는 방식을 지정하는 데 사용됩니다. 이 속성은 border-box 또는 content-box 값을 가질 수 있으며, CSS 레이아웃 설계에서 매우 중요한 역할을 합니다.
문법(Syntax)
boxSizing 속성을 설정하는 기본 문법은 다음과 같습니다.
object.style.boxSizing = "content-box|border-box|initial|inherit";
속성 값(Property Values)
boxSizing 속성에 사용할 수 있는 값과 각각의 의미는 아래 표와 같습니다.
| 값 | 설명 |
|---|---|
| content-box | 기본값(default)입니다. 패딩(padding)이나 테두리(border)의 두께가 콘텐츠 박스의 최종 너비에 추가로 더해집니다. |
| border-box | 지정된 너비가 그대로 유지되며, 패딩이나 테두리가 적용되면 그만큼 콘텐츠 영역이 줄어듭니다. |
| initial | 해당 속성을 초기값으로 설정합니다. |
| inherit | 부모 요소의 속성 값을 상속받습니다. |
두 값의 핵심 차이를 정리하면 다음과 같습니다.
- content-box: width에 패딩과 테두리 두께가 더해져서 실제 화면상의 크기가 커집니다.
- border-box: width에 패딩과 테두리 두께가 포함되어 실제 화면상의 크기가 일정하게 유지됩니다.
예제(Example)
다음 예제는 버튼 클릭 시 div 요소의 box-sizing 속성을 border-box에서 content-box로 변경하는 코드입니다.
<!DOCTYPE html>
<html>
<head>
<style>
#DIV1{
height:100px;
width: 350px;
border: 30px solid lightpink;
box-sizing: border-box;
}
</style>
<script>
function changeBoxSizing(){
document.getElementById("DIV1").style.boxSizing="content-box";
document.getElementById("Sample").innerHTML="box-sizing 속성이 content-box로 변경되었습니다.";
}
</script>
</head>
<body>
<div id="DIV1">
THIS IS SAMPLE TEXT INSIDE DIV. HELLO WORLD DIV.
</div>
<p>아래 버튼을 클릭하여 위 div의 box-sizing 속성을 변경해 보세요.</p>
<button onclick="changeBoxSizing()">Box Sizing 변경</button>
<p id="Sample"></p>
</body>
</html>실행 결과(Output)
페이지를 처음 열면 div 요소는 border-box로 설정되어 있으므로, 350px 너비 안에 30px 테두리가 포함된 상태로 표시됩니다.
이후 “Box Sizing 변경” 버튼을 클릭하면 box-sizing 속성이 content-box로 바뀌면서, 테두리 두께(좌우 각 30px)가 너비에 추가되어 요소의 실제 크기가 커지는 것을 확인할 수 있습니다.
정리
boxSizing 속성은 요소의 크기 계산 방식을 결정하는 핵심 속성입니다. 특히 반응형 웹 레이아웃을 만들 때 border-box를 사용하면 패딩과 테두리까지 포함한 직관적인 크기 계산이 가능해져, 많은 개발자들이 전역적으로 * { box-sizing: border-box; }를 선언하여 사용하기도 합니다.