css box-sizing 속성

box-sizing은 CSS에서 요소의 크기를 어떻게 계산할지를 결정하는 속성
레이아웃을 스타일링할 때 예상치 못한 크기(너비, 높이) 변화가 발생하곤 함 그때 도움이 됨
content-box / border-box 두가지 옵션이 있음

1. box-sizing: content-box(기본 값)
   content-box는 box-sizing속성의 기본 값으로, 적용 시 요소의 width와 height 값이 내용 영역만의 크기를 나타냄
   즉 width와 height는 요소의 실제 콘텐츠 크기만을 정의하고, 그 안에 추가되는 padding과 border는 크기에 포함되지 않음
   ex - width: 200px로 설정된 요소에 padding: 20px과 border: 2px solid black이 있으면, 요소의 실제 너비는 200px + 20px x 2 (padding) + 2px x 2 (border)로 총 244px이 됨
   이 방식은 padding 과 border가 요소의 총 크기에 영향을 미친다는 점에서 때때로 예측하기 어려운 결과를 초래

2. box-sizing: border-box
   width와 height값이 내용영역, padding, border를 모두 포함하는 크기를 나타냄
   즉, width와 height는 실제 콘텐츠의 크기뿐만 아니라 패딩과 테두리까지 포함된 크기로 설정됨
   ex - width:200px로 설정된 요소에 padding:20px과 border:2px solid black이 있으면, 콘텐츠의 크기는 자동으로 200px - 20px x 2 - 2px x 2로 계산되어, 실제 콘텐츠 영역의 크기는 150px이 됨
   이 방식은 직관적으로 레이아웃의 크기를 예측하기 용이함