HTML 입문 문법

HTML 박스 모델 (Box Model)

HTML 박스 모델 (Box Model) — 초급

박스 모델 (Box Model)

1. 도입 (왜 배워야 하는가)

웹 개발에서 박스 모델은 모든 HTML 요소의 기본 구조를 결정합니다. 웹 페이지의 레이아웃을 디자인할 때, 각 요소가 차지하는 공간과 그 주변의 여백을 이해하는 것이 매우 중요합니다. 박스 모델을 이해하지 못하면, 요소들이 의도한 대로 배치되지 않거나, 예기치 않은 오버플로우 현상으로 인해 디자인이 망가질 수 있습니다. 따라서 박스 모델은 웹 개발에서 필수적으로 알아야 할 개념입니다.

2. 핵심 개념 설명

박스 모델은 다음 네 가지 주요 요소로 구성됩니다:

Content (내용): 실제 텍스트, 이미지 등의 콘텐츠
Padding (내부 여백): 콘텐츠와 테두리 사이의 공간
Border (테두리): 요소의 외곽선
Margin (외부 여백): 요소와 다른 요소 사이의 공간

비유

박스 모델을 집으로 비유해보면, 집의 내부는 콘텐츠(content), 내부 벽과 가구 사이의 공간은 패딩(padding), 집의 외벽은 테두리(border), 그리고 집과 이웃 집 사이의 거리는 마진(margin)으로 설명할 수 있습니다.

용어	설명
Content	요소의 실제 내용
Padding	콘텐츠와 테두리 사이의 여백
Border	요소의 외곽선
Margin	요소와 다른 요소 사이의 여백

3. 기본 코드 예제

아래는 간단한 박스 모델을 구현한 HTML 코드입니다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>박스 모델 예제</title>
    <style>
        .box {
            width: 200px; / 박스의 너비 설정 /
            height: 100px; / 박스의 높이 설정 /
            padding: 20px; / 내부 여백 설정 /
            border: 5px solid black; / 테두리 설정 /
            margin: 10px; / 외부 여백 설정 /
            background-color: lightblue; / 배경색 설정 /
        }
    </style>
</head>
<body>
    <div class="box">안녕하세요!</div>
</body>
</html>

실행 결과

페이지에 "안녕하세요!"라는 텍스트가 있는 박스가 표시됩니다.

코드 설명

<!DOCTYPE html>: HTML5 문서임을 선언
<html lang="ko">: 문서의 언어를 한국어로 설정
<head>: 문서의 메타데이터를 포함
<style>: CSS를 사용하여 박스 모델을 설정

- width: 박스의 너비를 200px로 설정 - height: 박스의 높이를 100px로 설정 - padding: 내부 여백을 20px로 설정 - border: 5px 두께의 검은색 테두리 설정 - margin: 외부 여백을 10px로 설정 - background-color: 박스의 배경색을 연한 파란색으로 설정

<body>: 페이지의 본문 내용
<div class="box">: 클래스를 사용하여 스타일을 적용한 박스 생성

4. 실전 활용 예제

예제 1: 쇼핑몰 장바구니 아이템

쇼핑몰에서 장바구니의 각 아이템을 박스 모델로 표현할 수 있습니다. 각 아이템의 정보(이미지, 이름, 가격 등)를 콘텐츠로 사용하고, 아이템 간의 간격을 마진으로 설정합니다.

<div class="cart-item">
    <img src="item.jpg" alt="아이템 이미지">
    <h3>아이템 이름</h3>
    <p>가격: 10,000원</p>
</div>

예제 2: 블로그 게시물

블로그 포스트의 각 카드는 콘텐츠, 패딩, 테두리, 마진을 활용하여 잘 정렬된 모습을 보여줍니다.

<div class="post">
    <h2>블로그 제목</h2>
    <p>블로그 내용...</p>
</div>

5. 흔한 실수와 주의사항

실수 1: 패딩과 마진 혼동

잘못된 코드:

.box {
    margin: 20px; / 마진을 설정했지만 패딩을 설정하지 않음 /
}

올바른 코드:

.box {
    padding: 20px; / 내부 여백을 설정 /
    margin: 10px; / 외부 여백을 설정 /
}

실수 2: 박스 크기 계산 착오

CSS에서 box-sizing: border-box; 속성을 사용하지 않으면, 테두리 및 패딩이 요소의 총 크기에 포함되지 않아 예상보다 큰 크기로 나타날 수 있습니다.

6. 정리

박스 모델은 웹 페이지의 레이아웃을 구성하는 기본 요소입니다.
각 요소는 콘텐츠, 패딩, 테두리, 마진으로 이루어져 있습니다.
박스 모델을 이해하면 요소 간의 간격과 배치를 더 효과적으로 조정할 수 있습니다.
다음 학습 주제로는 CSS Flexbox 또는 Grid 레이아웃을 추천합니다. 이 두 가지는 박스 모델을 기반으로 하여 더 복잡한 레이아웃을 쉽게 만들 수 있는 방법입니다.

학습