[CSS] 6. 박스 모델 (Margin, Padding, Border, Content)

CSS 박스 모델(Box Model)은 모든 HTML 요소가 화면에 어떻게 배치되고 크기가 결정되는지에 대한 기본 개념입니다. 각 요소는 네 가지 주요 영역으로 구성되며, 이들은 Content(내용), Padding(패딩), Border(테두리), **Margin(마진)**입니다. 이 구조를 이해하면 레이아웃을 보다 효율적으로 조정할 수 있습니다.

1. Content(내용)

Content는 요소의 실제 내용이 표시되는 영역입니다. 텍스트나 이미지가 이 영역 안에 위치하며, 기본적으로 이 영역의 크기는 요소의 width와 height 속성에 의해 정의됩니다.

예시

.box {
  width: 200px;
  height: 100px;
  background-color: lightblue;
}

HTML:

<div class="box">이것은 내용입니다.</div>

위 예시에서 width: 200px, height: 100px는 콘텐츠 영역의 크기를 지정합니다.

2. Padding(패딩)

Padding(패딩)은 콘텐츠와 테두리 사이의 공간입니다. 패딩은 콘텐츠와 테두리 사이의 여백을 추가하는 역할을 합니다. 패딩 값은 네 방향(상, 우, 하, 좌) 각각을 다르게 설정할 수 있으며, padding 속성으로 제어됩니다.

예시

.box {
  width: 200px;
  height: 100px;
  background-color: lightblue;
  padding: 20px;
}

HTML:

<div class="box">이것은 패딩이 적용된 내용입니다.</div>

위 코드에서는 콘텐츠 영역을 둘러싼 패딩이 20px 적용되어, 요소의 내용이 테두리로부터 여유 있게 떨어져 있습니다.

3. Border(테두리)

Border(테두리)는 패딩 외부에 위치하며, 요소의 경계를 나타냅니다. 테두리는 두께, 색상, 스타일을 지정할 수 있으며, border 속성으로 관리됩니다. 테두리 두께는 요소의 크기에 영향을 미칩니다.

예시

.box {
  width: 200px;
  height: 100px;
  background-color: lightblue;
  padding: 20px;
  border: 5px solid black;
}

HTML:

<div class="box">테두리가 있는 요소입니다.</div>

위 예시에서는 border: 5px solid black이 적용되어 5px 두께의 검은색 테두리가 추가됩니다.

4. Margin(마진)

Margin(마진)은 테두리 바깥쪽의 여백입니다. 마진은 요소 간의 간격을 조정하는 데 사용되며, 패딩과 마찬가지로 네 방향에 대해 각각 다른 값을 설정할 수 있습니다. 마진은 요소의 크기에 영향을 주지 않으며, 주변 요소와의 간격을 조정하는 데 사용됩니다.

예시

.box {
  width: 200px;
  height: 100px;
  background-color: lightblue;
  padding: 20px;
  border: 5px solid black;
  margin: 30px;
}

HTML:

<div class="box">마진이 적용된 요소입니다.</div>

이 예시에서 margin: 30px이 설정되어 요소의 외부에 30px 간격이 생깁니다. 이 간격은 요소 간의 여백을 형성합니다.

5. 박스 모델 시각화

박스 모델을 이해하기 위해서는 요소가 어떻게 배치되고 크기가 결정되는지 시각적으로 보는 것이 중요합니다. 박스 모델에서 요소의 전체 크기는 width, height 외에도 패딩, 테두리, 마진이 모두 더해져서 계산됩니다.

예시

.box {
  width: 200px;
  height: 100px;
  padding: 20px;
  border: 5px solid black;
  margin: 30px;
}

이 코드에서 요소의 실제 총 크기는 다음과 같습니다:

• Width: 200px (내용) + 20px(좌우 패딩) + 5px(좌우 테두리) = 250px
• Height: 100px (내용) + 20px(상하 패딩) + 5px(상하 테두리) = 150px

따라서 요소의 전체 크기는 width, height, padding, border, margin의 합에 의해 결정됩니다.

박스 모델 총정리

• Content: 요소의 실제 내용이 들어가는 공간
• Padding: 콘텐츠와 테두리 사이의 여백
• Border: 요소의 테두리
• Margin: 요소 바깥의 여백, 다른 요소와의 간격을 조정

박스 모델을 이해하고 사용하면, 레이아웃에서 각 요소의 크기와 간격을 정확하게 제어할 수 있습니다. 특히, 다양한 디바이스와 화면 크기에 대응하는 반응형 웹 디자인에서 필수적인 개념입니다.

참고 사이트

• developer.mozilla.org
• www.w3.org
• www.css-tricks.com