HTML의 박스 모델

김서현·2025년 1월 6일

frontend

목록 보기

5/34

HTML의 박스 모델

HTML의 박스 모델(Box Model)은 웹페이지에서 각 요소가 차지하는 공간을 정의하는 기본 규칙!
이걸 집에 비유하면 다음과 같이 이해할 수 있어요:

Content (콘텐츠):
- 집 안의 방이에요. 글자, 이미지 같은 실제 내용이 들어가는 공간이에요.
Padding (패딩):
- 방 안에서 벽과 가구 사이의 여유 공간이에요. 콘텐츠와 경계선(Border) 사이의 간격을 나타내요.
Border (테두리):
- 방을 감싸는 벽이에요. 콘텐츠와 패딩을 둘러싸는 테두리입니다.
Margin (마진):
- 집과 다른 집 사이의 외부 공간이에요. 요소와 요소 사이의 간격을 나타내요.

박스 모델 구조

| Margin  |    <- 요소와 요소 사이의 외부 공간
| Border  |    <- 요소를 감싸는 테두리
| Padding |    <- 콘텐츠와 테두리 사이의 내부 여백
| Content |    <- 실제 내용이 들어가는 공간

예제 코드

<!DOCTYPE html>
<html lang="en">
<head>
  <style>
    .box {
      width: 200px; /* Content의 너비 */
      height: 100px; /* Content의 높이 */
    
      padding: 20px; /* 콘텐츠와 테두리 사이 여백 */
      border: 5px blue; /* 테두리 크기와 색상 */
      margin: 30px; /* 요소와 요소 사이 외부 공간 */
      background-color: lightgray; /* Content의 배경 색상 */
    }
  </style>
</head>
<body>
  <div class="box">This is Content</div>
</body>
</html>

위 코드 결과

This is Content

Content:
- 텍스트 "This is Content"가 들어있는 200px x 100px 공간이에요.
Padding:
- 콘텐츠와 테두리(Border) 사이에 20px 여백이 있어요.
Border:
- 콘텐츠와 패딩을 둘러싸는 파란색 테두리(8px).
Margin:
- 박스와 다른 요소 또는 화면 가장자리 사이에 30px 외부 공간이 생깁니다.

더 쉽게! 박스 모델의 레이어

콘텐츠(Content) → 패딩(Padding) → 테두리(Border) → 마진(Margin) 순서로 쌓여 있어요.
Padding은 내부 공간, Margin은 외부 공간이에요!!

눈여겨볼 부분

HTML 박스:
- 마치 상자를 여러 겹으로 싸놓은 모습.
  
  이미지 출처: https://www.w3schools.com/css/css_boxmodel.asp
레이아웃: 어디에 배치할까, 설계도!
코드가 실제로 공간을 차지할 때 Content + Padding + Border + Margin 모두 포함됩니다.
즉, 우리가 <div>를 200px이라고 지정해도, 실제 화면에서는 이 값에 Padding, Border, Margin이 더해지면서 훨씬 큰 영역을 차지하게 됩니다! 😊

요약

박스 모델은 HTML 요소의 공간 구조를 이해하는 기본 개념:

Content: 실제 내용.
Padding: 내용과 테두리 사이 여백.
Border: 테두리.
Margin: 요소와 다른 요소 사이의 공간.

박스 모델을 알면 웹페이지의 디자인과 레이아웃을 더 쉽게 다룰 수 있어요~~

여기서 잠깐!!

"박스 모델(Box Model)" = "레이아웃(Layout)" 이 아니에요!!!

차이점

박스 모델(Box Model):
- 각 HTML 요소가 화면에서 얼마나 많은 공간을 차지하는지를 설명하는 모델이에요.
- 콘텐츠(Content), 패딩(Padding), 테두리(Border), 마진(Margin)으로 구성됩니다.
레이아웃(Layout):
- 웹페이지 전체에서 각 요소들을 어떻게 배치할지 설계하는 방식이에요.
- 박스 모델뿐만 아니라 CSS의 Flexbox, Grid, Positioning 등 여러 기술을 사용해 요소를 배치합니다.
- 예시: header는 맨 위, main은 중앙, footer는 아래에 배치.