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_Variables_Overriding.md

@@ -0,0 +1,148 @@
+---
+id: css-overriding-variables
+title: "CSS Overriding Variables"
+category: "Frontend"
+status: "draft"
+verification_status: "conceptual"
+canonical_id: ""
+aliases: ["override CSS variable", "local variable override", "redeclare variable", "scoped custom property", "local custom property", "variable scope"]
+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", "variables", "custom-properties", "scope"]
+raw_sources: ["https://www.w3schools.com/css/css3_variables_overriding.asp"]
+applied_in: []
+github_commit: ""
+---
+
+# [[CSS Overriding Variables]]
+
+## 🎯 한 줄 통찰 (One-line insight)
+A global CSS variable can be overridden just for one section by re-declaring it inside that selector — the local value wins there — and if a value is needed in only one place, declaring a brand-new local variable is the cleaner alternative. [S1]
+
+## 🧠 핵심 개념 (Core concepts)
+- **Scope recap** — global variables can be accessed through the entire document, while local variables can be used only inside the selector where they are declared. [S1]
+- **Section-specific change** — sometimes you want a variable to change only in a specific section of the page. [S1]
+- **Re-declare to override** — re-declaring `--primary-bg-color` inside a selector makes `var(--primary-bg-color)` within that selector use the local value, overriding the global one for that selector. [S1]
+- **Or add a new local variable** — if a variable is going to be used in only one single place, you can instead declare a new local variable. [S1]
+
+## 🧩 추출된 패턴 (Extracted patterns)
+- **Local override pattern** — declare `--primary-bg-color: red;` inside `.container .note` so only that block uses the red value while the rest of the page keeps the global value. [S1]
+- **New-local pattern** — for a one-off value, declare a fresh `--note-border-color: red;` rather than overriding a shared global variable, keeping intent explicit. [S1]
+
+## 📖 세부 내용 (Details)
+**Override Global Variable With Local Variable** [S1]
+From the previous page we learned that global variables can be accessed through the entire document, while local variables can be used only inside the selector where they are declared. Sometimes we want the variables to change only in a specific section of the page.
+
+Assume we want a different border color for `<p class="note">` elements. Then, we can re-declare the `--primary-bg-color` variable inside the `.note` selector. When we use `var(--primary-bg-color)` inside this selector, it will use the local `--primary-bg-color` variable value declared here. The local `--primary-bg-color` variable will override the global `--primary-bg-color` variable for the `.note` selector:
+```css
+:root {
+  --primary-bg-color: #1e90ff;
+  --primary-color: #ffffff;
+}
+
+body {
+  background-color: var(--primary-bg-color);
+}
+
+.container {
+  color: var(--primary-bg-color);
+  background-color: var(--primary-color);
+  padding: 15px;
+}
+
+.container h2 {
+  border-bottom: 2px solid var(--primary-bg-color);
+}
+
+.container .note {
+  --primary-bg-color: red; /* local variable will override global */
+  border: 1px solid var(--primary-bg-color);
+  padding: 10px;
+}
+```
+
+**Add a New Local Variable** [S1]
+If a variable is going to be used only one single place, we could also have declared a new local variable, like this:
+```css
+:root {
+  --primary-bg-color: #1e90ff;
+  --primary-color: #ffffff;
+}
+
+body {
+  background-color: var(--primary-bg-color);
+}
+
+.container {
+  color: var(--primary-bg-color);
+  background-color: var(--primary-color);
+  padding: 15px;
+}
+
+.container h2 {
+  border-bottom: 2px solid var(--primary-bg-color);
+}
+
+.container .note {
+  --note-border-color: red; /* new local variable */
+  border: 1px solid var(--note-border-color);
+  padding: 10px;
+}
+```
+
+**CSS var() Function** [S1]
+
+| Function | Description |
+|----------|-------------|
+| var() | Inserts the value of a CSS variable |
+
+## 🛠️ 적용 사례 (Applied in summary)
+The page's examples are the applied cases: overriding the global `--primary-bg-color` locally inside `.container .note` for a red note border, and the alternative of declaring a new `--note-border-color` local variable for the same effect. No external project/commit applications found in the source.
+
+## 💻 코드 패턴 (Code patterns)
+Override a global variable locally (language: CSS):
+```css
+.container .note {
+  --primary-bg-color: red; /* local variable will override global */
+  border: 1px solid var(--primary-bg-color);
+  padding: 10px;
+}
+```
+Declare a new local variable instead (language: CSS):
+```css
+.container .note {
+  --note-border-color: red; /* new local variable */
+  border: 1px solid var(--note-border-color);
+  padding: 10px;
+}
+```
+
+## ⚖️ 비교 및 선택 기준 (Comparison & decision criteria)
+- **Re-declare (override) the global variable** — use when you want a section to reuse the same conceptual token (e.g. the primary color) but with a different value scoped to that section. [S1]
+- **Declare a new local variable** — use when the value is going to be used in only one single place, keeping the global token untouched and the intent explicit. [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.88
+- **중복 검사 결과:** 신규 생성 (New discovery)
+
+## 🔗 지식 그래프 (Knowledge Graph)
+- **상위/루트:** [[CSS Tutorial]]
+- **관련 개념:** [[CSS Variables var()]], [[CSS Selectors]], [[CSS Specificity]], [[CSS Colors]]
+- **참조 맥락:** Referenced when scoping or locally overriding custom properties for a specific page section.
+
+## 📚 출처 (Sources)
+- [S1] W3Schools — CSS Overriding Variables — https://www.w3schools.com/css/css3_variables_overriding.asp
+
+## 📝 변경 이력 (Change history)
+- 2026-06-23: Initial draft synthesized from the W3Schools "CSS Overriding Variables" page (Astra wiki-curation, P-Reinforce v3.1 format).