통합 요약노트
Ch.4 Box Model — 간격의 기술
박스 모델, box-sizing, 단위, 카드 UI
이 챕터의 내용
1
모든 것은 박스다
Box Model — content, padding, border, margin 4겹 구조를 이해합시다.
모든 HTML 요소는 4겹 박스로 둘러싸여 있습니다
상하좌우를 한 번에 설정하는 단축 표기법
홈페이지 카드에 padding과 margin을 적용해봅시다
- Box Model: content → padding → border → margin
- padding = 안쪽 여백 (배경색 적용), margin = 바깥 간격 (투명)
- padding: 10px 20px (상하 10, 좌우 20 단축 표기)
2
box-sizing과 단위의 세계
box-sizing: border-box — 이 한 줄이 CSS 레이아웃의 가장 큰 골칫거리를 해결합니다.
같은 width: 300px인데 실제 크기가 다르다?
px만 쓰면 안 되나요? 상황에 맞는 단위가 있습니다
홈페이지 콘텐츠를 가운데 정렬해봅시다
- box-sizing: border-box → width에 padding+border 포함
- 단위: px(고정), rem(상대), %(부모 비율), vh/vw(뷰포트)
- margin: 0 auto → 블록 요소 수평 가운데 정렬
3
카드 UI 만들기
border-radius + box-shadow + padding — 이 조합이 카드 UI의 핵심입니다.
카드 UI는 웹에서 가장 많이 쓰이는 패턴입니다
둥근 모서리와 그림자로 카드에 입체감을 줍니다
이미지, 제목, 설명, 버튼이 있는 완성형 카드를 만들어봅시다
- 카드 UI = 이미지 + 제목 + 설명 + 버튼
- border-radius로 둥근 모서리, box-shadow로 입체 그림자
- overflow: hidden으로 이미지가 카드 밖으로 넘치지 않게
key
핵심 용어 모음
📏
px
고정 크기 (1px = 화면 1점)
📐
rem
루트(html) font-size 기준 배수 (반응형 권장)
📊
%
부모 요소 기준 비율
🖥️
vh / vw
뷰포트 높이/너비의 1% (전체 화면 기준)
⭕
border-radius
모서리를 둥글게 (12px~16px 추천)
🌗
box-shadow
카드 아래에 그림자 — 입체감 부여
✂️
overflow: hidden
카드 밖으로 삐져나오는 이미지를 잘라냄
✨
transition
hover 시 부드러운 변화 효과
퀴즈와 인터랙션으로 더 깊이 학습하세요
play_circle인터랙티브 코스 시작하기