Ch.4 Box Model — 간격의 기술

모든 것은 박스다

CSS 박스 모델의 4계층(content, padding, border, margin)을 이해한다padding과 margin의 차이를 구별한다브라우저 DevTools로 박스 모델을 확인할 수 있다

웹 페이지의 모든 요소는 사실 '박스'입니다

버튼, 문단, 이미지 — 둥글게 보여도 CSS 세계에서는 전부 사각형 박스입니다. 이 박스의 간격을 이해하면 레이아웃의 비밀이 풀립니다.

padding과 margin은 뭐가 다를까?

Box Model — content, padding, border, margin 4겹 구조를 이해합시다.

article

핵심 내용

모든 HTML 요소는 4겹 박스로 둘러싸여 있습니다

Content: 실제 내용 (텍스트, 이미지)

Padding: 내용과 테두리 사이 여백

Border: 눈에 보이는 테두리선

Margin: 다른 요소와의 바깥 간격

.card {
  /* Content: 내용 자체의 크기 */
  width: 300px;

  /* Padding: 내용 ↔ 테두리 사이 */
  padding: 20px;

  /* Border: 테두리선 */
  border: 2px solid #ddd;

  /* Margin: 바깥 간격 */
  margin: 16px;
}

padding = 안쪽 여백 (배경색이 적용됨) margin = 바깥 여백 (배경색 없음, 투명) 비유: padding은 택배 상자 안의 뽁뽁이, margin은 상자 간 간격

상하좌우를 한 번에 설정하는 단축 표기법

/* 1값: 상하좌우 모두 */
padding: 20px;

/* 2값: 상하 / 좌우 */
padding: 10px 20px;

/* 4값: 상 / 우 / 하 / 좌 (시계방향) */
padding: 10px 20px 15px 20px;

/* 개별 지정 */
margin-top: 16px;
margin-bottom: 8px;

홈페이지 카드에 padding과 margin을 적용해봅시다

내용과 테두리 사이의 여백을 만드는 속성은?

margin에는 요소의 background-color가 적용된다

CSS에서 1rem은 항상 16px과 같다

Box Model 이해!

edit_note

정리 노트

모든 것은 박스다

박스 모델 4계층

content
실제 내용(텍스트, 이미지)이 들어가는 영역
padding
내용과 테두리 사이의 안쪽 여백
border
박스의 테두리 — 두께, 스타일, 색상 지정 가능
margin
다른 요소와의 바깥쪽 여백

display 속성

block
한 줄 전체를 차지 (div, p, h1)
inline
내용 크기만큼만 차지 (span, a, strong)
★

개발자 도구(F12)에서 박스 모델을 직접 확인할 수 있습니다.

image

시각 자료

다이어그램: wd-scene-box-model
check_circle

핵심 정리

  • 1Box Model: content → padding → border → margin
  • 2padding = 안쪽 여백 (배경색 적용), margin = 바깥 간격 (투명)
  • 3padding: 10px 20px (상하 10, 좌우 20 단축 표기)

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

play_circle인터랙티브 레슨 시작