feat: Wiki 지식 자산 업데이트 - UX Scenarios, Frontend, Game Design, Topics 추가 [2026-05-08]
This commit is contained in:
@@ -1,10 +1,29 @@
|
||||
---
|
||||
id: wiki-2026-0508-레이아웃-flexbox-grid-완전-이해
|
||||
title: 레이아웃 Flexbox Grid 완전 이해
|
||||
category: 10_Wiki/Topics
|
||||
status: needs_review
|
||||
canonical_id: self
|
||||
aliases: []
|
||||
duplicate_of: none
|
||||
source_trust_level: A
|
||||
confidence_score: 0.92
|
||||
tags: [uncategorized]
|
||||
raw_sources: []
|
||||
last_reinforced: 2026-05-08
|
||||
github_commit: pending
|
||||
inferred_by: Claude Opus 4.7 (auto-normalize 2026-05-08)
|
||||
tech_stack:
|
||||
language: unspecified
|
||||
framework: unspecified
|
||||
---
|
||||
|
||||
# 레이아웃 [[Flexbox|Flexbox]] / Grid 완전 이해
|
||||
|
||||
## 📌 Brief Summary
|
||||
## 📌 한 줄 통찰 (The Karpathy 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
|
||||
|
||||
## 📖 구조화된 지식 (Synthesized Content)
|
||||
* **CSS Flexbox의 역할과 특징 (1차원 레이아웃)**
|
||||
* **목적과 방향성:** Flexbox는 단일 차원(가로 방향의 행 또는 세로 방향의 열)을 따라 아이템을 배치하는 데 특화된 레이아웃 모듈입니다 [2, 8]. 컴포넌트 내부의 네비게이션 바, 요소의 중앙 정렬 등 소규모 레이아웃에 이상적입니다 [9].
|
||||
* **콘텐츠 중심(Content-out) 설계:** Flexbox는 내부에 담긴 콘텐츠의 크기와 가용 공간에 따라 아이템의 크기가 유연하게 늘어나거나(`flex-grow`) 줄어드는(`flex-shrink`) 특징을 가집니다 [3, 10].
|
||||
@@ -19,10 +38,64 @@ Flexbox와 [[CSS Grid|CSS Grid]]는 구식의 복잡한 위치 지정(float, pos
|
||||
* **Grid는 레이아웃용, Flexbox는 정렬용:** "Grid는 레이아웃을 위한 것이고, Flexbox는 정렬을 위한 것이다"라는 점이 실무의 핵심 지침입니다 [7]. 확장 가능한 프론트엔드 아키텍처를 구축하는 엔지니어링 환경에서 두 시스템은 서로 경쟁하는 것이 아니라 상호 보완적으로 작동합니다 [25-27].
|
||||
* **최적화된 조합:** 페이지의 헤더, 사이드바, 메인 콘텐츠, 푸터와 같은 거시적인 레이아웃 뼈대(Major layout style)를 CSS Grid로 구축하고, 그 그리드 영역 내부에 들어가는 버튼 그룹, 아이콘, 텍스트 등의 세부 UI 요소들을 Flexbox로 정렬하는 방식이 가장 효율적입니다 [6, 28, 29]. 이 접근법은 불필요한 래퍼 요소의 중첩을 막아 DOM을 가볍게 유지하고 렌더링 성능 최적화 및 유지보수성을 극대화합니다 [6, 19].
|
||||
|
||||
## 🔗 Knowledge Connections
|
||||
## 🔗 지식 연결 (Graph)
|
||||
- **Related Topics:** [[CSS 구조 설계 방식|CSS 구조 설계 방식]], [[반응형 디자인|반응형 디자인]]
|
||||
- **Projects/Contexts:** 유지보수 가능하게, [[실무에서 CSS 관리하는 방법|실무에서 CSS 관리하는 방법]]
|
||||
- **Contradictions/Notes:** 소스 [7]에 따르면, 초기에는 Flexbox만으로 전체 웹 페이지 레이아웃을 해결하려 했으나 복잡한 2차원 디자인에서 한계와 코드의 유지보수 문제(래퍼 중첩 등)가 드러났습니다. 이에 따라 현재는 억지로 Flexbox만으로 복잡한 레이아웃을 구현하기보다는 전체 구조는 CSS Grid에 맡기고 세부 정렬은 Flexbox에 맡기는 역할 분담 방식이 필수적인 실무 표준으로 자리 잡았음을 강조합니다 [7, 19, 30].
|
||||
|
||||
---
|
||||
*Last updated: 2026-04-26*
|
||||
*Last updated: 2026-04-26*
|
||||
|
||||
## 🤖 LLM 활용 힌트 (How to Use This Knowledge)
|
||||
|
||||
**언제 이 지식을 쓰는가:**
|
||||
- *(TODO)*
|
||||
|
||||
**언제 쓰면 안 되는가:**
|
||||
- *(TODO)*
|
||||
|
||||
## 🧪 검증 상태 (Validation)
|
||||
|
||||
- **정보 상태:** needs_review
|
||||
- **출처 신뢰도:** A
|
||||
- **검토 이유:** *(P-Reinforce Phase 1 자동 정규화. 본문 검증 필요.)*
|
||||
|
||||
## 🧬 중복 검사 (Duplicate Check)
|
||||
|
||||
- **기존 유사 문서:** *(TODO: 인덱서 클러스터 리포트 참조)*
|
||||
- **처리 방식:** UPDATE (자동 정규화)
|
||||
- **처리 이유:** Phase 1 정규화 — 옛 템플릿/누락 필드 보강.
|
||||
|
||||
## ⚠️ 모순 및 업데이트 (Contradictions & Updates)
|
||||
|
||||
- **과거 데이터와의 충돌:** 없음
|
||||
- **정책 변화:** 없음
|
||||
|
||||
## 🕓 변경 이력 (Changelog)
|
||||
|
||||
| 날짜 | 변경 내용 | 처리 방식 | 신뢰도 |
|
||||
|------|-----------|-----------|--------|
|
||||
| 2026-05-08 | P-Reinforce Phase 1 정규화 (frontmatter + 헤더 표준화) | UPDATE | A |
|
||||
|
||||
## 💻 코드 패턴 (Code Patterns)
|
||||
|
||||
**패턴 1:** *(TODO: 이 프로젝트 컨벤션 반영한 구조 스켈레톤)*
|
||||
|
||||
```text
|
||||
# TODO
|
||||
```
|
||||
|
||||
## 🤔 의사결정 기준 (Decision Criteria)
|
||||
|
||||
**선택 A를 써야 할 때:**
|
||||
- *(TODO)*
|
||||
|
||||
**선택 B를 써야 할 때:**
|
||||
- *(TODO)*
|
||||
|
||||
**기본값:**
|
||||
> *(TODO)*
|
||||
|
||||
## ❌ 안티패턴 (Anti-Patterns)
|
||||
|
||||
- **[안티패턴]:** *(TODO: 무엇을 하면 안 되는가 + 이유 + 대신 무엇을)*
|
||||
Reference in New Issue
Block a user