box-sizing

첫 번째는 가로가 300px이 맞는데,
두 번째 박스는 확인해보면 가로가 300px가 아니다.

양쪽으로 테두리 10px이 추가되었고, padding이 50px 씩 추가 되어서 가로가 420px이 되었다.

10+10+50+50+300 = 420

디자인 시안에는 컴포넌트의 가로값만을 알 수 있는데,
디자인만 보고 코딩하려면 머리속으로 padding을 계산해가며 최종적으로 width가 얼마인지 안 후에 css를 적용하는 일이 벌어지게 된다.

눈으로 보이는 그 너비가,
개발자가 코딩하는 그 값이여야 코딩과 머리속으로 생각하는 로직이 같아진다.

수 많은 개발자가 이러한 특성이 불편하다는 것을 깨닫고 새로운 CSS 프로퍼티가 나옴.

.new {
  box-sizing: border-box;
}

보이는대로 width 값을 주고,
그 후에 그 안 쪽으로 padding을 주는 것이 생각하기에 쉽다.

그래서 거의 대부분의 웹페이지에 box-sizing 프로퍼티를 기본적으로 적용.

또한, 모든 태그에 이 프로퍼티가 적용되어야 하는데 일일히 태그마다 적용하기에는 코드가 길어지겠죠.
아래와 같은 *"" selector 로 모든 태그에 적용**할 수 있다.