[CSS] Box Model과 Box Sizing

위에 보이는 CSS 프로퍼티들을 많이 보셨겠지만, 위 프로퍼티들이 어떤 요소에 영향을 주는지 또 사용하면서 원하던 크기대로 잡히지 않는 경우가 발생하기도 하는데 왜 그런지 살펴보도록 하겠습니다.

이 부분을 이해하기 위해선 먼저 박스 모델(box model)이라는 개념을 알아야 합니다.

박스 모델(Box Model)이란?

HTML의 모든 요소들은 BOX 모양으로 구성되어 있는데, 이것을 박스 모델(box model)이라고 부릅니다. 박스 모델은 안쪽부터 content, padding, border, margin으로 구분합니다.

개발자 도구 -> Computed

• content
  • 텍스트, 이미지, Input, div 요소 등 모든 콘텐츠
  • 가로는 width, 세로는 height로 표현
• padding - content를 둘러싼 공간(border와 content 사이의 공간)
• border - content와 padding을 둘러싼 선
• margin - border를 둘러싼 공간으로 요소와 요소 사이의 간격을 나타냄

 

직접 차례대로 결과물을 보면서 이해해보죠

See the Pen Untitled by 김승진 (@dfuqlyof-the-animator) on CodePen.

Content의 width, height 적용

먼저 content의 box 클래스를 width 500, height 300으로 사이즈를 정해준 것이 잘 보입니다.

그다음으로padding을 조절해볼까요?

See the Pen Untitled by 김승진 (@dfuqlyof-the-animator) on CodePen.

padding 20px 적용

border와 content사이인 padding이 20px 잘 잡힌 것이 보입니다.

그다음으로 border를 조절해볼까요?

See the Pen Untitled by 김승진 (@dfuqlyof-the-animator) on CodePen.

border 5px 적용

content와 padding을 둘러싼 선인 border의 5px가 잘 적용된 것이 보입니다.

마지막으로 border를 둘러싼 공간으로 요소와 요소 사이의 간격을 나타내는 margin을 조절해볼까요?

See the Pen Untitled by 김승진 (@dfuqlyof-the-animator) on CodePen.

margin 30px 적용

margin도 30px로 잘 잡힌 것이 보입니다.

💡 padding, border, margin 속기형(shorhand) Tip

연속적으로 사용할 경우 시계방향으로 생각
top → right → bottom → left
 
ex)
1. padding: 10px;
  * 1개의 경우 top, right, bottom, left 전부 10px
2. padding: 10px, 5px;
  * 2개일 경우 10px는 top, bottom, 5px는 left, right
3. padding: 10px, 5px, 8px;
  * 3개의 경우 10px는 top, 5px는 left,right 둘다, 8px는 bottom        
4. padding: 10px, 7px, 12px, 5px;
  * 4개의 경우 10px는 top, 7px는 right, 12px는 bottom, 5px는 left

 

이제 박스 모델 안의 요소들에 대해 감이 오시나요? 박스 모델은 요소들을 스타일링하고 크기를 잡고 영역을 잡는 데 사용되는 기본적인 속성들입니다.

하지만!

박스 모델을 몰랐다면 아래와 같은 width: 100px, height: 100px Content를 만들고 싶은데 margin, padding의 사이즈도 추가되어 원하는 사이즈가 나오지 않게 되는 현상이 벌어졌겠죠🤯

출처: http://www.tcpschool.com/css/css_boxmodel_boxmodel

 

왜 이런 현상은 Box Sizing과 관련되어 있습니다.

 

Box Sizing이란?

박스의 사이즈를 잡는 방법이라고 생각하면 됩니다.

box-sizing속성이 존재하며 방법으로는 content-box와 border-box가 존재합니다.

content-box

• 모든 요소는 기본적으로 content-box 설정
• content-box는 우리가 박스 모델에서 배웠던 content의 영역을 기준으로 크기를 정하는 방법

See the Pen Untitled by 김승진 (@dfuqlyof-the-animator) on CodePen.

width: 300px, height: 100px로 설정했을 때 content영역만 잡히며 padding, margin에 의해 원하는 크기를 다시 계산해야 되거나 content영역 사이즈를 줄이는 방법이 필요하다.

 

border-box

• 테두리(border)를 기준으로 크기를 정하는 방법

See the Pen Untitled by 김승진 (@dfuqlyof-the-animator) on CodePen.

우리가 보통 사이즈를 생각해보면 content영역 사이즈가 아닌 border까지 포함한 요소를 더 자연스럽게 생각할 수 있습니다.

그렇기 때문에 width: 300px, height: 100px부분이 단순 content의 사이즈가 아닌 content+padding+border사이즈를 포함한 전체 사이즈라고 확인할 수 있습니다.👍🏻

그렇기 때문에 많은 현업에서는 우리의 계산하기 쉽게 기준을 잡을 수 있는 아래와 같은 코드를 CSS에 선언을 해놓고 사용하기도 한답니다.

이 부분을 이해하기 위해 여러 가지 맥락이 필요했지만, 박스 모델의 개념과 box-sizing 속성을 이용해서 좀 더 편하게 레이아웃을 하는 방법에 대해 알아보는 시간이었길 바라겠습니다.

 

참고자료

• http://www.tcpschool.com/css/css_boxmodel_boxmodel