box-sizing
원래 우리가 지정하는 width값과 height값은 width+padding+border 그리고 height+padding+border 이렇게 각각을 포함한 값이다.
따라서, 우리가 지정한 width와 height의 값을 받은 elements의 모습은 padding과 border값을 포함하기에 사실상 우리가 지정한 값보다 더 크게 나온다.
.div1 {
width: 300px;
height: 100px;
border: 1px solid blue;
}
.div2 {
width: 300px;
height: 100px;
padding: 50px;
border: 1px solid red;
}.div2는 padding 50px을 추가했기에 화면상에 보이는 직사각형이 div1보다 더 크게 보일 것이다.
이렇게 된다면, 예를 들어 디자인 시안에는 컴포넌트의 가로값만을 알 수 있는데, 디자인만 보고 값을 지정하려면 padding의 값을 생각하며 최종적으로 width을 계산하여 적용해야 한다는 문제점이 생긴다.
이런 문제를 해결할 것이
* {
box-sizing : border-box;
}
이 CSS 프로퍼티를 추가한다면,
padding and border are included in the width and height! padding 값과 border 값을 포함시켜 width와 height가 보이게 한다.
즉, 보이는대로 width와 height 값을 주게 되고, 그 후에 그 안 쪽으로 padding 값을 준다고 생각하면 된다. 거의 대부분의 web page에 이 프로퍼티가 적용되며, 일일이 태그마다 적용하기에도 번거롭기때문에 * selector을 이용해 모든 태그에 적용시킨다.
motivation⚡️