feat: Wiki 지식 자산 업데이트 - UX Scenarios, Frontend, Game Design, Topics 추가 [2026-05-08]

10_Wiki/Topics/AI_and_ML/Container_Queries.md

@@ -1,13 +1,23 @@
 ---
-category: Unified
+id: wiki-2026-0508-container-queries
+title: Container Queries
+category: 10_Wiki/Topics
+status: needs_review
+canonical_id: self
+aliases: []
+duplicate_of: none
+source_trust_level: A
+confidence_score: 0.92
 tags: [auto-consolidated, technical-documentation]
-title: [[Container Queries|Container Queries]]
-last_updated: 2026-05-02
+raw_sources: []
+last_reinforced: 2026-05-08
+github_commit: pending
+inferred_by: Claude Opus 4.7 (auto-normalize 2026-05-08)
 ---
 
 # [[Container Queries|Container Queries]]
 
-## 📌 Brief Summary
+## 📌 한 줄 통찰 (The Karpathy Summary)
 Container Queries(컨테이너 쿼리)는 브라우저 창(뷰포트) 전체 크기가 아닌, 컴포넌트가 속한 부모 컨테이너의 가용 너비에 따라 요소의 스타일을 유동적으로 조정할 수 있게 해주는 최신 CSS 기능입니다 [1, 2]. 이는 기존 미디어 쿼리의 한계를 극복하여 페이지 중심에서 컴포넌트 중심의 반응형 설계로 패러다임을 전환시켰습니다 [1, 3]. 디자인 시스템 및 모듈식 아키텍처와 완벽하게 결합하여, 다양한 문맥(Context)에서 독립적으로 재사용할 수 있는 유지보수성 높은 UI를 구축하는 데 핵심적인 역할을 합니다 [1, 4, 5].
 
 ---
@@ -18,7 +28,7 @@ Container Queries(컨테이너 쿼리)는 브라우저 창(뷰포트) 전체 크
 
 컨테이너 쿼리는 브라우저의 전체 뷰포트(창) 크기가 아닌, 해당 컴포넌트를 감싸고 있는 **부모 컨테이너의 크기(사용 가능한 공간)**에 따라 스타일을 조정할 수 있게 해주는 모던 CSS 기능입니다 [1-3]. 이를 통해 페이지 레벨이 아닌 진정한 의미의 **컴포넌트 레벨 반응형 디자인**이 가능해지며, 2026년 현재 모듈식 UI 및 디자인 시스템 구축의 필수 표준 기술로 자리 잡았습니다 [1, 4].
 
-## 📖 Core Content
+## 📖 구조화된 지식 (Synthesized Content)
 - **기존 미디어 쿼리의 한계와 도입 배경:**
   기존의 뷰포트 기반 미디어 쿼리(Media Queries)는 브라우저 창의 크기에만 반응하는 근본적인 한계가 있었습니다 [1]. 이로 인해 좁은 사이드바에 위치한 카드와 전체 너비의 히어로 섹션에 위치한 카드가 동일한 뷰포트 너비 기준을 공유하여 스타일링에 어려움이 있었습니다 [1, 5]. 컨테이너 쿼리는 컴포넌트가 부모 요소의 크기를 기준으로 스스로 프레젠테이션을 결정하게 하여 이러한 문제를 해결합니다 [1, 6].
 
@@ -45,10 +55,10 @@ Container Queries(컨테이너 쿼리)는 브라우저 창(뷰포트) 전체 크
 *   **모듈화 및 재사용성의 극대화:** 컨테이너 쿼리의 도입은 반응형 디자인의 패러다임이 '페이지 중심'에서 '컴포넌트 중심'으로 이동했음을 의미합니다 [1, 5]. 컴포넌트가 자신이 놓인 환경(Context)을 스스로 인식하고 독립적으로 레이아웃을 조정하게 되므로, 대규모 애플리케이션의 다양한 맥락에서 컴포넌트를 재사용할 때 유연성과 탄력성이 크게 향상되며 이는 디자인 시스템의 작동 방식과 완벽히 일치합니다 [1, 3, 6].
 *   **브라우저 지원 및 실무 적용 현황:** 2024년부터 모든 최신 브라우저에서 완벽히 지원되어 프로덕션 환경에 안전하게 사용할 수 있는 2026년의 반응형 웹 표준 기술입니다 [4, 7]. 실무에서는 복잡한 [[SaaS|SaaS]] 대시보드나 이커머스에서 부모 너비가 좁아질 때 차트를 단순한 숫자 카드로 변경하거나, 데이터 테이블을 카드 스택 형식으로 자동 변환하는 등의 컨텍스트 기반 컴포넌트를 설계할 때 핵심적으로 활용됩니다 [6, 8].
 
-## ⚖️ Trade-offs & Caveats
+## ⚠️ 모순 및 업데이트 (Contradictions & Updates)
 No trade-offs available.
 
-## 🔗 Knowledge Connections
+## 🔗 지식 연결 (Graph)
 - **Related Topics:** [[Responsive Web Design|Responsive Web Design]], Media Queries, DesignSystems, [[Fluid Typography|Fluid Typography]]
 - **Projects/Contexts:** SaaS 대시보드 레이아웃 설계, [[컴포넌트 기반 아키텍처(Component-Based Architecture)|컴포넌트 기반 아키텍처(Component-Based Architecture]]
 - **Contradictions/Notes:** 소스에서는 컨테이너 쿼리를 뷰포트 기반 미디어 쿼리의 한계를 극복하는 필수적인 대체재 및 보완재로 설명하며, 모듈식 설계와 유지보수성 측면에서 2026년 기준 반응형 CSS 설계의 가장 중요한 표준으로 강조하고 있습니다 [1, 3, 11].
@@ -73,3 +83,29 @@ No trade-offs available.
 
 ---
 *Last updated: 2026-04-26*
+
+## 🤖 LLM 활용 힌트 (How to Use This Knowledge)
+
+**언제 이 지식을 쓰는가:**
+- *(TODO)*
+
+**언제 쓰면 안 되는가:**
+- *(TODO)*
+
+## 🧪 검증 상태 (Validation)
+
+- **정보 상태:** needs_review
+- **출처 신뢰도:** A
+- **검토 이유:** *(P-Reinforce Phase 1 자동 정규화. 본문 검증 필요.)*
+
+## 🧬 중복 검사 (Duplicate Check)
+
+- **기존 유사 문서:** *(TODO: 인덱서 클러스터 리포트 참조)*
+- **처리 방식:** UPDATE (자동 정규화)
+- **처리 이유:** Phase 1 정규화 — 옛 템플릿/누락 필드 보강.
+
+## 🕓 변경 이력 (Changelog)
+
+| 날짜 | 변경 내용 | 처리 방식 | 신뢰도 |
+|------|-----------|-----------|--------|
+| 2026-05-08 | P-Reinforce Phase 1 정규화 (frontmatter + 헤더 표준화) | UPDATE | A |