docs(10_Wiki): W3Schools 위키화 — HTML/CSS/JavaScript(core)

W3Schools 튜토리얼을 P-Reinforce v3.1 포맷으로 위키화(영어 본문, 한/영 섹션 헤더).
- Topic_HTML: 59문서 (튜토리얼+예제, 레퍼런스/메타 제외)
- Topic_CSS: 190문서 (메인 + Advanced/Flexbox/Grid/RWD 전체)
- Topic_JavaScript: 120문서 (코어 언어; Temporal/DOM상세/BOM/WebAPI/AJAX/jQuery/Graphics 등은 후속)
각 폴더 00_INDEX.md(MOC) 포함. 코드 verbatim, 미확인분은 "Not found in source" 표기.

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

10_Wiki/Topic_CSS/CSS_Min_Max.md

@@ -0,0 +1,115 @@
+---
+id: css-max-width-and-min-width
+title: "CSS Max-width and Min-width"
+category: "Frontend"
+status: "draft"
+verification_status: "conceptual"
+canonical_id: ""
+aliases: ["max-width", "min-width", "max-height", "min-height", "responsive width"]
+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", "min-width", "responsive"]
+raw_sources: ["https://www.w3schools.com/css/css_height_width_min_max.asp"]
+applied_in: []
+github_commit: ""
+---
+
+# [[CSS Max-width and Min-width]]
+
+## 🎯 한 줄 통찰 (One-line insight)
+`max-width` sets the maximum allowed width of an element, preventing it from growing larger than that value — and it overrides `width` when `width` is larger. [S1]
+
+## 🧠 핵심 개념 (Core concepts)
+- **Four constraint properties** — `min-width`/`max-width` control minimum and maximum width; `min-height`/`max-height` control minimum and maximum height. [S1]
+- **`max-width` definition** — sets the maximum allowed width of an element, preventing the element's width from being larger than the `max-width` value. [S1]
+- **Accepted `max-width` values** — a length (px, cm, etc.), a percentage (% of the containing block), or `none` (the default; no maximum). [S1]
+- **Override rule** — if both `width` and `max-width` are set on the same element and `width` is larger than `max-width`, the `max-width` value is used. [S1]
+
+## 🧩 추출된 패턴 (Extracted patterns)
+- **Responsive cap** — `max-width` prevents the scrollbars that appear when a fixed-`width` element is wider than a shrunken browser window. [S1]
+- **Fluid-with-cap** — pairing `width: 100%` with `max-width` makes a block fill its container up to a fixed ceiling. [S1]
+
+## 📖 세부 내용 (Details)
+**The properties**
+The tutorial covers four CSS properties for constraining element dimensions: [S1]
+- `min-width` and `max-width` — control minimum and maximum width
+- `min-height` and `max-height` — control minimum and maximum height
+
+**The `max-width` property**
+"The `max-width` property sets the maximum allowed width of an element. This prevents the width of an element to be larger than the `max-width` property value." [S1]
+
+It accepts three value types: a length (px, cm, etc.); a percentage (% of the containing block); or `none` (default; no maximum). [S1]
+
+**Why it matters for responsive design**
+`max-width` solves a responsive design problem: when the browser window shrinks below a fixed element width, scrollbars appear. Using `max-width` prevents this issue on smaller viewports. [S1]
+
+**Example 1** — comparing `width` vs `max-width`: [S1]
+```css
+.div1 {
+  max-width: 500px;
+  background-color: powderblue;
+}
+
+.div2 {
+  width: 500px;
+  background-color: powderblue;
+}
+```
+
+**Example 2** — combined `width` and `max-width`: [S1]
+```css
+.div1 {
+  width: 100%;
+  max-width: 900px;
+  background-color: powderblue;
+}
+```
+
+**Important note**
+"If you use both the `width` property and the `max-width` property on the same element, and the value of the `width` property is larger than the `max-width` property; the `max-width` property value will be used!" [S1]
+
+**Related properties**
+The page lists six dimension properties with their descriptions: `height`, `max-height`, `max-width`, `min-height`, `min-width`, and `width`. [S1]
+
+## 🛠️ 적용 사례 (Applied in summary)
+The two examples are the page's own applied cases: Example 1 contrasts a `max-width` box against a fixed-`width` box; Example 2 shows the fluid-with-cap pattern. No external project/commit applications found in the source.
+
+## 💻 코드 패턴 (Code patterns)
+Fill the container up to a fixed ceiling (language: CSS):
+```css
+.div1 {
+  width: 100%;
+  max-width: 900px;
+  background-color: powderblue;
+}
+```
+
+## ⚖️ 모순 및 업데이트 (Contradictions & updates)
+No contradictions found in the source.
+
+## ⚖️ 비교 및 선택 기준 (Comparison & decision criteria)
+- **`width`** — a fixed content width; can force horizontal scrollbars when the viewport is narrower than the value. [S1]
+- **`max-width`** — caps the width but lets the element shrink below it, so it adapts to smaller viewports without scrollbars; when both are set and `width` exceeds `max-width`, `max-width` wins. [S1]
+
+## ✅ 검증 상태 및 신뢰도
+- **상태:** draft
+- **검증 단계:** conceptual (실제 적용 사례 발견 시 applied/validated로 승격 가능)
+- **출처 신뢰도:** B (W3Schools — widely used educational reference, not a primary standards body)
+- **신뢰 점수:** 0.88
+- **중복 검사 결과:** 신규 생성 (New discovery)
+
+## 🔗 지식 그래프 (Knowledge Graph)
+- **상위/루트:** [[CSS Tutorial]]
+- **관련 개념:** [[CSS Height and Width]], [[CSS Box Model]], [[CSS Padding and Box Sizing]]
+- **참조 맥락:** Referenced when constraining element size for responsive layouts.
+
+## 📚 출처 (Sources)
+- [S1] W3Schools — CSS Max-width and Min-width — https://www.w3schools.com/css/css_height_width_min_max.asp
+
+## 📝 변경 이력 (Change history)
+- 2026-06-23: Initial draft synthesized from the W3Schools "CSS Max-width and Min-width" page (Astra wiki-curation, P-Reinforce v3.1 format).