Box Model

CSS의 Box Model은 웹 페이지의 요소를 다루는 기본 개념으로, 모든 HTML 요소를 박스로 처리하는 방법이다. 이 박스는 네 가지 주요 영역으로 나뉜다.

1. Content (내용)
   • 요소 내부의 실제 콘텐츠가 위치하는 영역이다.
   • 텍스트, 이미지, 입력 필드 등이 여기에 포함된다.
   • 이 영역의 크기는 width와 height 속성으로 설정한다.

   div {
     width: 200px;
     height: 100px;
   }

2. Padding (안쪽 여백)
   • 콘텐츠와 요소의 경계선(Border) 사이의 공간이다.
   • 요소 내부에 여유를 주어 콘텐츠와 경계선이 겹치지 않게 해야 한다.
   • 네 면 각각 따로 설정 가능:
     • padding-top, padding-right, padding-bottom, padding-left
   • 모든 면에 같은 값을 적용하려면 padding 단축 속성을 사용한다.
   • 주의: Padding은 요소 내부의 크기를 넓히는 개념이다.

     div {
       padding: 10px; /* 모든 방향에 10px */
     }

3. Border (테두리)
   • 요소를 감싸는 경계선이다.
   • 두께, 스타일, 색상을 설정할 수 있다.
     • 두께: border-width (예: 1px, 3px)
     • 스타일: border-style (예: solid, dashed, none)
     • 색상: border-color
   • 단축 속성으로 한 번에 설정 가능하다.

     div {
       border: 2px solid #000;
     }

4. Margin (바깥 여백)
   • 요소와 다른 요소 또는 컨테이너 사이의 외부 공간이다.
   • 네 면 각각 따로 설정 가능:
     • margin-top, margin-right, margin-bottom, margin-left
   • 단축 속성을 사용해 간단히 설정 가능.
   • 주의: 마진은 요소의 크기에 포함되지 않는 외부 공간이며, 두 마진이 겹칠 경우 큰 값만 적용되는 Margin Collapse 현상이 발생한다.

div {
  margin: 20px; /* 모든 방향에 20px */
}

---

요소 크기 계산 방식

1. 기본 크기 계산

요소의 크기는 기본적으로 다음과 같이 계산된다

요소의 총 너비 = content + padding (좌우) + border (좌우) + margin (좌우)
요소의 총 높이 = content + padding (위아래) + border (위아래) + margin (위아래)

예를 들어,

div {
  width: 200px;
  height: 100px;
  padding: 10px;
  border: 5px solid black;
  margin: 20px;
}

 

• 총 너비: 200px (content) + 10px*2 (padding) + 5px*2 (border) = 230px
• 총 높이: 100px (content) + 10px*2 (padding) + 5px*2 (border) = 130px
• 마진은 요소 간 거리로 계산되므로 요소 내부의 크기에 영향을 주지 않는다.

 

2. Box-Sizing 속성

기본 Box Model은 content-box다. 하지만 box-sizing 속성을 border-box로 변경하면 padding과 border를 포함한 크기를 설정할 수 있다.

div {
  box-sizing: border-box;
  width: 200px;
  padding: 10px;
  border: 5px solid black;
}

 

이 경우, width가 요소의 전체 너비를 의미하므로 content 영역은 자동으로 조정된다.

---

Box Model 관련 디버깅

CSS 디버깅 도구(브라우저 개발자 도구)를 통해 Box Model의 각 영역을 확인할 수 있습니다.

• 개발자 도구에서 "Computed" 탭에 Box Model을 시각적으로 보여주는 기능이 있습니다.
• 이를 활용해 요소의 크기와 위치를 손쉽게 확인하고 조정할 수 있습니다.