box-sizing

박스 레이아웃에서 width의 의미

div에 주어진 width 값은 오직 content 영역에만 영향 줄 수 있다. (padding안쪽 영역)
padding, border값이 늘어나면 실제 div 사이즈가 설정한 값보다 커질 수 있으므로 의도한 대로 레이아웃이 안 나올 수 있다.

box-sizing

박스의 폭 지정 기준을 바꿔주고 싶을 때 box-sizing 속성을 사용한다.

.box {
  box-sizing : border-box; /*박스의 폭은 border까지 포함입니다*/
  box-sizing : content-box; /*박스의 폭은 padding 안쪽입니다*/
}