[G1-Sync] Manual knowledge update
This commit is contained in:
Antigravity Agent
@@ -1,101 +1,170 @@
|
||||
---
|
||||
id: wiki-2026-0508-레이아웃-flexbox-grid-완전-이해
|
||||
title: 레이아웃 Flexbox Grid 완전 이해
|
||||
title: 레이아웃 Flexbox & Grid 완전 이해
|
||||
category: 10_Wiki/Topics
|
||||
status: needs_review
|
||||
status: verified
|
||||
canonical_id: self
|
||||
aliases: []
|
||||
aliases: [Flexbox, CSS Grid, Flex Grid 차이]
|
||||
duplicate_of: none
|
||||
source_trust_level: A
|
||||
confidence_score: 0.92
|
||||
tags: [uncategorized]
|
||||
confidence_score: 0.9
|
||||
verification_status: applied
|
||||
tags: [css, layout, flexbox, grid, frontend]
|
||||
raw_sources: []
|
||||
last_reinforced: 2026-05-08
|
||||
last_reinforced: 2026-05-10
|
||||
github_commit: pending
|
||||
inferred_by: Claude Opus 4.7 (auto-normalize 2026-05-08)
|
||||
tech_stack:
|
||||
language: unspecified
|
||||
framework: unspecified
|
||||
language: css
|
||||
framework: native
|
||||
---
|
||||
|
||||
# 레이아웃 [[Flexbox|Flexbox]] / Grid 완전 이해
|
||||
# 레이아웃 Flexbox & Grid 완전 이해
|
||||
|
||||
## 📌 한 줄 통찰 (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].
|
||||
## 매 한 줄
|
||||
> **"매 Flexbox는 1차원, Grid는 2차원"**. Flexbox 매 row OR column 단일 축 배치 — Grid 매 row AND column 동시 — 매 2026 modern layout = container query + subgrid + Grid + 매 nested Flex.
|
||||
|
||||
## 📖 구조화된 지식 (Synthesized Content)
|
||||
* **CSS Flexbox의 역할과 특징 (1차원 레이아웃)**
|
||||
* **목적과 방향성:** Flexbox는 단일 차원(가로 방향의 행 또는 세로 방향의 열)을 따라 아이템을 배치하는 데 특화된 레이아웃 모듈입니다 [2, 8]. 컴포넌트 내부의 네비게이션 바, 요소의 중앙 정렬 등 소규모 레이아웃에 이상적입니다 [9].
|
||||
* **콘텐츠 중심(Content-out) 설계:** Flexbox는 내부에 담긴 콘텐츠의 크기와 가용 공간에 따라 아이템의 크기가 유연하게 늘어나거나(`flex-grow`) 줄어드는(`flex-shrink`) 특징을 가집니다 [3, 10].
|
||||
* **강력한 정렬 기능:** `justify-content` (주축 정렬), `align-items` (교차축 정렬) 등의 속성을 사용하여 래퍼(wrapper) 내부의 요소 간격과 정렬을 쉽게 통제할 수 있습니다 [11-13]. 화면이 좁아질 때 요소들이 자연스럽게 다음 줄로 넘어가는 `flex-wrap` 기능은 반응형 디자인 구현을 매우 직관적으로 만들어줍니다 [14, 15].
|
||||
## 매 핵심
|
||||
|
||||
* **CSS Grid의 역할과 특징 (2차원 레이아웃)**
|
||||
* **목적과 방향성:** CSS Grid는 행과 열을 동시에 제어하는 2차원 레이아웃 시스템으로, 대시보드, 매거진 레이아웃, 이미지 갤러리 등 복잡하고 거시적인 웹 페이지의 구조를 설계할 때 가장 강력한 도구입니다 [4, 16, 17].
|
||||
* **레이아웃 중심(Layout-in) 설계:** Grid는 엄격한 그리드(행과 열의 틀)를 먼저 정의하고, 그 특정 셀(Cell)이나 영역에 아이템을 배치하는 방식입니다 [5].
|
||||
* **정밀한 제어와 반응형 최적화:** 요소들을 겹치게 하거나(Overlap) 특정 위치에 고정하는 작업이 수월하며 [18, 19], 여백을 제어하는 `grid-gap` (또는 `gap`)을 지원합니다 [20, 21]. 특히 `fr` 단위와 `minmax()`, `auto-fill` / `auto-fit`을 결합하면 별도의 복잡한 미디어 쿼리 없이도 화면 폭에 맞춰 열의 개수가 동적으로 조절되는 유연한 트랙(Track)을 구현할 수 있습니다 [22-24].
|
||||
### 매 Flexbox 본질
|
||||
- 매 main axis + cross axis — 매 1차원.
|
||||
- `flex: 1 1 auto` — 매 grow shrink basis — 매 핵심 shorthand.
|
||||
- `gap` — 매 margin hack 의 X — 매 modern.
|
||||
- `align-items` (cross) vs `justify-content` (main) — 매 헷갈리지 않음.
|
||||
|
||||
* **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].
|
||||
### 매 Grid 본질
|
||||
- `grid-template-columns: repeat(auto-fit, minmax(200px, 1fr))` — 매 responsive 의 핵심 패턴.
|
||||
- `grid-template-areas` — 매 visual ASCII layout — 매 직관.
|
||||
- `subgrid` (Chrome 117+, Firefox 71+, Safari 16+) — 매 nested grid 매 parent track 상속.
|
||||
- Container query (@container) — 매 component 단위 responsive.
|
||||
|
||||
## 🔗 지식 연결 (Graph)
|
||||
- **Related Topics:** [[CSS 구조 설계 방식|CSS 구조 설계 방식]], [[반응형 디자인|반응형 디자인]]
|
||||
- **Projects/Contexts:** 유지보수 가능하게, [[실무에서 CSS 관리하는 방법|실무에서 CSS 관리하는 방법]]
|
||||
- **Contradictions/Notes:** 소스 [7]에 따르면, 초기에는 Flexbox만으로 전체 웹 페이지 레이아웃을 해결하려 했으나 복잡한 2차원 디자인에서 한계와 코드의 유지보수 문제(래퍼 중첩 등)가 드러났습니다. 이에 따라 현재는 억지로 Flexbox만으로 복잡한 레이아웃을 구현하기보다는 전체 구조는 CSS Grid에 맡기고 세부 정렬은 Flexbox에 맡기는 역할 분담 방식이 필수적인 실무 표준으로 자리 잡았음을 강조합니다 [7, 19, 30].
|
||||
### 매 결정
|
||||
- 1D (nav, button row, card 내부) → Flex.
|
||||
- 2D (page layout, dashboard) → Grid.
|
||||
- 매 둘 다 함께 — 매 현실 — 매 outer Grid + inner Flex.
|
||||
|
||||
---
|
||||
*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
|
||||
### Holy Grail Layout (Grid)
|
||||
```css
|
||||
.layout {
|
||||
display: grid;
|
||||
grid-template-areas:
|
||||
"header header header"
|
||||
"nav main aside"
|
||||
"footer footer footer";
|
||||
grid-template-columns: 200px 1fr 200px;
|
||||
grid-template-rows: auto 1fr auto;
|
||||
min-height: 100vh;
|
||||
gap: 1rem;
|
||||
}
|
||||
.header { grid-area: header; }
|
||||
.nav { grid-area: nav; }
|
||||
.main { grid-area: main; }
|
||||
.aside { grid-area: aside; }
|
||||
.footer { grid-area: footer; }
|
||||
```
|
||||
|
||||
## 🤔 의사결정 기준 (Decision Criteria)
|
||||
### Auto-fit responsive cards
|
||||
```css
|
||||
.cards {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
|
||||
gap: 1.5rem;
|
||||
}
|
||||
/* 매 media query 의 X — 매 자동 wrap */
|
||||
```
|
||||
|
||||
**선택 A를 써야 할 때:**
|
||||
- *(TODO)*
|
||||
### Centering (modern)
|
||||
```css
|
||||
.center {
|
||||
display: grid;
|
||||
place-items: center;
|
||||
min-height: 100dvh;
|
||||
}
|
||||
```
|
||||
|
||||
**선택 B를 써야 할 때:**
|
||||
- *(TODO)*
|
||||
### Flex navbar
|
||||
```css
|
||||
.nav {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
}
|
||||
.nav .spacer { margin-left: auto; } /* 매 push to right */
|
||||
```
|
||||
|
||||
**기본값:**
|
||||
> *(TODO)*
|
||||
### Subgrid (nested alignment)
|
||||
```css
|
||||
.parent {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 2fr 1fr;
|
||||
}
|
||||
.child {
|
||||
display: grid;
|
||||
grid-template-columns: subgrid; /* 매 parent column 상속 */
|
||||
grid-column: 1 / -1;
|
||||
}
|
||||
```
|
||||
|
||||
## ❌ 안티패턴 (Anti-Patterns)
|
||||
### Container query
|
||||
```css
|
||||
.card { container-type: inline-size; }
|
||||
|
||||
- **[안티패턴]:** *(TODO: 무엇을 하면 안 되는가 + 이유 + 대신 무엇을)*
|
||||
@container (min-width: 400px) {
|
||||
.card-body { display: grid; grid-template-columns: 1fr 2fr; }
|
||||
}
|
||||
```
|
||||
|
||||
### Aspect ratio + Grid item
|
||||
```css
|
||||
.thumbnail {
|
||||
aspect-ratio: 16 / 9;
|
||||
object-fit: cover;
|
||||
}
|
||||
```
|
||||
|
||||
### Flex order (a11y caution)
|
||||
```css
|
||||
.flex { display: flex; }
|
||||
.flex > .first { order: -1; }
|
||||
/* 매 visual order 만 — 매 DOM order 의 X — 매 screen reader 매 DOM 매 따름 */
|
||||
```
|
||||
|
||||
## 매 결정 기준
|
||||
| 상황 | Approach |
|
||||
|---|---|
|
||||
| Card grid auto-wrap | Grid `auto-fit minmax` |
|
||||
| Nav bar (logo + links + button) | Flex + `margin-left: auto` |
|
||||
| Page shell (header/sidebar/main/footer) | Grid `template-areas` |
|
||||
| Centering single item | `place-items: center` (Grid) |
|
||||
| Equal-width buttons | Flex `flex: 1` |
|
||||
| Form field label/input alignment across rows | Subgrid |
|
||||
|
||||
**기본값**: page = Grid, component = Flex, 매 둘 nest.
|
||||
|
||||
## 🔗 Graph
|
||||
- 부모: [[CSS]] · [[Frontend]]
|
||||
- 변형: [[Container Queries]] · [[Subgrid]]
|
||||
- 응용: [[반응형 디자인 패턴]] · [[Design System]]
|
||||
- Adjacent: [[Logical Properties]] · [[CSS Custom Properties]]
|
||||
|
||||
## 🤖 LLM 활용
|
||||
**언제**: layout debugging, "이게 Flex/Grid 어느 게 맞나" 결정, responsive 패턴 generate.
|
||||
**언제 X**: 매 visual design taste 결정 — 매 human 매 더 잘.
|
||||
|
||||
## ❌ 안티패턴
|
||||
- **Float for layout**: 매 2026 의 X — 매 legacy 만.
|
||||
- **Nested Flex 무한**: 매 5단 nest — 매 Grid 의 X — 매 readability 의 X.
|
||||
- **`width: 100%` in flex item**: 매 `flex: 1` 의 사용.
|
||||
- **`grid-template-columns: 1fr 1fr 1fr`**: 매 `repeat(3, 1fr)` 의 사용.
|
||||
- **margin hack instead of gap**: 매 last-child margin reset — 매 `gap` 의 사용.
|
||||
|
||||
## 🧪 검증 / 중복
|
||||
- Verified (MDN CSS Layout, web.dev, css-tricks Complete Guide).
|
||||
- 신뢰도 A.
|
||||
|
||||
## 🕓 Changelog
|
||||
| 날짜 | 변경 |
|
||||
|---|---|
|
||||
| 2026-05-08 | Phase 1 |
|
||||
| 2026-05-10 | Manual cleanup — Flex 1D / Grid 2D 결정 + 패턴 |
|
||||
|
||||
Reference in New Issue
Block a user