refactor(topics): 멀티 에이전트용 지식 재편 — _Common(공통 기본기) + Domain_* 구조

에이전트 8종(대화형/프로그래머 C·S/디자이너/설계자/기획자/QA/PD/PM)에게 [공통 기본 능력 + 롤별 Specialty] 2층으로 지식을 주입하기 위한 재분류. 문서 내용·포맷은 무수정, 폴더 이동만 (6,372개 문서 수 보존 확인). - Topic_Programming → Domain_Programming (내부 구조 보존) - Topic_Graphic → Domain_Design - Topic_Business → Domain_Product - Topic_General → Domain_General - _Common 신설: Math(구 Topic_Math_Specialty), Reasoning(구 General/From_Thinking & Reasoning), Reasoning_Creativity(구 General/From_창의성), Communication(Poetic_Blog_Writing + From_writing) - 타 도메인의 From_* 폴더는 유지 (출처 표기일 뿐, 이미 도메인에 맞게 분류된 문서) - 빈 폴더 정리 (memory/procedures) - 에이전트→폴더 매핑은 workspace의 .astra/agent-knowledge-map.json (9개 에이전트) Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
2026-07-11 11:05:56 +09:00
parent 6549ead309
commit c24165b8bc
6193 changed files with 1717 additions and 31 deletions
@@ -0,0 +1,117 @@
+---
+id: css-grid-intro
+title: "CSS Grid Intro"
+category: "Frontend"
+status: "draft"
+verification_status: "conceptual"
+canonical_id: ""
+aliases: ["CSS Grid", "Grid Layout Module", "two-dimensional layout", "display grid", "grid container"]
+duplicate_of: ""
+source_trust_level: "B"
+confidence_score: 0.89
+created_at: 2026-06-23
+updated_at: 2026-06-23
+review_reason: ""
+merge_history: []
+tags: ["css", "web", "frontend", "w3schools", "grid", "layout"]
+raw_sources: ["https://www.w3schools.com/css/css_grid.asp"]
+applied_in: []
+github_commit: ""
+---
+
+# [[CSS Grid Intro]]
+
+## 🎯 한 줄 통찰 (One-line insight)
+The CSS Grid Layout Module offers a grid-based layout system with rows and columns, enabling complex, responsive two-dimensional layouts without using float or positioning. [S1]
+
+## 🧠 핵심 개념 (Core concepts)
+- **Grid Layout Module** — offers a grid-based layout system, with rows and columns, making it easier to design web pages without having to use float or positioning. [S1]
+- **Two-dimensional** — CSS Grid is used for two-dimensional layout, with rows AND columns; CSS Flexbox is used for one-dimensional layout, with rows OR columns. [S1]
+- **Grid Container** — the parent element where `display` is set to `grid` or `inline-grid`. [S1]
+- **Grid Items** — the direct children of the grid container, which automatically become grid items. [S1]
+
+## 🧩 추출된 패턴 (Extracted patterns)
+- **Container + items model** — set `display: grid` on the parent; direct children automatically become grid items. [S1]
+- **Define columns on the container** — `grid-template-columns` controls how many columns and their widths (e.g., `auto auto auto` for three equal columns). [S1]
+
+## 📖 세부 내용 (Details)
+The CSS Grid Layout Module offers a grid-based layout system, with rows and columns, making it easier to design web pages without having to use float or positioning. [S1]
+
+**Grid vs Flexbox**
+CSS Grid is used for two-dimensional layout, with rows AND columns. CSS Flexbox is used for one-dimensional layout, with rows OR columns. [S1]
+
+**Grid Components**
+A grid consists of two essential parts: [S1]
+1. **Grid Container** — the parent element where `display` is set to `grid` or `inline-grid`.
+2. **Grid Items** — direct children of the grid container that automatically become grid items.
+
+**Complete example** [S1]
+```html
+<html>
+<head>
+<style>
+.container {
+  display: grid;
+  grid-template-columns: auto auto auto;
+  background-color: dodgerblue;
+  padding: 10px;
+}
+.container div {
+  background-color: #f1f1f1;
+  border: 1px solid black;
+  padding: 10px;
+  font-size: 30px;
+  text-align: center;
+}
+</style>
+</head>
+<body>
+<div class="container">
+  <div>1</div>
+  <div>2</div>
+  <div>3</div>
+  <div>4</div>
+  <div>5</div>
+</div>
+</body>
+</html>
+```
+
+The page also lists a CSS Grid properties table covering grid-related properties such as `grid-template-columns`, `grid-template-rows`, `gap`, `grid-area`, `justify-content`, and `align-items`, each with a brief description of its functionality. The full property-by-property table text was not captured verbatim from the source.
+
+## 🛠️ 적용 사례 (Applied in summary)
+The page's own complete example styles a `.container` with `display: grid` and `grid-template-columns: auto auto auto`, plus styled child `<div>` items. No external project/commit applications found in the source.
+
+## 💻 코드 패턴 (Code patterns)
+Make a three-column grid container (language: CSS):
+```css
+.container {
+  display: grid;
+  grid-template-columns: auto auto auto;
+}
+```
+
+## ⚖️ 비교 및 선택 기준 (Comparison & decision criteria)
+- **CSS Grid** — two-dimensional layout, controlling rows AND columns together. [S1]
+- **CSS Flexbox** — one-dimensional layout, controlling rows OR columns. [S1]
+
+## ⚖️ 모순 및 업데이트 (Contradictions & updates)
+No contradictions found in the source.
+
+## ✅ 검증 상태 및 신뢰도
+- **상태:** draft
+- **검증 단계:** conceptual (실제 적용 사례 발견 시 applied/validated로 승격 가능)
+- **출처 신뢰도:** B (W3Schools — widely used educational reference, not a primary standards body)
+- **신뢰 점수:** 0.89
+- **중복 검사 결과:** 신규 생성 (New discovery)
+
+## 🔗 지식 그래프 (Knowledge Graph)
+- **상위/루트:** [[CSS Tutorial]]
+- **관련 개념:** [[CSS Grid Container]], [[CSS Grid Tracks]], [[CSS Grid Gaps]]
+- **참조 맥락:** The entry point referenced whenever building two-dimensional row-and-column page layouts.
+
+## 📚 출처 (Sources)
+- [S1] W3Schools — CSS Grid Intro — https://www.w3schools.com/css/css_grid.asp
+
+## 📝 변경 이력 (Change history)
+- 2026-06-23: Initial draft synthesized from the W3Schools "CSS Grid Intro" page (Astra wiki-curation, P-Reinforce v3.1 format).