box-sizing

디자인 시안에는 컴포넌트의 가로값만을 알 수 있는데,
디자인만 보고 코딩하려면 머리속으로 padding을 계산해가며 최종적으로 width가 얼마인지 안 후에 css를 적용하는 일이 벌어지게 됨.
수 많은 개발자가 이러한 특성이 불편하다는 것을 깨닫고 새로운 CSS 프로퍼티를 만들었음

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

이와 같이 보이는대로 width 값을 주고, 그 후에 그 안 쪽으로 padding을 주는 것이 생각하기에 쉬움. ( 정해진 크기 안에서 width, border, padding값을 주는 게 코딩 하기 편함. )
거의 대부분의 웹페이지에 box-sizing 프로퍼티를 기본적으로 적용함. 모든 태그에 이 프로퍼티가 적용되어야 하는데 일일히 태그마다 적용하기에는 코드가 길어짐
아래와 같은 "*" selector로 모든 태그에 적용할 수 있음

* {
  box-sizing: border-box;
}

지정한 width 및 height크기가 모든 box-model의 합계로 지정됨.
전체 크기 = border-box = content + border + padding + margin
컨텐츠 크기 = border-box - border - padding - margin

개인 프로젝트나, 실무를 할 때는 꼭 적용해야하는 프로퍼티