8.box-sizing

1. box-sizing

• box-sizing : 각 요소마다 너비, 높이... 크기가 있다. 이를 꾸며주기 위해서는 padding, width를 사용하는데 계산하기가 힘들다.
  이러한 특성이 불편하다는 것을 깨닫고 새로운 CSS 프로퍼티를 만들었다.

• 요소의 너비와 높이를 계산하는 방법

• CSS 박스 모델의 기본값에서, 지정한 너비와 높이는 요소의 콘텐츠 박스 크기에만 적용.
  따라서 크기를 설정할 때, 원하는 크기를 얻으려면 테두리나 안쪽 여백을 고려해야 합니다.
  box-sizing 속성을 사용해 이 방식을 바꿀 수 있다.

• 형태 : .new { box-sizing: 값; }

2. box-sizing 속성 종류

• content-box | border-box | initial | inherit

1) content-box

• 콘텐트 영역을 기준으로 크기를 정합니다.
  2) border-box
• 테두리를 기준으로 크기를 정합니다.
  3) initial
• 기본값으로 설정합니다.
  4) inherit
• 부모 요소의 속성값을 상속받습니다.