[CSS] 박스 모델(box-sizing)

box-sizing 속성은 박스 너비의 기준을 정하는 속성이다.

웹 사이트에 여러 요소를 배치하려면 각 요소의 너비를 계산해야 한다.

기본적으로 CSS의 width 속성은 콘텐츠 영역의 너비를 나타내기 때문에 해당 요소에 적용한 패딩이나 테두리 크기는 따로 계산해야 한다.

이런경우 box-sizing 속성을 사용하면 콘텐츠 영역의 너비에 패딩과 테두리 크기까지 합쳐서 width 속성을 지정할 수 있다.

기본형 box-sizing: content-box ㅣ border-box 

content-box 는 기본값이며 width 속성 지정시 패딩, 테두리를 제외한 오직 컨텐츠만의 크기를 나타낸다.

border-box 는 지정한 width 속성 값 안에 패딩, 테두리 크기를 포함한다.

box-sizing: content-box; => 1000px + padding 20px + border3px => 화면에 출력되는 width => 1023px

box-sizing: border-box; => 1000px + padding 20px+ border3px => 화면에 출력되는 width => 1000px (977px + 20px + 3px)

화면상에 컨텐츠를 배치하려면 박스 모델의 너비 값을 정확히 계산해야하는데 만약 width 값을 계산하기 어렵다면 box-sizing: border-box;로 지정하여 박스 모델 너비를 조절하기 쉽도록 하는것도 좋은 방법이다.