[CSS] Css Box-Model과 box-sizing의 border-box 속성

지난 시간에 우리는 box-model의 크기 속성을 구하는 작업을 했었다.

하지만

지난 시간에도 말 했듯이 박스 모델링을 적용한 후 반응형 웹을 만들기 위해 크기의 단위를 px가 아닌 % 단위로 적용했다고 가정해보자.

 

그럼 아래의 Element의 속성 값 단위는 px가 아닌 %가 되어야 한다.

그럼 정말 정말 정말 복잡해진다.

 

힘들게 우리는 border, margin, padding 값을 구해서 (

물론 그렇게 힘들진 않지만

)

width와 height의 계산식에 대입하여 구했지만 이 계산식이 %가 들어가면 단순 + 계산으로 힘들다는 것을 알 수 있다.

+ 연산으로 이루어진 BOX 계산식

이러한 문제점을 해결하기 위한 방법이있다.

 

바로 Box-sizing이다.

box-sizing

위의 절대 단위에서 상대 단위로 변경하는 문제점을 해결하기 위해 우리는 box-sizing에 대해서 알아야 한다.

 

box-sizing 속성의 기본 Default는 content-box이다.

 

이 content-box을 border-box로 변경해주면, width 속성값은 content영역 뿐 아니라 padding과 border영역까지 포함하게 된다.

이게 무슨 소리냐?

아래의 그림과 같이 된다.

첫 번째 그림은 box-sizing의 기본 속성인 content-box이고 두 번째 그림은 border-box이다.

 

그래서 결국 box-sizing: content-box의 width에서 padding과 border을 빼면 해당 영역의 content 값이 나오게 된다는 것이다.