CSS box-sizing 속성은 요소의 너비와 높이를 계산하는 방법을 지정합니다. 기본적으로 브라우저는 테두리와 안쪽 여백(padding)을 포함하여 요소의 크기를 계산합니다. 그러나 box-sizing 속성을 사용하면, 테두리와 안쪽 여백을 포함할지 여부를 지정할 수 있습니다.

box-sizing: content-box

.box {
  box-sizing: content-box;
}

이 속성값은 기본값이며, 요소의 크기는 컨텐츠와 바깥 여백(margin)을 포함합니다. 테두리와 안쪽 여백은 포함되지 않습니다.

box-sizing: border-box

.box {
  box-sizing: border-box;
}

border-box의 경우, 요소의 크기는 컨텐츠와 테두리, 안쪽 여백을 모두 포함합니다.

box-sizing은 레이아웃을 구성하거나 반응형 디자인에서 유용하게 사용할 수 있는 속성입니다. 특히, 요소에 여백이나 테두리를 추가할 때 크기 계산을 간단하게 만들어주는 장점이 있습니다.

자세한 내용은 MDN web docs에서 확인할 수 있습니다.