Antigravity Agent
155 lines
4.9 KiB
Markdown
155 lines
4.9 KiB
Markdown
---
|
|
id: wiki-2026-0508-반응형-디자인
|
|
title: 반응형 디자인
|
|
category: 10_Wiki/Topics
|
|
status: verified
|
|
canonical_id: self
|
|
aliases: [Responsive Design, RWD, Responsive Web Design]
|
|
duplicate_of: none
|
|
source_trust_level: A
|
|
confidence_score: 0.9
|
|
verification_status: applied
|
|
tags: [css, responsive, layout, media-query, container-query]
|
|
raw_sources: []
|
|
last_reinforced: 2026-05-10
|
|
github_commit: pending
|
|
tech_stack:
|
|
language: CSS
|
|
framework: Web
|
|
---
|
|
|
|
# 반응형 디자인
|
|
|
|
## 매 한 줄
|
|
> **"매 single codebase 가 phone / tablet / laptop / TV 까지 fluidly 적응한다"**. 2010년 Ethan Marcotte 의 *Responsive Web Design* article 에서 기원, 매 fluid grid + flexible media + media query 의 3 pillar. 2026 modern stack 에서는 매 container query + `clamp()` + `dvh` unit + logical property 가 매 추가.
|
|
|
|
## 매 핵심
|
|
|
|
### 매 3 pillar (classic 2010)
|
|
- **Fluid grid**: % / fr 단위, 매 fixed px 안 씀.
|
|
- **Flexible media**: `max-width: 100%`, `<picture>`, `srcset`.
|
|
- **Media query**: `@media (min-width: 768px)` breakpoint.
|
|
|
|
### 매 modern additions (2024~)
|
|
- **Container query** `@container (min-width: 400px)`: 매 component-level responsive.
|
|
- **`clamp(min, preferred, max)`**: 매 fluid typography / spacing.
|
|
- **`dvh` / `svh` / `lvh`**: dynamic viewport height (mobile address bar 대응).
|
|
- **Logical property** `inline-size` / `block-size` / `margin-inline`: RTL / vertical writing 대응.
|
|
- **`@media (prefers-color-scheme)` / `(prefers-reduced-motion)`**: user preference adaptation.
|
|
|
|
### 매 응용
|
|
1. Mobile-first CSS architecture.
|
|
2. Component-level responsive (card → list 변형).
|
|
3. Adaptive image delivery (`srcset` + `sizes`).
|
|
|
|
## 💻 패턴
|
|
|
|
### Mobile-first media query
|
|
```css
|
|
/* 매 base = mobile */
|
|
.card { padding: 12px; font-size: 14px; }
|
|
|
|
/* 매 tablet+ */
|
|
@media (min-width: 768px) {
|
|
.card { padding: 24px; font-size: 16px; }
|
|
}
|
|
|
|
/* 매 desktop+ */
|
|
@media (min-width: 1280px) {
|
|
.card { padding: 32px; font-size: 18px; }
|
|
}
|
|
```
|
|
|
|
### Fluid typography (clamp)
|
|
```css
|
|
/* 매 320px → 14px, 1280px → 22px, 사이는 linearly */
|
|
h1 { font-size: clamp(1.4rem, 1rem + 2vw, 2.2rem); }
|
|
.container { padding-inline: clamp(16px, 4vw, 64px); }
|
|
```
|
|
|
|
### Container query (component-level)
|
|
```css
|
|
.card-container { container-type: inline-size; }
|
|
|
|
.card { display: block; }
|
|
|
|
@container (min-width: 400px) {
|
|
.card { display: grid; grid-template-columns: 120px 1fr; gap: 16px; }
|
|
}
|
|
```
|
|
|
|
### Responsive image with srcset
|
|
```html
|
|
<picture>
|
|
<source media="(min-width: 1280px)" srcset="hero-1920.webp" />
|
|
<source media="(min-width: 768px)" srcset="hero-1024.webp" />
|
|
<img src="hero-640.webp"
|
|
srcset="hero-640.webp 640w, hero-1024.webp 1024w, hero-1920.webp 1920w"
|
|
sizes="(min-width: 768px) 50vw, 100vw"
|
|
alt="hero" loading="lazy" />
|
|
</picture>
|
|
```
|
|
|
|
### CSS Grid auto-fit (zero-media-query)
|
|
```css
|
|
/* 매 column count 자동 — breakpoint 불필요 */
|
|
.grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
|
|
gap: 16px;
|
|
}
|
|
```
|
|
|
|
### Dynamic viewport height (mobile)
|
|
```css
|
|
/* 매 100vh 는 mobile address bar 때문에 jump. dvh 가 답 */
|
|
.hero { height: 100dvh; } /* dynamic — bar 보일 때 줄어듦 */
|
|
.modal { height: 100svh; } /* small — 항상 minimum */
|
|
```
|
|
|
|
### prefers-color-scheme
|
|
```css
|
|
:root { --bg: #fff; --fg: #000; }
|
|
@media (prefers-color-scheme: dark) {
|
|
:root { --bg: #0a0a0a; --fg: #fafafa; }
|
|
}
|
|
body { background: var(--bg); color: var(--fg); }
|
|
```
|
|
|
|
## 매 결정 기준
|
|
| 상황 | Approach |
|
|
|---|---|
|
|
| 단순 page-level layout | media query (mobile-first) |
|
|
| component reuse 다양한 context | container query |
|
|
| typography / spacing scale | `clamp()` |
|
|
| grid column count 자동 | `repeat(auto-fit, minmax(...))` |
|
|
| mobile full-height | `dvh` (not `vh`) |
|
|
|
|
**기본값**: 매 mobile-first + `clamp()` + container query 조합.
|
|
|
|
## 🔗 Graph
|
|
- 부모: [[CSS_Layout]] · [[Frontend_Performance]]
|
|
- 변형: [[Container_Queries]] · [[Adaptive_Design]] · [[Mobile-First]]
|
|
- 응용: [[Responsive_Images]] · [[Fluid_Typography]] · [[CSS_Grid]]
|
|
- Adjacent: [[Tailwind_CSS]] · [[Logical_Properties]] · [[Dark_Mode]]
|
|
|
|
## 🤖 LLM 활용
|
|
**언제**: cross-device CSS / layout, mobile/tablet/desktop adaptation, fluid typography 설계.
|
|
**언제 X**: print-only stylesheet, native mobile (그건 platform layout system).
|
|
|
|
## ❌ 안티패턴
|
|
- **`100vh` 그대로 mobile 사용**: 매 address bar bounce. `dvh` 사용.
|
|
- **fixed pixel breakpoint 만 사용**: 매 device-class 잡기 어려움. content-driven breakpoint 권장.
|
|
- **media query 만 사용**: 매 component reuse 시 context-blind. container query 필요.
|
|
- **`!important` 로 mobile override**: 매 specificity hell.
|
|
|
|
## 🧪 검증 / 중복
|
|
- Verified (Ethan Marcotte 원 article, MDN container query, web.dev responsive design guide).
|
|
- 신뢰도 A.
|
|
|
|
## 🕓 Changelog
|
|
| 날짜 | 변경 |
|
|
|---|---|
|
|
| 2026-05-08 | Phase 1 |
|
|
| 2026-05-10 | Manual cleanup — RWD 3 pillars + 2024+ container query / clamp / dvh patterns |
|