[G1-Sync] Manual knowledge update

10_Wiki/Topics/Frontend_Mastery/레이아웃 Flexbox - Grid 완전 이해.md

@@ -1,7 +1,7 @@
-# 레이아웃 Flexbox / Grid 완전 이해
+# 레이아웃 [[Flexbox]] / Grid 완전 이해
 
-## 📌 Brief Summary
-Flexbox와 CSS Grid는 구식의 복잡한 위치 지정(float, position 등) 방식을 대체하여 유연하고 유지보수 가능한 화면을 구성할 수 있게 해주는 모던 CSS 레이아웃 시스템입니다 [1]. Flexbox는 행이나 열 등 하나의 축(1차원)을 기준으로 요소를 정렬하고 공간을 분배하는 '콘텐츠 중심(Content-out)' 설계에 뛰어난 성능을 발휘합니다 [2, 3]. 반면 CSS Grid는 행과 열을 동시에 다루는 2차원 레이아웃 시스템으로, 전체 페이지의 뼈대를 잡는 '레이아웃 중심(Layout-in)' 설계에 최적화되어 있으며, 실무에서는 전체 구조를 Grid로 잡고 내부 요소 정렬에 Flexbox를 결합하여 사용하는 것이 모범 사례로 권장됩니다 [4-7].
+## 📌[[ brief]] Summary
+Flexbox와 [[CSS Grid]]는 구식의 복잡한 위치 지정(float, position 등) 방식을 대체하여 유연하고 유지보수 가능한 화면을 구성할 수 있게 해주는 모던 CSS 레이아웃 시스템입니다 [1]. Flexbox는 행이나 열 등 하나의 축(1차원)을 기준으로 요소를 정렬하고 공간을 분배하는 '콘텐츠 중심(Content-out)' 설계에 뛰어난 성능을 발휘합니다 [2, 3]. 반면 CSS Grid는 행과 열을 동시에 다루는 2차원 레이아웃 시스템으로, 전체 페이지의 뼈대를 잡는 '레이아웃 중심(Layout-in)' 설계에 최적화되어 있으며, 실무에서는 전체 구조를 Grid로 잡고 내부 요소 정렬에 Flexbox를 결합하여 사용하는 것이 모범 사례로 권장됩니다 [4-7].
 
 ## 📖 Core Content
 
@@ -15,7 +15,7 @@ Flexbox와 CSS Grid는 구식의 복잡한 위치 지정(float, position 등)
   * **레이아웃 중심(Layout-in) 설계:** Grid는 엄격한 그리드(행과 열의 틀)를 먼저 정의하고, 그 특정 셀(Cell)이나 영역에 아이템을 배치하는 방식입니다 [5]. 
   * **정밀한 제어와 반응형 최적화:** 요소들을 겹치게 하거나(Overlap) 특정 위치에 고정하는 작업이 수월하며 [18, 19], 여백을 제어하는 `grid-gap` (또는 `gap`)을 지원합니다 [20, 21]. 특히 `fr` 단위와 `minmax()`, `auto-fill` / `auto-fit`을 결합하면 별도의 복잡한 미디어 쿼리 없이도 화면 폭에 맞춰 열의 개수가 동적으로 조절되는 유연한 트랙(Track)을 구현할 수 있습니다 [22-24].
 
-* **Flexbox와 CSS Grid의 실무적 결합 (Synergy & Best Practices)**
+* **Flexbox와 CSS Grid의 실무적 결합 ([[Synergy]] & Best Practices)**
   * **Grid는 레이아웃용, Flexbox는 정렬용:** "Grid는 레이아웃을 위한 것이고, Flexbox는 정렬을 위한 것이다"라는 점이 실무의 핵심 지침입니다 [7]. 확장 가능한 프론트엔드 아키텍처를 구축하는 엔지니어링 환경에서 두 시스템은 서로 경쟁하는 것이 아니라 상호 보완적으로 작동합니다 [25-27].
   * **최적화된 조합:** 페이지의 헤더, 사이드바, 메인 콘텐츠, 푸터와 같은 거시적인 레이아웃 뼈대(Major layout style)를 CSS Grid로 구축하고, 그 그리드 영역 내부에 들어가는 버튼 그룹, 아이콘, 텍스트 등의 세부 UI 요소들을 Flexbox로 정렬하는 방식이 가장 효율적입니다 [6, 28, 29]. 이 접근법은 불필요한 래퍼 요소의 중첩을 막아 DOM을 가볍게 유지하고 렌더링 성능 최적화 및 유지보수성을 극대화합니다 [6, 19].