Files

T

Antigravity Agent f8b21af4be Wiki cleanup: error-doc removal, dedup merge, link normalization

10_Wiki/Topics 대규모 정리:
- 오류 캡처/미완성 stub 문서 227개 제거
- 교차폴더 중복 43클러스터 병합 (63파일 → redirect)
- 링크명 정규화: 깨진 링크 수정·redirect 직결·개념 매핑 ~2,400건
- 카테고리 MOC 6개 신규 생성
- Graph 섹션 미해결 related-keyword 링크 10,058건 제거

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

2026-05-20 23:52:15 +09:00

4.8 KiB

Raw Blame History

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

title

반응형 디자인

매 한 줄

"매 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.

매 응용

Mobile-first CSS architecture.
Component-level responsive (card → list 변형).
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

🤖 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

4.8 KiB Raw Blame History