feat: complete wikification of War Commander batch 1&2 and final grey dot cleanup

2026-04-27 18:58:22 +09:00
parent 3424166ea2
commit 6b86b0da4c
2706 changed files with 9074 additions and 7273 deletions
@@ -1,4 +1,4 @@
-# [[레이아웃 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].
@@ -21,7 +21,7 @@ Flexbox와 CSS Grid는 구식의 복잡한 위치 지정(float, position 등)

 ## 🔗 Knowledge Connections
 - **Related Topics:** [[CSS 구조 설계 방식]], [[반응형 디자인]]
- **Projects/Contexts:** [[유지보수 가능하게]], [[실무에서 CSS 관리하는 방법]]
+- **Projects/Contexts:** 유지보수 가능하게, [[실무에서 CSS 관리하는 방법]]
 - **Contradictions/Notes:** 소스 [7]에 따르면, 초기에는 Flexbox만으로 전체 웹 페이지 레이아웃을 해결하려 했으나 복잡한 2차원 디자인에서 한계와 코드의 유지보수 문제(래퍼 중첩 등)가 드러났습니다. 이에 따라 현재는 억지로 Flexbox만으로 복잡한 레이아웃을 구현하기보다는 전체 구조는 CSS Grid에 맡기고 세부 정렬은 Flexbox에 맡기는 역할 분담 방식이 필수적인 실무 표준으로 자리 잡았음을 강조합니다 [7, 19, 30].

 ---