Files

T

Antigravity Agent f8b21af4be Wiki cleanup: error-doc removal, dedup merge, link normalization

10_Wiki/Topics 대규모 정리:
- 오류 캡처/미완성 stub 문서 227개 제거
- 교차폴더 중복 43클러스터 병합 (63파일 → redirect)
- 링크명 정규화: 깨진 링크 수정·redirect 직결·개념 매핑 ~2,400건
- 카테고리 MOC 6개 신규 생성
- Graph 섹션 미해결 related-keyword 링크 10,058건 제거

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

2026-05-20 23:52:15 +09:00

4.5 KiB

Raw Blame History

id, title, category, status, canonical_id, aliases, duplicate_of, source_trust_level, confidence_score, verification_status, tags, raw_sources, last_reinforced, github_commit, tech_stack

title

레이아웃 Flexbox & Grid 완전 이해

매 한 줄

"매 Flexbox는 1차원, Grid는 2차원". Flexbox 매 row OR column 단일 축 배치 — Grid 매 row AND column 동시 — 매 2026 modern layout = container query + subgrid + Grid + 매 nested Flex.

매 핵심

매 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) — 매 헷갈리지 않음.

매 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.

매 결정

1D (nav, button row, card 내부) → Flex.
2D (page layout, dashboard) → Grid.
매 둘 다 함께 — 매 현실 — 매 outer Grid + inner Flex.

💻 패턴

Holy Grail Layout (Grid)

.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; }

Auto-fit responsive cards

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
}
/* 매 media query 의 X — 매 자동 wrap */

Centering (modern)

.center {
  display: grid;
  place-items: center;
  min-height: 100dvh;
}

.nav {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.nav .spacer { margin-left: auto; }  /* 매 push to right */

Subgrid (nested alignment)

.parent {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
}
.child {
  display: grid;
  grid-template-columns: subgrid;  /* 매 parent column 상속 */
  grid-column: 1 / -1;
}

Container query

.card { container-type: inline-size; }

@container (min-width: 400px) {
  .card-body { display: grid; grid-template-columns: 1fr 2fr; }
}

Aspect ratio + Grid item

.thumbnail {
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.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

부모: Frontend
변형: 컨테이너 쿼리 (Container Queries) · Subgrid
응용: Design System

🤖 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 결정 + 패턴

4.5 KiB Raw Blame History