box-sizing

box-sizing

<h1 class="hi"> hi </h1>

<h1 class="hello"> hello </h1>

.hi { width:150px; border 15px;}

.hello{ width:150px; border 1px;}

가로 넓이가 같음에도 불구하고 둘의 크기는 달라 보인다.

왜냐하면 처음 CSS을 만들 때 width와 hight는 컨텐츠의 크기, 즉 박스를 의미하는 것으로 지정을 해놨기 때문이다.

그래서 border값을 상관하지 않고 박스의 크기를 지정하기 때문에 같은 크기의 상자를 만들고 싶을 때 참 난감한 상황이 벌어진다.

그래서 맨 처음 설정하는 것이

 *{ box-sizing: border-box;}

전 영역의 컨텐츠에 (*) 박스 사이즈인 width와 hight의 기준은 border로 한다는 것을 말해주는 것이다. 원래는 컨텐츠 사이즈 이기 때문에 디폴트를 이렇게 바꿔주는 것이 좋다.