🌱 기초 프론트엔드
CSS에서 box-sizing이란?
쉽게 이해하기
택배 상자 크기를 말할 때, 내용물만 재는지(content-box) 포장재까지 포함해서 재는지(border-box)의 차이예요. border-box로 설정하면 '전체 크기가 딱 이만큼'이라고 지정할 수 있어서 계산이 훨씬 편해집니다.
핵심 정리
width와 height에 padding과 border를 포함시킬지 결정하는 속성입니다.
자세히 알아보기
box-sizing은 요소의 크기를 계산하는 방식을 결정하는 CSS 속성입니다. 기본값인 content-box는 width/height가 콘텐츠 영역만 가리키고, padding과 border는 추가로 늘어나요. 반면 border-box는 width/height에 padding과 border가 포함되어서 전체 크기가 정확히 그 값이 됩니다.
실무에서는 대부분 box-sizing: border-box를 전역으로 설정해서 사용합니다. 'width: 300px'이라고 하면 정말 300px이 되어서 레이아웃 계산이 훨씬 직관적이거든요. content-box를 쓰면 padding: 20px를 추가했을 때 실제 너비는 340px이 되어버려서 헷갈립니다.
많은 CSS 리셋 라이브러리나 프레임워크는 '*, *::before, *::after { box-sizing: border-box; }'를 기본으로 포함하고 있습니다. 이렇게 하면 모든 요소가 border-box로 작동해서 예상치 못한 레이아웃 문제를 줄일 수 있어요.
특히 반응형 디자인에서 퍼센트 단위를 사용할 때 box-sizing: border-box가 없으면 계산이 매우 복잡해집니다. 예를 들어 'width: 50%'로 두 개를 나란히 놓으려고 했는데 padding 때문에 줄바꿈이 되는 상황을 방지할 수 있죠.