박스 모델과 요소 배치

지난 장에서 우리는 CSS를 이용해 웹 페이지의 색상, 폰트, 텍스트 스타일을 섬세하게 조절하는 방법을 배웠습니다. 이제 HTML 요소들이 화면에 어떻게 배치되고 공간을 차지하는지에 대한 근본 원리인 CSS 박스 모델(Box Model)을 이해할 차례입니다.

웹 페이지의 모든 HTML 요소는 기본적으로 사각형의 박스(Box) 형태로 존재합니다. 이 박스들이 어떻게 상호작용하고 공간을 차지하는지 이해하는 것은 웹 레이아웃을 정확하게 제어하는 데 필수적입니다.

이 장에서는 CSS 박스 모델 구성 요소와, 각 요소의 크기/여백을 제어하는 핵심 속성을 정리합니다. 또한 HTML 요소가 화면에 배치되는 기본 방식과, 이 방식을 제어하는 display 속성도 함께 알아보겠습니다.

이 지식은 복잡한 웹 레이아웃을 구현하기 위한 단단한 기반이 될 것입니다.

CSS 박스 모델: 모든 HTML 요소는 상자다!

박스 모델과 요소 배치에서는 스타일 규칙, 레이아웃 계산, 화면 반영 결과를 정리합니다.

웹 페이지의 모든 HTML 요소는 박스 모델이라는 개념을 기반으로 렌더링됩니다. 즉, 여러분이 본 모든 div, p, img, a 태그는 화면에서 보이지 않는 사각형 박스로 둘러싸여 있다고 생각할 수 있습니다. 이 박스 모델은 콘텐츠, 패딩, 테두리, 마진이라는 네 가지 주요 구성 요소로 이루어져 있습니다.

박스 모델의 구성 요소

box-sizing 속성: 계산 방식 변경

CSS 박스 모델의 기본 계산 방식은 width와 height가 콘텐츠 영역만을 의미합니다. 따라서 패딩과 테두리를 추가하면 요소의 실제 크기가 지정한 width/height보다 커집니다. 이는 레이아웃 계산을 어렵게 만들 수 있습니다.

box-sizing 속성은 이러한 계산 방식을 변경합니다.

• content-box (기본값)
  • width, height는 콘텐츠 영역만을 의미합니다.
  • 실제 요소의 너비 = width + padding-left + padding-right + border-left-width + border-right-width
• border-box
  • width, height가 패딩과 테두리를 포함한 영역을 의미합니다. 콘텐츠 영역은 이 값에서 패딩과 테두리를 뺀 나머지입니다.
  • 이 방식은 레이아웃을 만들 때 요소의 실제 크기를 예측하기 훨씬 쉬워 현대 웹 개발에서 널리 사용됩니다.
  • 강력 권장: 대부분의 CSS 프레임워크나 최신 프로젝트에서는 * { box-sizing: border-box; }를 사용하여 모든 요소의 박스 모델을 border-box로 설정하고 시작합니다.

  /* 모든 요소에 border-box 적용 */
  * {
      box-sizing: border-box;
  }
  
  .my-box {
      width: 200px;
      height: 100px;
      padding: 20px;
      border: 5px solid blue;
      /*
      content-box일 경우 실제 너비: 200 + 20*2 + 5*2 = 250px
      border-box일 경우 실제 너비: 200px (패딩과 보더가 200px 안에 포함됨)
      */
  }

요소의 실제 크기를 계산할 때는 box-sizing을 먼저 확인하고, 그다음 콘텐츠·패딩·테두리·마진이 어느 영역에 영향을 주는지 구분하면 레이아웃이 훨씬 예측 가능해집니다.

display 속성: 요소의 기본 배치 방식

모든 HTML 요소는 기본적으로 display라는 속성을 가지고 있으며, 이 속성 값에 따라 웹 페이지에 어떻게 나타나고 공간을 차지하는지가 결정됩니다. CSS를 사용하여 이 display 속성 값을 변경함으로써 요소의 배치 방식을 제어할 수 있습니다.

블록(Block) 요소

