[CSS] box-sizing

box-sizing

element의 크기를 지정할 때, 그 element가 padding이나 border나 이러한 값들을 가지고 있는 경우에 지정한 사이즈가 예상한 것과 다른 경우가 생긴다.

 

어떤 element의 크기를 예측하기 쉽도록 하는 방법으로써 box-sizing 이라는 속성에 대해서 알아보자.

 

같은 element에 각각 다른 border 크기를 주었을 때 두개의 element의 크기는 같아보인다.

 

 

그리고 content에 width 값을 150px로 지정을 했을 때 두 개의 크기는 다르게 느껴진다. 

 

그 이유는 보통 element의 크기라고 했을 때 element 테두리의 바깥쪽 크기라고 생각하기 쉽지만 CSS 초창기에는 elememt의 content영역의 크기를 border와 padding이 빠진 width 값으로 지정하기로 했기 때문에 두 개의 영역의 content 크기는 같은 것을 볼 수 있다.

 

결과적으로 border를 사용하면서 어떤 element의 크기를 예측하기가 대단히 까다로워지는 상황이 발생한다. 이러한 문제를 해결하기 위해서 CSS에 등장한 속성이 바로 box-sizong이라고 하는 속성이다.

 

 

 

이 속성의 기본 값은 content-box로 즉, content의 크기만큼 width와 heigt값이 지정된다는 것이다.

 

 

 

 또 다른 속성 border-box로 바꾸게 되면 두 개의 element의 boreder의 두께가 다름에도 불구하고 경계의 크기가 같아진다. 이것이 조금 더 이해하기 쉽고 예측 가능한 결과라는 것이다.

 

 

 

HTML의 모든 태그라는 의미의 * 선택자에 `box-sizing: border-box` 속성을 지정하면 모든 element가 border의 크기를 width와 heigt의 값으로 사용할 수 있게 해서 좀 더 수월하게 코딩하는 방법을 사용할 수 있다.

 

 

 

참고 : https://www.opentutorials.org/course/2418/13405