CSS box-sizing 속성 : border-box을 사용하는 이유?

box-sizing 속성은 CSS에서 박스 모델의 크기 계산 방법을 지정하는 데 사용됩니다.
박스 모델의 크기는 페이지 레이아웃을 구성하고 디자인하는 데 중요합니다.
웹 페이지의 요소들은 박스 모델을 기반으로 합니다.
각 요소는 내용 영역, 안쪽 여백, 테두리, 외부 여백 등의 요소들로 이루어진 박스로서, 이러한 속성들을 통해 레이아웃을 구성하게 됩니다.
요소들을 어디에 배치하고 어떤 크기로 표시할지 결정하는 데에 박스 모델의 크기가 중요합니다.

---

박스 모델을 구성하는 세 가지 중요한 요소

padding : 요소의 내용(content)과 테두리(border) 사이의 여백을 지정합니다.
border : 요소의 내용을 감싸는 외부 테두리를 정의합니다.
margin : 요소의 테두리(border)와 인접한 요소 사이의 공간을 지정합니다.

box model의 전체 크기는 아래의 식으로 구할 수 있습니다.
콘텐츠 크기 + padding 값 + border 값 + margin 값 = 요소의 크기

---

box-sizing 속성

box-sizing 속성에는 두 가지 값이 있습니다.

content-box :

이 값은 기본 값입니다.  
설정한 width와 height 값이 요소 내부의 콘텐츠(내용) 크기가 됩니다.
따라서 요소의 크기는 padding 값, border 값, margin 값을 추가적으로 고려해야만 요소의 전체 크기를 알 수 있습니다.

.content-box {
    width: 200px;
    height: 100px;
    padding: 20px;
    border: 2px solid black;
    margin: 10px;
    box-sizing: content-box;
}

콘텐츠 크기: 200px (width) x 100px (height)
패딩(padding): 20px (상하좌우)
테두리(border): 2px (테두리 두께)
외부 여백(margin): 10px (상하좌우)
따라서 전체 요소의 크기는 다음과 같이 됩니다:
200px (콘텐츠) + 40px (패딩) + 4px (테두리) + 20px (외부 여백) = 264px x 144px

border-box :

요소의 크기가 내용 영역, 안쪽 여백 및 테두리를 포함합니다.
따라서 padding, border, margin 값을 추가로 고려하지 않아도 됩니다.
설정한 width와 height 값이 안쪽 여백과 테두리까지 포함하기때문에 설정한 width와 height 값이 곧 요소의 크기가 됩니다.
border-box는 테두리와 안쪽 여백을 포함하여 요소의 크기를 계산하므로, 요소의 크기를 더욱 예측 가능하게 만듭니다.

.border-box {
    width: 200px;
    height: 100px;
    padding: 20px;
    border: 2px solid black;
    margin: 10px;
    box-sizing: border-box;
}
콘텐츠 크기: 200px (width) x 100px (height)
패딩(padding): 20px (상하좌우)
테두리(border): 2px (테두리 두께)
외부 여백(margin): 10px (상하좌우)
box-sizing: border-box;를 사용하므로, 전체 요소의 크기는 설정한 width와 height 값으로 결정됩니다:
200px (width) x 100px (height) 이 크기 안에 콘텐츠 크기, padding 값, border 값, margin 값이 전부 들어가 있습니다.