2nd/10_Wiki/Topic_Programming/AI_and_ML/반응형 디자인.md

id, title, category, status, canonical_id, aliases, duplicate_of, source_trust_level, confidence_score, verification_status, tags, raw_sources, last_reinforced, github_commit, tech_stack

id	title	category	status	canonical_id	aliases	duplicate_of	source_trust_level	confidence_score	verification_status	tags	raw_sources	last_reinforced	github_commit	tech_stack
wiki-2026-0508-반응형-디자인	반응형 디자인	10_Wiki/Topics	verified	self	Responsive Design RWD Responsive Web Design	none	A	0.9	applied	css responsive layout media-query container-query		2026-05-10	pending	language framework CSS 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

/* 매 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)

/* 매 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)

.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

<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)

/* 매 column count 자동 — breakpoint 불필요 */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
}

Dynamic viewport height (mobile)

/* 매 100vh 는 mobile address bar 때문에 jump. dvh 가 답 */
.hero { height: 100dvh; } /* dynamic — bar 보일 때 줄어듦 */
.modal { height: 100svh; } /* small — 항상 minimum */

prefers-color-scheme

: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

• 부모: Frontend_Performance
• 변형: Container_Queries · Mobile-First
• 응용: Fluid_Typography · CSS Grid
• Adjacent: Tailwind CSS · 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