[CSS] 박스모델(box model)

박스 모델(box model)

모든 HTML 요소는 박스(box) 모양으로 구성되며, 이것을 박스 모델(box model)이라고 부릅니다.

박스 모델은 HTML 요소를 패딩(padding), 테두리(border), 마진(margin), 그리고 내용(content)으로 구분합니다.

1. 내용(content) : 텍스트나 이미지가 들어있는 박스의 실질적인 내용 부분입니다.

2. 패딩(padding) : 내용과 테두리 사이의 간격입니다. 패딩은 눈에 보이지 않습니다.

3. 테두리(border) : 내용와 패딩 주변을 감싸는 테두리입니다.

4. 마진(margin) : 테두리와 이웃하는 요소 사이의 간격입니다. 마진은 눈에 보이지 않습니다.

 

박스를 벗어나는 컨텐츠 처리

박스의 height 속성에 콘텐츠가 차지하는 공간보다 작은 값을 지정하세요. 컨텐츠가 박스 바깥으로 빠져나오나요? 아니면 박스에 맞게 가려지나요?

p { height: 40px; }

[코드] p태그의 height 속성에 콘텐츠가 차지하는 높이보다 작은 값을 할당합니다.

박스 크기보다 콘텐츠 크기가 더 큰 경우에는 콘텐츠가 박스 바깥으로 빠져나옵니다. 그러나 이런 상황을 원하는 사람은 거의 없을 겁니다. 이렇게 콘텐츠가 박스를 뚫고 나가는 경우에는 박스 크기에 맞게 콘텐츠를 더이상 표시하지 않거나, 혹은 박스 안에 스크롤을 추가하여 콘텐츠를 확인할 수 있게 만듭니다.

 

[코드] p태그에 overflow 속성을 지정해 박스보다 큰 콘텐츠에는 스크롤을 표시합니다.

변경사항은 codepen에서 확인할 수 있습니다.

overflow 속성의 auto 값은, 콘텐츠가 넘치는 경우 스크롤을 생성하도록 합니다. 다른 경우에는 넘치는 콘텐츠의 내용을 보여주고 싶지 않을 수 있습니다. 이 때에는 overflow 속성에 hidden 값을 사용합니다. overflow 속성은 x축과 y축을 지정해 가로 방향으로 스크롤하거나 세로 방향으로 스크롤 할 수 있게끔 지정할 수 있습니다. overflow-x 속성과 overflow-y 속성을 이용하면 두 방향을 모두 지정할 수 있습니다.

 

박스 크기 측정 기준

박스 크기를 측정하는 기준은 매우 중요합니다. 예제를 보며 함께 살펴봅니다.

<div id="container">
  <div id="inner"> 
    안쪽 box
  </div> 
</div>

[코드] html 예시

#container { 
  width: 300px; 
  padding: 10px; 
  background-color: yellow;
  border: 2px solid red; 
} 

#inner { 
  width: 100%; 
  height: 200px; 
  border: 2px solid green; 
  background-color: lightgreen; 
  padding: 30px; 
}

[코드] CSS 예시

변경사항은 codepen에서 확인할 수 있습니다.

혹시 어떤 부분이 문제인지 알겠나요? id가 container인 박스의 width 속성에 300px을 지정했습니다. 그러나 개발자도구로 확인한 해당 요소의 width 값은 324px 입니다. CSS에서 지정한 두 요소에 대해 아래와 같이 확인할 수 있습니다.

• #container의 너비는 300px이 아니라, 324px입니다. 브라우저는 다음과 같은 계산을 실행합니다.
  300px (콘텐츠 영역) + 10px (padding-left) + 10px (padding-right) + 2px (border-left) + 2px (border-right)
• #inner의 100%는 300px이 아니라, 364px입니다. 브라우저는 다음과 같은 계산을 실행합니다.
  300px (300px의 100%) + 30px (padding-left) + 30px (padding-right) + 2px (border-left) + 2px (border-right)

처음 레이아웃 디자인을 할 때 가장 많이하는 실수가 있습니다. 박스에 적용할 여백을 고려하지 않고 박스의 크기를 디자인하는 경우입니다. 박스의 크기를 디자인할 때 콘텐츠 영역만 고려하면, 개발 과정에서 처음 생각한 레이아웃을 벗어날 수 있습니다. 여백을 고려하지 않은 계산 방식은 레이아웃 디자인을 어렵게 만듭니다.

레이아웃 디자인을 조금 더 쉽게하는 방법이 있습니다. 여백과 테두리 두께를 포함한 박스 계산 법입니다. *은 모든 요소를 선택하는 셀렉터입니다. 모든 요소를 선택해 box-sizing 속성을 추가하고, border-box라는 값을 추가합니다.

* { 
  box-sizing: border-box; 
}

[코드] 모든 요소에 'box-sizing: border-box'를 추가합니다.

변경사항은 codepen에서 확인할 수 있습니다.

이렇게 모든 요소에 box-sizing: border-box를 적용하면, 모든 박스에서 여백과 테두리를 포함한 크기로 계산됩니다. 일반적으로 box-sizing은 HTML 문서 전체에 적용합니다. box-sizing을 일부 요소에만 적용하는 경우, 혼란을 가중시킬 수 있습니다. 앞으로 레이아웃과 관련된 이야기를 할 때에는 border-box 계산법을 기준으로 이야기합니다. 박스 크기 측정 기준 두가지를 항상 염두해주세요.

* content-box는 박스의 크기를 측정하는 기본값입니다. 그러나 대부분의 레이아웃 디자인에서 여백과 테두리를 포함하는 박스 크기 계산법인 border-box를 권장합니다.

참고출처:
 http://tcpschool.com/css/css_boxmodel_boxmodel

참고하면 좋은 글:
https://dasima.xyz/css-box-sizing-content-box-vs-border-box/