• 항상 새로운 줄에서 시작합니다.

• 부모 요소의 가로 너비(100%)를 기본적으로 모두 차지합니다. (가능한 최대 너비)

• width, height, margin, padding, border 속성을 모두 사용할 수 있습니다.

• 예시: <div>, <h1>~<h6>, <p>, <ul>, <li>, <form>, <header>, <footer>, <section>, <article>, <aside> 등

  div {
      background-color: lightblue;
      width: 200px; /* 너비를 지정해도 새로운 줄에서 시작 */
      height: 100px;
      margin-bottom: 10px; /* 마진 적용 가능 */
  }

인라인(Inline) 요소

• 새로운 줄에서 시작하지 않고, 콘텐츠의 흐름에 따라이전 요소 바로 옆에 배치됩니다.

• 콘텐츠의 너비만큼만 공간을 차지합니다.

• width, height 속성은 적용되지 않습니다. (콘텐츠 크기에 따라 결정됨)

• margin-top, margin-bottom, padding-top, padding-bottom은 적용되지만, 다른 인라인 요소에 영향을 주지 않으므로 시각적인 효과가 제한적입니다. (margin-left, margin-right, padding-left, padding-right는 정상 적용)

• 예시: <span>, <a>, <strong>, <em>, <img>, <input>, <label> 등

  span {
      background-color: lightgreen;
      padding: 5px; /* 좌우 패딩은 적용 */
      margin-right: 5px; /* 좌우 마진은 적용 */
      /* width, height는 적용되지 않음 */
  }

  💡 주의: <img> 태그는 인라인 요소이지만 width와 height 속성이 적용됩니다. 이는 img가 콘텐츠 자체의 고유한 크기를 가지기 때문입니다. 하지만 기본적으로는 텍스트 흐름에 따라 배치됩니다.

인라인-블록(Inline-Block) 요소

• 인라인 요소처럼 새로운 줄에서 시작하지 않고 콘텐츠 흐름에 따라 배치됩니다.

• 블록 요소처럼 width, height, margin, padding, border 속성을 모두 자유롭게 적용할 수 있습니다.

• 인라인과 블록의 장점을 결합한 형태입니다.

• 적용 방법: display: inline-block;

  .card {
      display: inline-block; /* 옆으로 나열되면서 */
      width: 150px; /* 너비와 높이 지정 가능 */
      height: 180px;
      background-color: #f0f0f0;
      margin: 10px; /* 마진도 자유롭게 */
      padding: 15px;
      border: 1px solid #ddd;
  }

  💡 활용: 메뉴 항목 (<li>), 버튼, 작은 카드 형태의 UI 요소 등을 가로로 나열하면서도 개별적인 크기나 여백을 제어해야 할 때 매우 유용합니다.

display: none;

• 요소를 완전히 숨기고, 공간도 차지하지 않도록 합니다. 화면에서 완전히 제거된 것처럼 동작합니다.

• 스크린 리더 등 보조 기술에서도 이 요소를 읽지 않습니다.

• 참고: visibility: hidden;은 요소를 숨기지만, 공간은 그대로 차지합니다.

  .hidden-element {
      display: none; /* 요소가 보이지 않고 공간도 차지하지 않음 */
  }
  .invisible-element {
      visibility: hidden; /* 요소는 보이지 않지만 공간은 차지함 */
  }

마진 상쇄(Margin Collapsing) 현상 (심화)

블록 요소의 수직 마진(top-margin, bottom-margin)은 때때로 흥미로운 방식으로 동작합니다. 인접한 두 블록 요소의 수직 마진이 겹칠 때, 두 마진 중 더 큰 값 하나만 적용되는 현상을 마진 상쇄(Margin Collapsing) 또는 마진 병합이라고 합니다.

• 적용되는 경우

  형제 요소 간의 상하 마진: 위 요소의 margin-bottom과 아래 요소의 margin-top이 만날 때.

  부모-자식 요소 간의 상하 마진: 부모 요소의 margin-top과 첫 번째 자식 요소의 margin-top이 겹칠 때 (패딩이나 보더로 분리되지 않은 경우).

  빈 블록 요소의 상하 마진: 패딩, 보더, 콘텐츠가 없는 빈 블록 요소의 margin-top과 margin-bottom이 겹칠 때.

