CSS box-sizing 속성을 활용하면 브라우저가 HTML 요소의 너비와 높이를 계산하고 렌더링하는 방식을 직접 제어할 수 있습니다. 이 글에서는 box-sizing의 두 가지 값인 content-box와 border-box의 차이와 실전 활용법을 자세히 알아봅니다.
box-sizing: content-box vs border-box
CSS box-sizing 속성에는 두 가지 값이 있습니다.
content-box(기본값)border-box
두 값 모두 브라우저가 HTML 요소의 크기를 계산하고 렌더링하는 방식에 영향을 주지만, 그것이 두 값의 유일한 공통점입니다.
content-box
기본적으로 모든 HTML 요소는 content-box 값을 사용합니다.
box-sizing: content-box;즉, 다음과 같은 스타일을 가진 요소가 있다고 가정해 보겠습니다.
div {
width: 100px;
height: 100px;
padding: 16px;
border: 1px solid;
}이 경우 해당 요소의 너비와 높이는 CSS에서 지정한 100px가 아니라 134px로 계산되어 렌더링됩니다. 결과는 다음과 같습니다.
직접 크기를 확인하고 싶다면 다음 단축키로 브라우저의 요소 검사기(Element Inspector)를 실행해 보세요.
- Mac: Cmd + Shift + C
- Windows: Ctrl + Shift + C
검사기를 연 후 마우스를 해당 요소 위에 올리면 실제 크기를 확인할 수 있습니다.
이런 결과가 나타나는 이유는 content-box가 너비/높이 값에 테두리(border) 값(양쪽 각 1px)과 안쪽 여백(padding) 값(양쪽 각 16px)을 모두 더한 합계를 요소의 최종 크기로 렌더링하기 때문입니다.
- 요소 너비:
1 + 16 + 100 + 16 + 1= 134픽셀 - 요소 높이:
1 + 16 + 100 + 16 + 1= 134픽셀
content-box의 이러한 기본 동작은 개발 시 꽤 번거롭게 느껴질 수 있지만, 다행히도 손쉽게 변경할 수 있습니다!
참고로 기본값인 box-sizing: content-box 선언은 모든 웹 브라우저에 내장된 사용자 에이전트 스타일시트(User Agent Stylesheet)에서 상속됩니다.
border-box로 문제 해결하기
content-box 값은 border-box 값으로 손쉽게 재정의할 수 있습니다. border-box는 브라우저가 요소 크기를 계산하는 방식에 정반대의 효과를 냅니다.
box-sizing: border-box;box-sizing 속성을 border-box로 설정하면, 브라우저는 요소의 height와 width 속성에 지정한 정확한 크기 그대로 요소를 렌더링합니다.
div {
width: 100px;
height: 100px;
padding: 16px;
border: 1px solid;
box-sizing: border-box;
}결과는 다음과 같습니다.
border-box 값은 브라우저가 요소의 전체 너비와 높이를 계산할 때 지정된 padding과 border 값을 포함(별도의 덧셈이 아닌)하도록 만듭니다.
border-box를 사용하면 요소에 어떤 padding이나 border 값을 추가하더라도, 요소의 전체 크기는 항상 height와 width 속성에 지정한 값 그대로 유지됩니다.
이해를 돕기 위해 두 방식을 나란히 비교한 예시를 살펴보겠습니다.
위의 두 요소 모두 너비와 높이가 100픽셀로 지정되어 있지만, border-box를 사용하는 두 번째 요소만 지정된 값을 그대로 따릅니다.
content-box와 border-box의 차이를 요약하면 다음과 같습니다.
content-box: padding과 border 값을 요소의 높이/너비 값에 합산하여 총합을 렌더링합니다.border-box: padding과 border 값을 요소의 너비/높이에 포함시켜 지정한 크기를 유지합니다.
모든 요소에 border-box 적용하기
이제 border-box를 사용하면 브라우저가 CSS에서 지정한 실제 크기대로 HTML 요소를 렌더링한다는 것을 알았습니다. 그렇다면 프로젝트의 모든 HTML 요소에 border-box를 일괄 적용하려면 어떻게 해야 할까요?
방법은 아주 간단합니다. 스타일시트의 맨 위에 다음 CSS 규칙만 추가하면 됩니다.
*, *:before, *:after {
box-sizing: border-box;
}위 코드는 CSS의 범용 선택자(universal selector)인 *를 사용하여 다음 대상들의 box-sizing 속성에 border-box 값을 일괄 적용합니다.
- 모든 일반 요소 선택자 (
div,p,button등) - 모든
:before및:after의사(pseudo) 선택자
이처럼 모든 HTML 요소에 border-box를 적용해 두면, 브라우저가 요소 크기를 어떻게 렌더링할지 더 이상 고민할 필요가 없습니다. 요소의 크기는 언제나 여러분이 직접 지정한 높이와 너비 그대로 유지됩니다.