[css] box-sizing

box-sizing

box-sizing은 css에서 요소의 크기를 계산하는 방법을 결정하는 속성이다.

두가지 값이 사용된다.

• content-box
• border-box

1. content-box (default)

• 이 값이 설정되면, 요소의 너비와 높이는 오로지 콘텐츠 영역만을 포함하여 계산된다.
• 패딩(padding)과 테두리(border)는 총 요소의 크기에 포함되지 않는다. 따라서 요소의 실제크기는 설정된 너비와 높이에 테두리의 크기를 더한 값이 된다.
  - 이 경우에 의도하지 않게 뷰포트보다 내가 만든 페이지가 넓어지는 경우가 생기곤한다.
• 예: width: 300px; padding: 10px; border: 5px solid black; 설정 시, 요소의 총 너비는 330px (300 + 10 + 10 + 5 + 5)이 된다.

2. border-box

• 이 값이 설정되면, 요소의 너비와 높이는 컨텐츠, 패딩, 그리고 테두리를 모두 포함하여 계산된다.
• 레이아웃과 디자인을 조절할 때, 예측 가능한 박스모델이라는 점에서 이점이 있다.
• 예: width: 300px; padding: 10px; border: 5px solid black; 설정 시, 요소의 총 너비는 여전히 300px입니다. 콘텐츠의 너비는 270px (300 - 10 - 10 - 5 - 5)이 된다.