CSS ' box-sizing: border-box; ' 의미, padding과 border로 인한 width 고민 끝..

CSS에서 box-sizing: border-box; 이것의 용법은 padding 값과 border 값에 영향을 받지 않고, 의도한 것과 동일한 width 값을 출력하고자 할 때 사용한다.

무슨 말이냐면, 가량 width 값이 100px인 div를 구현하고자 할 때..

예를 들어, 레이아웃의 폭이 100px이라고 하자. 여기에 딱 맞춰 div의 width 값을 100px로 정해줬다.

그런데, 사정이 생겨 좌우로 padding 값을 주게 되었다.

이렇게 되자 문제가 생겨 버렸다.

div의 전체 폭이 레이아웃의 폭을 넘어버린 것이다.

여기에 설상가상으로 border 값까지 주게 되면 그 폭은 더 커져 버린다.

이렇게 난감한 경우를 해결할 방법으로 나온 것이 ' box-sizing: border-box; '이라고 한다.

' box-sizing: border-box; '을 넣어주면 padding과 border에 영향을 받지 않고 의도했던 width 값을 출력할 수 있게 된다.