• 예시

  <div style="margin-bottom: 20px; background-color: lightcoral;">첫 번째 박스</div>
  <div style="margin-top: 30px; background-color: lightgreen;">두 번째 박스</div>

  마진 상쇄는 CSS 레이아웃을 예측하기 어렵게 만들 수 있지만, 의도된 디자인 패턴이며 특정 상황에서 요소 간의 불필요한 간격을 줄여줍니다. 마진 상쇄를 피하려면 padding이나 border를 추가하거나, display: flex 또는 display: grid와 같은 새로운 레이아웃 방식을 사용하면 됩니다.

실습: 박스 모델과 display 속성 활용

지금까지 배운 박스 모델과 display 속성들을 활용하여 간단한 제품 목록 페이지를 만들어 봅시다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>박스 모델과 Display 실습 - 제품 목록</title>
    <link rel="stylesheet" href="css/product.css">
</head>
<body>
    <header>
        <h1>우리 가게 인기 상품</h1>
        <p>다양한 제품을 만나보세요!</p>
    </header>

    <main>
        <div class="product-grid">
            <div class="product-item">

                <h3>멋진 제품 A</h3>
                <p>이 제품은 정말 멋집니다. 한 번 사용해 보세요!</p>
                <span class="price">25,000원</span>
                <a href="#" class="buy-button">구매하기</a>
            </div>

            <div class="product-item">

                <h3>매력적인 제품 B</h3>
                <p>당신을 더욱 빛나게 할 아이템입니다.</p>
                <span class="price">40,000원</span>
                <a href="#" class="buy-button">구매하기</a>
            </div>

            <div class="product-item">

                <h3>실용적인 제품 C</h3>
                <p>일상에 편리함을 더해줄 제품!</p>
                <span class="price">15,000원</span>
                <a href="#" class="buy-button">구매하기</a>
            </div>
        </div>

        <div class="info-section">
            <p>더 많은 제품 정보는 <a href="#">여기</a>를 클릭하세요.</p>
            <span class="contact-info">문의: support@ourshop.com</span>
            <span class="notice-info">공지사항: 배송 지연 안내</span>
        </div>
    </main>

    <footer>
        <p>&copy; 2025 우리 가게. 모든 권리 보유.</p>
    </footer>
</body>
</html>

/* 모든 요소에 border-box 적용하여 박스 모델 계산 용이하게 함 (강력 권장) */
* {
    box-sizing: border-box;
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    margin: 0;
    background-color: #f4f7f6;
    color: #333;
    line-height: 1.6;
}

