Css box-sizing(width값 지정)

width: 300px;
padding: 50px;
border: 10px solid red;

위와 같이 css값을 설정해줬을 때 화면에서는 width(가로)가 300크기 만큼 배경색이 입혀지는 것이 아니라 width, padding, border값을 합친 420크기 만큼 배경색이 입혀진다.

(ex)
width: 300px
padding: 오른쪽 50px 왼쪽 50px
border: 오른쪽 10px 왼쪽 10px
총 420px 가로 길이 만큼 빨간색 배경색이 입혀짐

box-sizing: border-box;를 사용하면 원래 지정된 width(가로)크기보다 커지지 않고 현재 300px안에서 width, padding, border값 들이 나눠진다.

(ex)
width: 180px;
padding: 오른쪽 50px 왼쪽 50px
border: 오른쪽 10px 왼쪽 10px
총 300px 가로 길이 만큼 배경색이 입혀짐