docs: finalized wiki integrity maintenance (v3.0 standard) - pruned 1400+ stubs and fixed 11k+ ghost links

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

@@ -1,7 +1,7 @@
-# 레이아웃 [[Flexbox]] / Grid 완전 이해
+# 레이아웃 [[Flexbox|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|CSS Grid]]는 구식의 복잡한 위치 지정(float, position 등) 방식을 대체하여 유연하고 유지보수 가능한 화면을 구성할 수 있게 해주는 모던 CSS 레이아웃 시스템입니다 [1]. Flexbox는 행이나 열 등 하나의 축(1차원)을 기준으로 요소를 정렬하고 공간을 분배하는 '콘텐츠 중심(Content-out)' 설계에 뛰어난 성능을 발휘합니다 [2, 3]. 반면 CSS Grid는 행과 열을 동시에 다루는 2차원 레이아웃 시스템으로, 전체 페이지의 뼈대를 잡는 '레이아웃 중심(Layout-in)' 설계에 최적화되어 있으며, 실무에서는 전체 구조를 Grid로 잡고 내부 요소 정렬에 Flexbox를 결합하여 사용하는 것이 모범 사례로 권장됩니다 [4-7].
 
 ## 📖 Core Content
 
@@ -15,13 +15,13 @@ 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|Synergy]] & Best Practices)**
   * **Grid는 레이아웃용, Flexbox는 정렬용:** "Grid는 레이아웃을 위한 것이고, Flexbox는 정렬을 위한 것이다"라는 점이 실무의 핵심 지침입니다 [7]. 확장 가능한 프론트엔드 아키텍처를 구축하는 엔지니어링 환경에서 두 시스템은 서로 경쟁하는 것이 아니라 상호 보완적으로 작동합니다 [25-27].
   * **최적화된 조합:** 페이지의 헤더, 사이드바, 메인 콘텐츠, 푸터와 같은 거시적인 레이아웃 뼈대(Major layout style)를 CSS Grid로 구축하고, 그 그리드 영역 내부에 들어가는 버튼 그룹, 아이콘, 텍스트 등의 세부 UI 요소들을 Flexbox로 정렬하는 방식이 가장 효율적입니다 [6, 28, 29]. 이 접근법은 불필요한 래퍼 요소의 중첩을 막아 DOM을 가볍게 유지하고 렌더링 성능 최적화 및 유지보수성을 극대화합니다 [6, 19].
 
 ## 🔗 Knowledge Connections
-- **Related Topics:** [[CSS 구조 설계 방식]], [[반응형 디자인]]
-- **Projects/Contexts:** 유지보수 가능하게, [[실무에서 CSS 관리하는 방법]]
+- **Related Topics:** [[CSS 구조 설계 방식|CSS 구조 설계 방식]], [[반응형 디자인|반응형 디자인]]
+- **Projects/Contexts:** 유지보수 가능하게, [[실무에서 CSS 관리하는 방법|실무에서 CSS 관리하는 방법]]
 - **Contradictions/Notes:** 소스 [7]에 따르면, 초기에는 Flexbox만으로 전체 웹 페이지 레이아웃을 해결하려 했으나 복잡한 2차원 디자인에서 한계와 코드의 유지보수 문제(래퍼 중첩 등)가 드러났습니다. 이에 따라 현재는 억지로 Flexbox만으로 복잡한 레이아웃을 구현하기보다는 전체 구조는 CSS Grid에 맡기고 세부 정렬은 Flexbox에 맡기는 역할 분담 방식이 필수적인 실무 표준으로 자리 잡았음을 강조합니다 [7, 19, 30].
 
 ---