docs(10_Wiki): 위키 전체 재구성 — Topic_* 폴더를 4개 카테고리로 통합 + 대규모 중복 제거
Topic_Agent/Topic_Blog/Topics/Topics_Biz/Topics_Meeting/Topics_Rag의 마크다운 지식 문서를 Topic_General/Topic_Programming/Topic_Graphic/Topic_Business 4개 카테고리로 재분류. - 중복 제거: frontmatter의 status:duplicate/merged + duplicate_of/redirect_to 필드로 자기 자신을 중복으로 선언한 리다이렉트 stub 1032개 제거, 완전 동일 내용 파일 472개 제거, 동일 파일명·다른 내용 충돌 시 더 큰(완전한) 버전만 유지(162개 제거) — 총 1639개 중복 제거. - 분류: 폴더 단위로 명확한 항목(AI_and_ML/Coding/Architecture 등 → Programming, Comfyui/Visual_Effects → Graphic, Topics_Biz/Topics_Meeting/사업 등 → Business, Poetic_Blog_Writing/창의성/Game_Design 등 → General)은 폴더 우선순위로, 나머지 혼재 폴더(Topic_Agent/Topic_Blog/Topics 루트/Thinking & Reasoning/Other/UI_UX_Assets)는 title/tags 키워드 스코어링으로 파일 단위 분류(불명확한 경우 General로 폴백). 원본 폴더명은 "From_*" 서브폴더로 보존해 추적 가능성 유지. - 최종 배치: Programming 2784 / General 1608 / Graphic 285 / Business 249 = 4926개 문서. - 에이전트 운영 상태(.astra/.agent/.obsidian/sessions/memory/_company/docs/lessons/_shared/src)는 지식 콘텐츠가 아니므로 재분류 대상에서 제외하고 원위치 유지. - Topics/Topic_email(상위 보호 폴더 Topic_email과 파일명 100% 중복) 삭제 — 보호 폴더 자체는 미변경. - 완전히 비게 된 Topic_Agent/Topic_Blog/Topics_Biz/Topics_Rag 폴더 제거.
This commit is contained in:
Antigravity Agent
@@ -0,0 +1,154 @@
|
||||
---
|
||||
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
|
||||
- 부모: [[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 |
|
||||
Reference in New Issue
Block a user