border-box

CSS box-sizing 속성: 박스 모델 크기 계산 방식 설정
box-sizing 속성은 CSS에서 요소의 너비와 높이를 계산하는 방식을 지정합니다. 즉, width 및 height 속성 값에 padding, border, margin 값을 포함할지 여부를 결정합니다.

속성 값
content-box (기본값):

width 및 height 속성은 콘텐츠 영역의 크기만 나타냅니다.
padding, border, margin은 요소의 전체 크기에 추가되어 계산됩니다.
즉, width: 100px; padding: 10px; border: 5px;인 요소의 실제 너비는 120px (100px + 10px * 2 + 5px * 2)가 됩니다.
border-box:

width 및 height 속성은 콘텐츠 영역, padding, border를 모두 포함한 전체 크기를 나타냅니다.
margin은 여전히 요소의 전체 크기에 추가되어 계산됩니다.
즉, width: 100px; padding: 10px; border: 5px;인 요소의 실제 너비는 100px으로 유지됩니다. padding과 border는 콘텐츠 영역 내부에 포함되어 표시됩니다.

사용예시

```CSS

.box {
width: 200px;
height: 100px;
padding: 20px;
border: 10px solid black;
box-sizing: border-box; /* 또는 content-box */
}```

box-sizing: content-box인 경우:

콘텐츠 영역: 200px x 100px
padding: 상하좌우 각 20px씩 추가
border: 상하좌우 각 10px씩 추가
전체 크기: 280px x 160px

box-sizing: border-box인 경우:

전체 크기: 200px x 100px
콘텐츠 영역: padding과 border를 제외한 나머지 공간 (160px x 60px)

언제 border-box를 사용하는 것이 좋을까요?

레이아웃을 구성할 때 요소의 전체 크기를 고정하고 싶을 때
padding이나 border를 추가해도 요소의 전체 크기가 변경되지 않기를 원할 때
반응형 디자인에서 요소의 크기를 쉽게 관리하고 싶을 때