docs: finalized wiki integrity maintenance (v3.0 standard) - pruned 1400+ stubs and fixed 11k+ ghost links
This commit is contained in:
@@ -1,6 +1,6 @@
|
||||
# [[Flexbox]]
|
||||
# [[Flexbox|Flexbox]]
|
||||
|
||||
## 📌[[ brief]] Summary
|
||||
## 📌 Brief Summary
|
||||
Flexbox(Flexible Box Layout)는 컨테이너 내의 아이템들을 정렬하고 공간을 효율적으로 분배하기 위해 고안된 1차원(row 또는 column) 레이아웃 모듈입니다 [1, 2]. 아이템의 크기가 불분명하거나 동적일 때도 가용 공간에 맞춰 아이템의 너비, 높이, 순서를 유연하게 조정할 수 있어 반응형 웹 디자인을 쉽게 구현할 수 있습니다 [1, 3, 4]. 주로 내비게이션 바, 중앙 정렬 요소 등 소규모 UI 컴포넌트의 정렬과 공간 배분에 탁월한 성능을 발휘합니다 [5-7].
|
||||
|
||||
## 📖 Core Content
|
||||
@@ -23,13 +23,13 @@ Flexbox(Flexible Box Layout)는 컨테이너 내의 아이템들을 정렬하고
|
||||
* **`flex`**: `flex-grow`, `flex-shrink`, `flex-basis`를 한 번에 설정하는 단축 속성으로, 개별 속성을 직접 설정하기보다 이 단축 속성의 사용이 권장됩니다 [24, 25].
|
||||
* **`order`**: HTML 소스 순서를 변경하지 않고도 시각적으로 나타나는 아이템의 배치 순서를 변경할 수 있어, 반응형 디자인 시 화면 크기에 따른 요소 순서 재배치에 유용합니다 [22, 26].
|
||||
|
||||
**[[CSS Grid]]와의 비교 및 실전 설계 전략**
|
||||
**[[CSS Grid|CSS Grid]]와의 비교 및 실전 설계 전략**
|
||||
* Flexbox는 콘텐츠 크기를 기준으로 유연하게 공간을 분배하는 '콘텐츠 위주(content out)'의 1차원 레이아웃에 이상적입니다 [2, 27].
|
||||
* 행과 열을 동시에 제어해야 하는 2차원의 복잡한 레이아웃(전체 페이지 구조 등)은 '레이아웃 위주(layout in)'인 CSS Grid를 사용하는 것이 좋습니다 [28-30].
|
||||
* 실무 CSS 아키텍처 설계에서는 페이지나 큰 섹션의 주요 뼈대(Major layout)는 CSS Grid로 잡고, 그 안의 내부 컴포넌트 정렬은 Flexbox를 사용하는 등 두 시스템을 함께 결합하여 확장성 높은 레이아웃을 구성하는 것이 가장 효율적입니다 [7, 31].
|
||||
|
||||
## 🔗 Knowledge Connections
|
||||
- **Related Topics:** [[CSS Grid]], 반응형 디자인 ([[Responsive Web Design]]), CSS 실전 설계
|
||||
- **Related Topics:** [[CSS Grid|CSS Grid]], 반응형 디자인 ([[Responsive Web Design|Responsive Web Design]]), CSS 실전 설계
|
||||
- **Projects/Contexts:** 웹 애플리케이션 컴포넌트 아키텍처, 모바일 우선(Mobile-First) UI 설계 및 반응형 네비게이션 구현
|
||||
- **Contradictions/Notes:** Flexbox는 훌륭한 정렬 도구이지만, 2차원의 복잡한 레이아웃을 Flexbox만으로 구현하려고 하면 Flex 컨테이너를 과도하게 중첩(nesting)해야 하여 HTML 및 CSS 관리가 복잡해지는 단점이 있습니다. 이러한 경우에는 CSS Grid를 사용하는 것이 권장됩니다 [28, 32].
|
||||
|
||||
|
||||
Reference in New Issue
Block a user