box-sizing

box-sizing은 박스의 크기를 어떻게 계산할지 정하는 css 속성이다. width, height 속성의 대상영역을 변경할 수 있다.

box-model

HTML에서 모든 요소들은 box 모양으로 구성되며, box model은 HTML 요소가 웹페이지에서 차지하는 영역을 정의한 것이다.
박스모델은 HTML 요소를 content, padding, border, margin으로 구분한다.

• content : 요소의 텍스트나 이미지가 들어있는 박스의 실질적인 내용 부분.
• padding : content와 border 사이의 내부 여백. 이미지는 padding 영역까지 적용된다.
• border : content와 padding을 감싸는 테두리.
• margin : border 바깥에 있는 외부 여백.

box-sizing: content-box | border-box 

• content-box (defulat) : 콘텐츠 영역만으로 크기를 정한다.
  content = width
  

• border-box : 테두리를 포함하여 크기를 정한다.
  content + padding + border = width
  

box-sizing: border-box를 지정하지 않을 경우, width와 height는 content만을 포함시키기 때문에 주의할 것.
box-sizing: border-box를 지정하면 margin을 제외한 박스모델 전체를 width, height에 포함시킬 수 있기 때문에 CSS Layout을 더 직관적으로 사용할 수 있게된다.