Ch.4 Box Model — 간격의 기술

box-sizing과 단위의 세계

box-sizing: border-box의 필요성과 작동 원리를 이해한다px, rem, %, vh/vw 단위의 차이를 구별한다margin: auto로 요소를 가운데 정렬할 수 있다

width를 300px로 줬는데 실제 크기가 342px?

width: 300px + padding: 20px + border: 1px이면 실제 너비는 342px입니다. 이 함정에 빠지지 않으려면 box-sizing을 알아야 합니다.

왜 설정한 크기와 실제 크기가 다를까?

box-sizing: border-box — 이 한 줄이 CSS 레이아웃의 가장 큰 골칫거리를 해결합니다.

article

핵심 내용

같은 width: 300px인데 실제 크기가 다르다?

border-box: width에 padding + border가 포함됨 거의 모든 프로젝트에서 전역 설정으로 사용: `*, *::before, *::after { box-sizing: border-box; }`

총 너비 = width + padding × 2 + border × 2

content-box에서 실제 차지하는 너비 = width + 양쪽 padding + 양쪽 border

px만 쓰면 안 되나요? 상황에 맞는 단위가 있습니다

실무 팁: 글꼴 크기 → rem, 간격 → rem 또는 px, 레이아웃 너비 → %, 전체 화면 → vh/vw

홈페이지 콘텐츠를 가운데 정렬해봅시다

box-sizing: border-box를 적용하면 width에 무엇이 포함되는가?

블록 요소를 수평 가운데 정렬하려면 margin: 0 ___ 를 사용한다

display: none과 visibility: hidden의 차이는?

Box Model 마스터!

key

핵심 용어

📏

px

고정 크기 (1px = 화면 1점)

📐

rem

루트(html) font-size 기준 배수 (반응형 권장)

📊

%

부모 요소 기준 비율

🖥️

vh / vw

뷰포트 높이/너비의 1% (전체 화면 기준)

edit_note

정리 노트

box-sizing과 단위의 세계

box-sizing

content-box
기본값 — width가 content만 포함 (padding/border 별도)
border-box
권장 — width에 padding과 border 포함 계산

CSS 단위

px
고정 단위 — 화면 크기와 무관하게 일정
rem
루트 글꼴 기준 — 반응형에 적합 (1rem = 16px 기본)
%
부모 요소 기준 비율로 크기 지정
vw/vh
뷰포트 기준 — 화면 전체 너비/높이의 비율
★

* { box-sizing: border-box; }를 CSS 첫 줄에 넣으면 레이아웃이 훨씬 편합니다.

check_circle

핵심 정리

  • 1box-sizing: border-box → width에 padding+border 포함
  • 2단위: px(고정), rem(상대), %(부모 비율), vh/vw(뷰포트)
  • 3margin: 0 auto → 블록 요소 수평 가운데 정렬

퀴즈와 인터랙션으로 더 깊이 학습하세요

play_circle인터랙티브 레슨 시작