[G1-Sync] Manual knowledge update

10_Wiki/Topics/Frontend_Mastery/반응형 디자인(Responsive Design).md

@@ -1,13 +1,13 @@
 # [[반응형 디자인(Responsive Design)]]
 
-## 📌 Brief Summary
-반응형 웹 디자인(Responsive Web Design)은 유동형 그리드, 유연한 이미지, CSS 미디어 쿼리 등을 사용하여 사용자의 화면 크기나 기기에 맞게 레이아웃, 타이포그래피, 미디어가 유동적으로 적응하도록 인터페이스를 구축하는 기술입니다 [1, 2]. 이를 통해 모바일, 태블릿, 데스크톱용 사이트를 별도로 구축할 필요 없이 단일 코드베이스로 관리할 수 있어 일관된 사용자 경험을 제공하며, 검색 엔진 최적화(SEO)와 성능 지표(Core Web Vitals) 개선에도 필수적인 역할을 합니다 [1-6]. 최근에는 화면 크기(뷰포트) 기준에서 벗어나 컨테이너 쿼리(Container Queries)와 `clamp()` 함수를 활용하여 컴포넌트 자체의 문맥에 맞게 반응하는 모듈식 설계로 진화하고 있습니다 [2, 3, 7, 8].
+## 📌[[ brief]] Summary
+반응형 웹 디자인([[Responsive Web Design]])은 유동형 그리드, 유연한 이미지, CSS 미디어 쿼리 등을 사용하여 사용자의 화면 크기나 기기에 맞게 레이아웃, 타이포그래피, 미디어가 유동적으로 적응하도록 인터페이스를 구축하는 기술입니다 [1, 2]. 이를 통해 모바일, 태블릿, 데스크톱용 사이트를 별도로 구축할 필요 없이 단일 코드베이스로 관리할 수 있어 일관된 사용자 경험을 제공하며, 검색 엔진 최적화(SEO)와 성능 지표([[Core Web Vitals]]) 개선에도 필수적인 역할을 합니다 [1-6]. 최근에는 화면 크기(뷰포트) 기준에서 벗어나 컨테이너 쿼리([[Container Queries]])와 `clamp()` 함수를 활용하여 컴포넌트 자체의 문맥에 맞게 반응하는 모듈식 설계로 진화하고 있습니다 [2, 3, 7, 8].
 
 ## 📖 Core Content
-* **핵심 원칙 및 최신 표준 (Core Principles & Modern Standards)**
-  * **유동형 그리드 (Fluid Grids):** 고정된 픽셀 대신 비율(%)이나 `fr` 단위와 같은 상대적 단위를 사용하여 화면 변화에 따라 자연스럽게 크기가 조절되는 그리드를 구축합니다 [9, 10]. CSS Flexbox와 Grid를 결합하면 수많은 중단점을 관리할 필요 없이 유연한 레이아웃을 구현할 수 있습니다 [9, 11, 12].
+* **핵심 원칙 및 최신 표준 (Core [[Principles]] & Modern Standards)**
+  * **유동형 그리드 (Fluid Grids):** 고정된 픽셀 대신 비율(%)이나 `fr` 단위와 같은 상대적 단위를 사용하여 화면 변화에 따라 자연스럽게 크기가 조절되는 그리드를 구축합니다 [9, 10]. CSS [[Flexbox]]와 Grid를 결합하면 수많은 중단점을 관리할 필요 없이 유연한 레이아웃을 구현할 수 있습니다 [9, 11, 12].
   * **컨테이너 쿼리 (Container Queries):** 2026년 기준 반응형 설계의 핵심 표준으로, 뷰포트(브라우저 창) 전체 크기가 아닌 부모 컨테이너의 가용 너비에 따라 컴포넌트의 스타일이 변경되도록 합니다 [7, 13, 14]. 이를 통해 페이지 레이아웃 중심에서 진정한 컴포넌트 중심의 설계로 전환됩니다 [7, 15-17].
-  * **유동적 타이포그래피 (Fluid Typography):** `clamp()` 함수 등을 사용하여 폰트 크기가 최소값과 최대값 사이에서 화면 크기에 비례해 부드럽게 조정되도록 합니다 [18-22]. 중단점마다 글꼴 크기가 갑작스럽게 변하는 현상을 방지합니다 [18, 22].
+  * **유동적 타이포그래피 ([[Fluid Typography]]):** `clamp()` 함수 등을 사용하여 폰트 크기가 최소값과 최대값 사이에서 화면 크기에 비례해 부드럽게 조정되도록 합니다 [18-22]. 중단점마다 글꼴 크기가 갑작스럽게 변하는 현상을 방지합니다 [18, 22].
   * **미디어 쿼리와 유연한 미디어:** 미디어 쿼리를 통해 특정 뷰포트 조건에서 다른 CSS 규칙을 적용하며, 중단점은 특정 기기가 아닌 콘텐츠가 깨지는 지점을 기준으로 설정해야 합니다 [23-25]. 또한 이미지와 비디오는 `max-width: 100%; height: auto;` 등을 적용해 컨테이너를 벗어나지 않게 관리합니다 [18, 26].
 
 * **반응형 디자인 베스트 프랙티스 (Best Practices)**