docs(10_Wiki): 위키 구조 정리 — 언어 튜토리얼 카테고리 폴더 제거 + 신규 자산 동기화

Topic_CSS/Topic_HTML/Topic_JavaScript/Topic_Prompt/Topic_Comfyui 등 기존 카테고리 폴더를 정리하고, Topic_Graphic/Dev 등 신규 산출물과 Topics 내부 세션/메모리 기록을 동기화.
2026-07-05 00:10:59 +09:00
parent a397bc4720
commit 1cfd3bbb56
1495 changed files with 68534 additions and 27 deletions
@@ -0,0 +1,105 @@
+---
+id: css-max-width
+title: "CSS Max-width"
+category: "Frontend"
+status: "draft"
+verification_status: "conceptual"
+canonical_id: ""
+aliases: ["max-width", "width vs max-width", "responsive width", "maximum width", "max-width 500px"]
+duplicate_of: ""
+source_trust_level: "B"
+confidence_score: 0.88
+created_at: 2026-06-23
+updated_at: 2026-06-23
+review_reason: ""
+merge_history: []
+tags: ["css", "web", "frontend", "w3schools", "max-width", "width", "layout", "responsive"]
+raw_sources: ["https://www.w3schools.com/css/css_max-width.asp"]
+applied_in: []
+github_commit: ""
+---
+
+# [[CSS Max Width]]
+
+## 🎯 한 줄 통찰 (One-line insight)
+`max-width` caps an element's width so it can shrink but never exceed a set size, improving how layouts handle small browser windows. [S1]
+
+## 🧠 핵심 개념 (Core concepts)
+- **Definition** — the `max-width` property defines the maximum width of an element. [S1]
+- **Upper bound only** — this property prevents the element's width from being larger than the specified value (it can be smaller, but not larger). [S1]
+- **Responsive purpose** — this property is useful for creating responsive layouts and to ensure content readability across various screen sizes. [S1]
+- **Problem with fixed `width`** — if the browser window is smaller than the element's `width`, some content will not show, and the browser might add a horizontal scrollbar to the page. [S1]
+- **`max-width` improves this** — using `max-width` instead improves the browser's handling of small windows. [S1]
+
+## 🧩 추출된 패턴 (Extracted patterns)
+- **`max-width` + `margin: auto`** — a centered, responsive block that fills available width up to a cap. [S1]
+- **Replace `width` with `max-width`** — swap a fixed `width` for `max-width` to avoid overflow on narrow viewports. [S1]
+
+## 📖 세부 내용 (Details)
+The `max-width` property defines the maximum width of an element. This property prevents the element's width from being larger than the specified value (it can be smaller, but not larger). This property is useful for creating responsive layouts and to ensure content readability across various screen sizes. [S1]
+
+**Problem with `width`:** What happens to the `<div>` above if the browser window is smaller than the width of the element? Some of the content will not show, and the browser might add a horizontal scrollbar to the page. [S1]
+
+**Using `max-width` instead:** Now, we use the `max-width` property instead. This will improve the browser's handling of small windows. [S1]
+
+The example below compares a fixed-`width` `<div>` against a `max-width` `<div>`: [S1]
+```css
+div.ex1 {
+  width: 500px;
+  margin: auto;
+  border: 3px solid #73AD21;
+}
+
+div.ex2 {
+  max-width: 500px;
+  margin: auto;
+  border: 3px solid #73AD21;
+}
+```
+
+**Tip:** Resize the browser window to less than 600px wide to see the difference between the two `<div>`s. [S1]
+
+**CSS Properties (reference table)** [S1]
+
+| Property | Description |
+|----------|-------------|
+| max-width | Defines the maximum width of an element |
+| width | Sets the width of an element |
+
+## ⚖️ 비교 및 선택 기준 (Comparison & decision criteria)
+- **Fixed `width: 500px;`** — if the browser window is smaller than the width, some content will not show and a horizontal scrollbar may appear. [S1]
+- **`max-width: 500px;`** — improves the browser's handling of small windows, since the element can shrink below the cap but never exceed it. Choose this for responsive layouts. [S1]
+
+## 🛠️ 적용 사례 (Applied in summary)
+The page's own example is the applied case: two centered `<div>`s (`margin: auto`) with a `#73AD21` border, one using `width: 500px;` and one using `max-width: 500px;` to contrast their small-window behavior. No external project/commit applications found in the source.
+
+## 💻 코드 패턴 (Code patterns)
+Responsive capped, centered block (language: CSS):
+```css
+div.ex2 {
+  max-width: 500px;
+  margin: auto;
+  border: 3px solid #73AD21;
+}
+```
+
+## ⚖️ 모순 및 업데이트 (Contradictions & updates)
+No contradictions found in the source.
+
+## ✅ 검증 상태 및 신뢰도
+- **상태:** draft
+- **검증 단계:** conceptual (실제 적용 사례 발견 시 applied/validated로 승격 가능)
+- **출처 신뢰도:** B (W3Schools — widely used educational reference, not a primary standards body)
+- **신뢰 점수:** 0.88
+- **중복 검사 결과:** 신규 생성 (New discovery)
+
+## 🔗 지식 그래프 (Knowledge Graph)
+- **상위/루트:** [[CSS Tutorial]]
+- **관련 개념:** [[CSS Display]], [[CSS Table Responsive]], [[CSS Position]]
+- **참조 맥락:** Referenced whenever building responsive blocks that should not overflow narrow viewports.
+
+## 📚 출처 (Sources)
+- [S1] W3Schools — CSS Max-width — https://www.w3schools.com/css/css_max-width.asp
+
+## 📝 변경 이력 (Change history)
+- 2026-06-23: Initial draft synthesized from the W3Schools "CSS Max-width" page (Astra wiki-curation, P-Reinforce v3.1 format).