CSS Box Model

Front End 개발 처음 하다보면 이 Box Model 때문에 원하는대로 크기를 조절 못하는 경우가 많다. 나 역시 그랬다.
Element를 감싸고 있는 이 Box Model를 이해하면 제멋대로 동작하던 CSS를 이해하게 될것이다.

 

개념

Element를 감싸고 있는 걸 Box Model 이라고 정의하고 Content > Padding > Border > Margin 으로 구성된다.
Box Model를 살펴 보자

 

box-sizing

box-sizing를 이용해서 Box Model를 확인해보자
box-sizing 속성은 element가 어떻게 width, height 가 계산되는지 설정할수 있게 한다.
box-sizings는 content-size와 border-size로 나뉘며 기본값은 content-size 이다.

 

content-size
기본 값은 content-size 이므로 box1의 요소는 border, padding, margin이 추가되어도 content size는 100x100이 유지된다.
그렇기에 border, padding margin 값들이 추가되어 해당 요소가 더 커졌다.

 

border-size
box2는 border-size이므로 border 기준으로 100x100이 하므로, content 영역이 줄어든다.

 

 

See the Pen Untitled by Daewoong Kim (@daewoong-kim) on CodePen.

 

 

참고
https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing