box-sizing은 요소의 너비와 높이를 어떻게 계산할 것인지 지정하는 속성이다. 우리는 보통 요소의 크기를 정하고, 안쪽 여백이나 테두리를 넣게되면 크기 + (여백or테두리)만큼의 크기를 얻게된다. 하지만 부모 컨테이너 내에서 자식 컨테이너가 (여백or테두리)를 갖게되면 문제가 될 수 있다. 자식 컨테이너가 부모 컨테이너보다 크기가 커져 틀에 벗어나거나 겹치는 상황이 나올 수 있기 때문이다. box-sizing속성을 이용하면 이러한 여백or테두리의 크기를 고려하여 원하는 크기를 얻을 수 있다.
box-sizing의 주요 속성
content-box
box-sizing: content-box;
테두리 추가
content-box는 가장 기본이 되는 박스 크기 결정 방법이다. 위에 예시는 자식 컨테이너에 width:100%와 border(테두리)를 설정하였다. 예시와 같이 부모와 자식의 너비의 크기는 같지만 테두리의 두께로 인해 자식 컨테이너가 부모 컨테이너의 크기에서 벗어난 것을 볼 수 있다.
border-box
box-sizing: border-box;
테두리 추가
border-box는 테두리와 안쪽 여백의 크기 모두를 고려한다. 위에 예시는 자식 컨테이너에 width:100%와 border(테두리)를 설정하였지만, 본래 부모 컨테이너의 크기와 테두리의 크기를 고려하여 width:100%를 알맞게 맞춘것을 볼 수 있다.
