docs: finalized wiki integrity maintenance (v3.0 standard) - pruned 1400+ stubs and fixed 11k+ ghost links
This commit is contained in:
@@ -1,4 +1,4 @@
|
||||
# [[CSS Media Queries]]
|
||||
# [[CSS Media Queries|CSS Media Queries]]
|
||||
|
||||
## 📌 Brief Summary
|
||||
CSS Media Queries(미디어 쿼리)는 뷰포트 너비, 화면 해상도, 방향 등의 특정 조건에 따라 각기 다른 CSS 스타일을 적용할 수 있게 해주는 규칙이다 [1, 2]. 이는 반응형 웹 디자인의 논리적 토대를 형성하며, 다양한 디바이스에 맞춰 단일 코드베이스로 레이아웃을 유연하게 조정할 수 있도록 돕는다 [1-3]. 또한, 특정 조건에서만 필요한 스타일을 분리하여 브라우저의 초기 렌더링 차단 현상을 방지하는 등 웹 성능 최적화에도 필수적인 역할을 한다 [4, 5].
|
||||
@@ -11,8 +11,8 @@ CSS Media Queries(미디어 쿼리)는 뷰포트 너비, 화면 해상도, 방
|
||||
- **뷰포트 한계와 컴포넌트 중심 설계로의 진화:** 뷰포트 기반 미디어 쿼리는 화면 전체 크기에 반응할 뿐, 컴포넌트가 실제로 속해 있는 부모 컨테이너의 가용 공간을 인식하지 못하는 근본적인 한계를 지닌다 [12]. 따라서 디자인 시스템이나 모듈화된 설계를 위해, 2026년 현재는 부모 컨테이너의 크기에 맞춰 컴포넌트가 스스로 형태를 변경하는 컨테이너 쿼리(Container Queries)와 미디어 쿼리를 병행해서 사용하는 것이 표준으로 자리 잡았다 [12-14].
|
||||
|
||||
## 🔗 Knowledge Connections
|
||||
- **Related Topics:** [[반응형 디자인]], [[Container Queries]], [[Mobile-First Design]], [[CSS Performance Optimization]]
|
||||
- **Projects/Contexts:** [[실무에서 CSS 관리하는 방법]], [[디자인 시스템 개념]]
|
||||
- **Related Topics:** [[반응형 디자인|반응형 디자인]], [[Container Queries|Container Queries]], [[Mobile-First Design|Mobile-First Design]], [[CSS Performance Optimization|CSS Performance Optimization]]
|
||||
- **Projects/Contexts:** [[실무에서 CSS 관리하는 방법|실무에서 CSS 관리하는 방법]], [[디자인 시스템 개념|디자인 시스템 개념]]
|
||||
- **Contradictions/Notes:** 소스에서는 뷰포트 기반의 미디어 쿼리만으로는 완벽한 재사용 컴포넌트를 만드는 데 제약이 있다고 지적한다. 사이드바나 모달 등 다양한 컨텍스트(공간)에 독립적으로 반응해야 하는 컴포넌트를 설계할 때는 미디어 쿼리보다 컨테이너 쿼리를 사용하는 것이 더 적합하며, 이는 최근 반응형 디자인의 패러다임이 페이지 수준에서 컴포넌트 수준으로 이동했음을 보여준다 [12, 14-16].
|
||||
|
||||
---
|
||||
|
||||
Reference in New Issue
Block a user