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>
2026-06-23 19:21:18 +09:00
parent 8957890d13
commit 9609c04755
379 changed files with 54618 additions and 6 deletions
@@ -0,0 +1,102 @@
+---
+id: css-text-transformation
+title: "CSS Text Transformation"
+category: "Frontend"
+status: "draft"
+verification_status: "conceptual"
+canonical_id: ""
+aliases: ["text-transform", "text transformation", "uppercase lowercase capitalize", "text capitalization", "CSS capitalize"]
+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", "text", "transform"]
+raw_sources: ["https://www.w3schools.com/css/css_text_transformation.asp"]
+applied_in: []
+github_commit: ""
+---
+
+# [[CSS Text Transformation]]
+
+## 🎯 한 줄 통찰 (One-line insight)
+The CSS `text-transform` property controls the capitalization of text in an element — uppercase, lowercase, or capitalized words — without changing the original content in HTML. [S1]
+
+## 🧠 핵심 개념 (Core concepts)
+- **Purpose** — `text-transform` controls the capitalization of text in an element. [S1]
+- **Presentation only** — it transforms display without changing the original content in HTML. [S1]
+- **Four values** — `none` (no transformation applied), `capitalize` (first character of each word becomes uppercase), `uppercase` (all characters become uppercase), `lowercase` (all characters become lowercase). [S1]
+
+## 🧩 추출된 패턴 (Extracted patterns)
+- **Class-based casing pattern** — define `.uppercase`, `.lowercase`, `.capitalize` classes mapped to the matching `text-transform` value. [S1]
+- **Non-destructive display pattern** — transform the visible casing while leaving the underlying HTML text untouched. [S1]
+
+## 📖 세부 내용 (Details)
+"The CSS `text-transform` property is used to control the capitalization of text in an element." The property can transform text to uppercase or lowercase, or capitalize each word, "without changing the original content in HTML." [S1]
+
+Possible values: [S1]
+- `none` — No transformation applied
+- `capitalize` — First character of each word becomes uppercase
+- `uppercase` — All characters become uppercase
+- `lowercase` — All characters become lowercase
+
+Code example: [S1]
+```css
+p.uppercase {
+  text-transform: uppercase;
+}
+
+p.lowercase {
+  text-transform: lowercase;
+}
+
+p.capitalize {
+  text-transform: capitalize;
+}
+```
+
+Property reference table: [S1]
+
+| Property | Description |
+|----------|-------------|
+| text-transform | Controls the capitalization of text |
+
+## 🛠️ 적용 사례 (Applied in summary)
+The page's own example is the applied case: three paragraph classes (`uppercase`, `lowercase`, `capitalize`) each mapped to a `text-transform` value. No external project/commit applications found in the source.
+
+## 💻 코드 패턴 (Code patterns)
+Capitalization pattern (language: CSS):
+```css
+selector {
+  text-transform: none | capitalize | uppercase | lowercase;
+}
+```
+Concrete example:
+```css
+p.capitalize {
+  text-transform: capitalize;
+}
+```
+
+## ⚖️ 모순 및 업데이트 (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 Text Decoration Styles]], [[CSS Text Spacing]], [[CSS Text Color]]
+- **참조 맥락:** Referenced when displaying text in a fixed case (uppercase/lowercase/capitalized) without altering source HTML.
+
+## 📚 출처 (Sources)
+- [S1] W3Schools — CSS Text Transformation — https://www.w3schools.com/css/css_text_transformation.asp
+
+## 📝 변경 이력 (Change history)
+- 2026-06-23: Initial draft synthesized from the W3Schools "CSS Text Transformation" page (Astra wiki-curation, P-Reinforce v3.1 format).