/* 헤더 스타일 */
header {
    background-color: #4CAF50; /* 초록색 */
    color: white;
    text-align: center;
    padding: 30px 20px;
    margin-bottom: 30px; /* 헤더 아래 여백 */
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

header h1 {
    font-size: 2.8em;
    margin-bottom: 10px; /* h1 아래 여백 */
}

header p {
    font-size: 1.2em;
    margin: 0; /* p 태그 기본 마진 제거 */
}

/* 메인 콘텐츠 영역 */
main {
    max-width: 1000px;
    margin: 0 auto 50px auto; /* 좌우 auto로 중앙 정렬 */
    padding: 20px;
}

/* 제품 그리드 (세로 정렬된 블록 요소들) */
.product-grid {
    display: flex; /* Flexbox는 다음 장에서 자세히 배우지만, 여기서는 요소들을 가로로 배치하는 데 사용 */
    flex-wrap: wrap; /* 요소들이 공간이 부족하면 다음 줄로 넘어가도록 함 */
    justify-content: center; /* 가로 중앙 정렬 */
    gap: 30px; /* 요소들 사이의 간격 */
    margin-bottom: 40px;
}

/* 각 제품 아이템 스타일 */
.product-item {
    width: 280px; /* 각 제품 아이템의 고정 너비 */
    background-color: white;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 20px;
    text-align: center;
    box-shadow: 0 2px 10px rgba(0,0,0,0.08);
    transition: transform 0.2s ease-in-out; /* 호버 애니메이션 */
}

.product-item:hover {
    transform: translateY(-5px); /* 호버 시 살짝 위로 이동 */
}

.product-item img {
    max-width: 100%;
    height: auto;
    border-radius: 5px;
    margin-bottom: 15px; /* 이미지 아래 마진 */
}

.product-item h3 {
    font-size: 1.5em;
    color: #2c3e50;
    margin-bottom: 10px; /* 제목 아래 마진 */
}

.product-item p {
    font-size: 0.95em;
    color: #666;
    margin-bottom: 15px; /* 문단 아래 마진 */
}

/* 가격 (인라인 요소) */
.price {
    display: block; /* 인라인 요소였던 span을 블록 요소처럼 동작하게 함 */
    font-size: 1.3em;
    font-weight: bold;
    color: #e67e22; /* 주황색 */
    margin-bottom: 20px; /* 가격 아래 마진 */
}

/* 구매 버튼 (인라인 요소인 a 태그를 블록처럼 꾸밈) */
.buy-button {
    display: inline-block; /* 버튼이면서 가로 나열 가능 */
    background-color: #3498db; /* 파란색 */
    color: white;
    padding: 10px 25px;
    border-radius: 5px;
    text-decoration: none; /* 밑줄 제거 */
    font-weight: bold;
    transition: background-color 0.3s ease;
}

.buy-button:hover {
    background-color: #2980b9; /* 호버 시 색상 변경 */
}

/* 정보 섹션 */
.info-section {
    text-align: center;
    padding: 20px;
    background-color: #ecf0f1; /* 연한 회색 배경 */
    border-radius: 8px;
    margin-top: 40px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

.info-section p {
    margin-bottom: 10px;
}

.info-section a {
    color: #3498db;
    text-decoration: none;
    font-weight: bold;
}

.info-section a:hover {
    text-decoration: underline;
}

/* 인라인 요소들의 배치 (display: inline-block 활용) */
.contact-info, .notice-info {
    display: inline-block; /* 옆으로 나열되면서 패딩, 마진 적용 가능 */
    background-color: #fff;
    padding: 8px 15px;
    border: 1px solid #c9d9e4;
    border-radius: 20px;
    font-size: 0.9em;
    margin: 5px 10px; /* 요소들 간의 간격 */
}

/* 푸터 스타일 */
footer {
    background-color: #2c3e50;
    color: #ecf0f1;
    text-align: center;
    padding: 20px 0;
    margin-top: 30px; /* 푸터 위 여백 */
    font-size: 0.9em;
}

이번 장에서는 CSS 레이아웃의 가장 근본적인 개념인 박스 모델(Box Model)을 학습했습니다. 모든 HTML 요소가 콘텐츠, 패딩, 테두리, 마진으로 구성된 사각형 박스로 표현된다는 것을 이해하고, width, height, padding, border, margin 속성들을 사용하여 이 박스들의 크기와 공간을 제어하는 방법을 배웠습니다. 특히 box-sizing: border-box;의 중요성을 강조했습니다.

또한, 요소들이 화면에 어떻게 배치되는지를 결정하는 display 속성에 대해 알아보면서, 블록(block), 인라인(inline), 그리고 둘의 장점을 결합한 인라인-블록(inline-block) 요소의 특징과 활용법을 익혔습니다. 마진 상쇄 현상과 그 해결법에 대한 심화 내용도 다루어, 더 깊은 이해를 돕고자 했습니다.

아래 다이어그램은 박스 모델의 네 영역과 display 값에 따른 배치 차이를 함께 정리한 것입니다.

아래 다이어그램은 박스 모델의 실제 크기 계산과 속성 선택 기준을 함께 정리한 것입니다.

박스 모델과 요소 배치에서 남길 기준과 다음 확인 순서를 정리했습니다.

다음 학습으로 넘어가기 전, 박스 모델과 요소 배치에서 남은 개념 경계와 실습 확인 포인트를 점검합니다.