[웹 디자인] 11일차: CSS 박스 모델

박스 모델이란?

CSS 박스 모델은 HTML 요소의 레이아웃을 설명하는 기본 개념입니다. 모든 HTML 요소는 박스 모델을 따르며, 이 박스 모델은 콘텐츠 영역, 패딩, 테두리, 마진으로 구성됩니다.

박스 모델 구성 요소

1. 콘텐츠(Content)
   • 실제 콘텐츠가 들어가는 영역입니다.
   • width와 height 속성으로 크기를 지정할 수 있습니다.
2. 패딩(Padding)
   • 콘텐츠와 테두리 사이의 여백입니다.
   • padding 속성으로 크기를 지정할 수 있습니다.
   • 각 면별로 padding-top, padding-right, padding-bottom, padding-left 속성을 지정할 수 있습니다.
3. 테두리(Border)
   • 패딩과 마진 사이의 테두리 영역입니다.
   • border 속성으로 크기와 스타일을 지정할 수 있습니다.
   • 각 면별로 border-top, border-right, border-bottom, border-left 속성을 지정할 수 있습니다.
4. 마진(Margin)
   • 테두리와 요소 사이의 외부 여백입니다.
   • margin 속성으로 크기를 지정할 수 있습니다.
   • 각 면별로 margin-top, margin-right, margin-bottom, margin-left 속성을 지정할 수 있습니다.

박스 모델 예제

.box {
  width: 200px;
  height: 100px;
  padding: 10px;
  border: 5px solid #333;
  margin: 20px;
  background-color: #f0f0f0;
}

<div class="box">박스 모델 예제</div>

 

예제 설명

• width와 height: 콘텐츠 영역의 크기를 지정합니다.
• padding: 콘텐츠와 테두리 사이의 여백을 지정합니다.
• border: 테두리의 크기와 스타일을 지정합니다.
• margin: 테두리와 요소 사이의 외부 여백을 지정합니다.

박스 크기 계산

박스의 전체 크기는 다음과 같이 계산됩니다:

• 총 너비 = 콘텐츠 너비 + 왼쪽 패딩 + 오른쪽 패딩 + 왼쪽 테두리 + 오른쪽 테두리 + 왼쪽 마진 + 오른쪽 마진
• 총 높이 = 콘텐츠 높이 + 위쪽 패딩 + 아래쪽 패딩 + 위쪽 테두리 + 아래쪽 테두리 + 위쪽 마진 + 아래쪽 마진

예제:

.box {
  width: 200px;
  height: 100px;
  padding: 10px;
  border: 5px solid #333;
  margin: 20px;
}

• 총 너비 = 200px (콘텐츠) + 10px (왼쪽 패딩) + 10px (오른쪽 패딩) + 5px (왼쪽 테두리) + 5px (오른쪽 테두리) + 20px (왼쪽 마진) + 20px (오른쪽 마진) = 270px
• 총 높이 = 100px (콘텐츠) + 10px (위쪽 패딩) + 10px (아래쪽 패딩) + 5px (위쪽 테두리) + 5px (아래쪽 테두리) + 20px (위쪽 마진) + 20px (아래쪽 마진) = 170px

박스 크기 조정 - box-sizing 속성

box-sizing 속성은 박스의 크기 계산 방식을 변경할 수 있습니다.

• content-box (기본값): width와 height가 콘텐츠 영역을 기준으로 지정됩니다.
• border-box: width와 height가 콘텐츠, 패딩, 테두리를 포함한 크기로 지정됩니다.

예제:

.box {
  width: 200px;
  height: 100px;
  padding: 10px;
  border: 5px solid #333;
  margin: 20px;
  box-sizing: border-box;
}

• 총 너비 = 200px (콘텐츠 + 패딩 + 테두리)
• 총 높이 = 100px (콘텐츠 + 패딩 + 테두리)

테두리 스타일

테두리는 다양한 스타일로 설정할 수 있습니다.

• border-style: 테두리의 스타일을 설정합니다.
  • none, solid, dashed, dotted, double, groove, ridge, inset, outset

예제:

.box {
  border: 5px solid #333;
  border-style: dashed;
}

패딩과 마진 단축 속성

패딩과 마진은 단축 속성을 사용하여 간단하게 설정할 수 있습니다.

 

패딩

• .box { padding: 10px; /* 모든 면 */ padding: 10px 20px; /* 위, 아래 | 왼쪽, 오른쪽 */ padding: 10px 20px 30px; /* 위 | 왼쪽, 오른쪽 | 아래 */ padding: 10px 20px 30px 40px; /* 위 | 오른쪽 | 아래 | 왼쪽 */ }

마진

• .box { margin: 10px; /* 모든 면 */ margin: 10px 20px; /* 위, 아래 | 왼쪽, 오른쪽 */ margin: 10px 20px 30px; /* 위 | 왼쪽, 오른쪽 | 아래 */ margin: 10px 20px 30px 40px; /* 위 | 오른쪽 | 아래 | 왼쪽 */ }

결론

CSS 박스 모델은 웹 페이지 레이아웃을 이해하고 디자인하는 데 중요한 개념입니다. 콘텐츠, 패딩, 테두리, 마진을 포함한 박스 모델을 적절히 활용하면 요소 간의 간격과 크기를 효율적으로 조정할 수 있습니다. 이번 글에서는 박스 모델의 구성 요소와 속성에 대해 배웠습니다.

다음 글에서는 CSS 레이아웃 기초에 대해 알아보겠습니다.

다음 글에서 만나요!