box-sizing: border-box;

디자인 시안에서는 컴포넌트의 가로값만을 알 수 있는데 이를 width 값으로 설정하려면 padding과 border값을 더해서 설정해 주어야 우리가 생각한대로 표현이 된다. 이러한 덧셈 과정이 불편하기도 하고 자칫 실수라도 하면 레이아웃의 참사를 불러오므로 css에서 다음과 같은 코드를 통하여 보이는대로 출력될 수 있도록 설정할 수 있다.

* {
box-sizing: border-box;
}

특히, 앞에 특정 태그나 선택자가 아닌 '*'을 쓰면 문서 안의 모든 태그에 자동 적용시킬 수 있다.