통합 요약노트
Ch.6 CSS Grid + 반응형 디자인
Grid 레이아웃, 미디어 쿼리, 반응형 갤러리
이 챕터의 내용
1
Grid — 2차원 레이아웃
CSS Grid — 2차원 격자 레이아웃을 코드 몇 줄로 완성합니다.
행(row)과 열(column)을 동시에 정의합니다
fr 단위와 repeat() 함수로 격자를 간결하게 정의합니다
Grid로 3열 카드 레이아웃을 만들어봅시다
- display: grid → 2차원(행+열) 레이아웃
- grid-template-columns: repeat(3, 1fr) → 3열 균등 분배
- fr 단위 = 남는 공간을 비율로 나누는 Grid 전용 단위
2
반응형이란? — 모바일 퍼스트
@media 쿼리 — 화면 너비에 따라 다른 스타일을 적용하는 반응형 웹의 핵심입니다.
화면 크기에 따라 CSS를 전환합니다
작은 화면부터 설계하고 큰 화면으로 확장합니다
모바일 1열 → 태블릿 2열로 변하는 카드를 만들어봅시다
- viewport 메타 태그 = 모바일 반응형의 필수 전제
- @media (min-width: 768px) → 모바일 퍼스트 방식
- 작은 화면 기본 → 큰 화면에서 열 수 증가
3
프로젝트 갤러리 만들기
auto-fit + minmax() — 반응형 갤러리를 미디어 쿼리 없이도 만들 수 있습니다.
열 수를 직접 지정하지 않고 자동으로 채워지게 합니다
마우스를 올리면 카드가 살짝 떠오르는 효과를 줍니다
auto-fit + minmax로 반응형 갤러리를 완성합시다
- auto-fit + minmax() = 미디어 쿼리 없는 반응형 Grid
- transition으로 hover 시 부드러운 애니메이션
- :hover + transform으로 카드가 떠오르는 효과
key
핵심 용어 모음
🏗️
Grid Container
display: grid를 선언한 부모
🧩
Grid Item
컨테이너의 직계 자식 요소
📏
Grid Line
행/열을 나누는 보이지 않는 선
⬜
Grid Cell
하나의 행×열 칸
🔲
auto-fill
빈 트랙도 유지 (공간이 남으면 빈 열 생성)
📐
auto-fit
빈 트랙을 접음 (아이템이 남은 공간 차지)
↔️
minmax()
최소~최대 크기 범위 지정 (반응형 핵심)
compare_arrows
비교 정리
| 항목 | Flexbox (1차원) | Grid (2차원) |
|---|---|---|
| 배치 방향 | 한 방향(행 또는 열)만 제어 | 행과 열을 동시에 제어 |
| 배치 방식 | 콘텐츠 크기에 따라 유연하게 배치 | 격자 구조를 먼저 정의하고 배치 |
| 적합한 용도 | 내비게이션, 카드 행, 정렬에 적합 | 전체 페이지 레이아웃, 갤러리에 적합 |
퀴즈와 인터랙션으로 더 깊이 학습하세요
play_circle인터랙티브 코스 시작하기