css - box-sizing : border box 설정하는 이유

css를 하다가 box-sizing을 안해줘서 애를 먹었다.. 

box-sizing : border box로 css를 초기설정 하는 이유를 알아보겠다.

box-sizing: border-box;

box-sizing 속성은 요소의 전체 너비와 높이를 어떻게 계산하는지 설정한다.

요소마다 너비와 높이가 있고, 이를 변경하거나 혹은 padding 값 등을 추가할 경우에 어떻게 이 요소에 대해서 너비와 높이에 적용되는지 여부를 설정하는 것을 의미한다.

box-sizing: border-box;에 border나 padding을 추가하면 해당 box의 크기는 그만큼 더 커지지 않고 사용자가 지정한 너비나 높이만큼 길이에 맞추게 된다. border값이나 padding 값는 지정한  width값이나 height값에 포함이 된다는 것이다!!

나는 이 친구를 알기 전에는, 컴퓨터가 알아서 맞춰주겠지.. 당연한건 줄 알았다!!

그러므로 아주 이쁜 웹서비스를 위해서는!! 꼭 css 초기설정에 포함하자!