11강. 박스 모델과 크기 계산

이번 강의의 결과물은 폭과 안쪽·바깥쪽 간격을 예측할 수 있는 프로젝트 카드와 가운데 정렬된 콘텐츠 영역입니다.

?1. 이번 강의에서 해결할 문제

width: 320px인 카드에 padding과 border를 추가했더니 실제 크기가 320px보다 커질 수 있습니다. HTML 요소가 화면에서 차지하는 영역을 박스 모델로 이해하고 크기 계산이 어긋나는 문제를 해결합니다.

✓학습 목표

• width: 320px인 카드에 padding과 border를 추가했더니 실제 크기가 320px보다 커질 수 있습니다. HTML 요소가 화면에서 차지하는 영역을 박스 모델로 이해하고 크기 계산이 어긋나는 문제를 해결합니다.
• 핵심 개념을 코드 예시와 짧은 실습에 적용하고 결과를 설명합니다.

◇2. 핵심 개념

브라우저는 대부분의 요소를 사각형 박스로 배치합니다.

margin
└─ border
   └─ padding
      └─ content

• content: 텍스트와 이미지가 들어가는 실제 내용 영역
• padding: 콘텐츠와 테두리 사이의 안쪽 여백
• border: 패딩 바깥의 테두리
• margin: 다른 요소와 거리를 만드는 바깥 여백

기본 content-box에서는 다음처럼 계산됩니다.

실제 가로 크기 = width + 좌우 padding + 좌우 border
320 + 48 + 4 = 372px

box-sizing: border-box를 사용하면 선언한 width 안에 padding과 border가 포함되어 크기를 예측하기 쉬워집니다. W3C CSS 박스 모델 표준

</>3. 코드 예시

파일명: web-basics/portfolio/index.html

<main class="page-container" id="main-content">
  <section id="projects">
    <h2>프로젝트</h2>
    <article class="project-card">
      <h3>게임플레이 기능 프로젝트</h3>
      <p>Unreal C++로 플레이어 상호작용 기능을 구현합니다.</p>
    </article>
  </section>
</main>

파일명: web-basics/portfolio/css/style.css

* {
  box-sizing: border-box;
}

body {
  margin: 0;
}

.page-container {
  width: 100%;
  max-width: 960px;
  margin: 0 auto;
  padding: 0 24px;
}

.project-card {
  width: 100%;
  margin-bottom: 16px;
  padding: 24px;
  border: 2px solid #cbd5e1;
  background-color: white;
}

실행 위치: D:\WebProject\StartBook\dev-foundations\web-basics\portfolio

python -m http.server 5500

→4. 코드가 동작하는 이유

1. 전체 선택자의 box-sizing이 모든 요소의 크기 계산을 border-box로 바꿉니다.
2. page-container는 좁은 화면에서는 사용 가능한 폭 전체를 사용합니다.
3. 넓은 화면에서는 max-width: 960px보다 커지지 않습니다.
4. 좌우 margin: auto가 남는 공간을 양쪽에 나눠 컨테이너를 가운데 배치합니다.
5. 컨테이너의 padding은 콘텐츠가 화면 가장자리에 붙지 않게 합니다.
6. 카드의 margin은 다른 카드와의 외부 거리, padding은 카드 내부의 거리를 만듭니다.

!5. 자주 하는 실수

• padding을 추가한 뒤 실제 폭이 커진 이유를 모름
• 내부 여백에 margin, 요소 사이 여백에 padding을 사용함
• width: 100% 요소에 padding을 더하고 content-box 상태를 확인하지 않음
• 모든 요소에 고정된 width와 height를 지정함
• 이미지나 긴 텍스트가 박스 밖으로 넘치는 상황을 확인하지 않음

✎6. 짧은 실습 과제

1. 카드에 width: 320px, padding: 24px, border: 2px를 지정합니다.
2. 개발자 도구의 Computed 영역에서 실제 크기를 확인합니다.
3. box-sizing을 content-box와 border-box로 바꾸어 차이를 기록합니다.
4. 카드의 padding과 margin을 각각 0으로 바꾸어 담당하는 공간을 확인합니다.
5. page-container의 max-width를 720px과 1200px로 바꾸어 결과를 비교합니다.

완료 기준은 특정 요소의 전체 가로 크기와 각 여백의 위치를 개발자 도구의 박스 그림으로 설명하는 것입니다.

?7. 이해 점검 질문 3개

1. padding과 margin은 각각 어느 영역의 간격을 만드나요?
2. box-sizing: border-box가 크기 계산을 쉽게 만드는 이유는 무엇인가요?
3. max-width와 좌우 margin: auto를 함께 사용하면 어떤 레이아웃이 만들어지나요?

■핵심 요약

• 이번 강의의 핵심 개념을 코드의 구조와 실행 결과에 연결했습니다.
• 코드 예시를 직접 바꾸는 짧은 실습으로 핵심 동작을 확인했습니다.
• 이해 점검 질문에 답하며 다음 강의에 필요한 기준을 정리했습니다.