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 Container Queries]]
|
||||
# [[CSS Container Queries|CSS Container Queries]]
|
||||
|
||||
## 📌 Brief Summary
|
||||
CSS Container Queries(컨테이너 쿼리)는 전체 뷰포트(브라우저 창)의 크기가 아닌, 컴포넌트가 속한 부모 컨테이너의 가용 공간을 기준으로 스타일과 레이아웃을 조정하는 강력한 CSS 기능입니다 [1-3]. 이는 좁은 사이드바에 위치한 카드와 넓은 메인 화면에 위치한 카드가 동일한 뷰포트 너비 환경에서도 각기 다른 형태를 가져야 하는 기존 미디어 쿼리(Media Queries)의 근본적인 한계를 해결해 줍니다 [1, 4]. 결과적으로 웹 디자인의 패러다임을 페이지 수준에서 컴포넌트 수준으로 전환시키며, 2026년 기준 모듈식 반응형 디자인 및 디자인 시스템 구축을 위한 필수적인 표준 기술로 자리 잡았습니다 [1, 5, 6].
|
||||
@@ -17,8 +17,8 @@ CSS Container Queries(컨테이너 쿼리)는 전체 뷰포트(브라우저 창)
|
||||
과거에는 실험적인 고급 기술이었으나 2024년 이후 모든 최신 브라우저에서 온전히 지원되며 프로덕션 환경에서 안전하게 사용할 수 있습니다 [1]. 2026년 현재, 이커머스의 다중 패널 레이아웃이나 공간 제약이 많은 SaaS 대시보드에서 데이터 테이블을 카드 스택으로 유연하게 변환하는 등, 자바스크립트에 의존하지 않고도 컴포넌트 수준의 복잡한 반응형 동작을 처리하는 기본 관행(Default practice)이 되었습니다 [5, 7, 13-15].
|
||||
|
||||
## 🔗 Knowledge Connections
|
||||
- **Related Topics:** [[미디어 쿼리 (Media Queries)]], [[반응형 웹 디자인 (Responsive Web Design)]], [[디자인 시스템 (Design Systems)]], [[모듈식 컴포넌트 (Modular Components)]]
|
||||
- **Projects/Contexts:** [[SaaS 대시보드 및 이커머스 레이아웃 구축]], [[가변 타이포그래피 (Fluid Typography)]]
|
||||
- **Related Topics:** [[미디어 쿼리 (Media Queries)|미디어 쿼리 (Media Queries)]], [[반응형 웹 디자인 (Responsive Web Design)|반응형 웹 디자인 (Responsive Web Design)]], [[디자인 시스템 (Design Systems)|디자인 시스템 (Design Systems)]], [[모듈식 컴포넌트 (Modular Components)|모듈식 컴포넌트 (Modular Components)]]
|
||||
- **Projects/Contexts:** [[SaaS 대시보드 및 이커머스 레이아웃 구축|SaaS 대시보드 및 이커머스 레이아웃 구축]], [[가변 타이포그래피 (Fluid Typography)|가변 타이포그래피 (Fluid Typography)]]
|
||||
- **Contradictions/Notes:** 컨테이너 쿼리는 미디어 쿼리를 완전히 대체하는 것이 아닙니다. 미디어 쿼리가 디바이스나 뷰포트 너비에 대응하는 전역적(페이지 수준) 레이아웃을 관리한다면, 컨테이너 쿼리는 "뷰포트 중심에서 컴포넌트 중심"으로 관점을 전환하여 개별 요소 내부의 지역적인 공간 적응을 전담함으로써 상호 보완적으로 작동합니다 [1, 3, 6].
|
||||
|
||||
---
|
||||
|
||||
Reference in New Issue
Block a user