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,232 @@
+---
+id: html-css
+title: "HTML CSS"
+category: "Frontend"
+status: "draft"
+verification_status: "conceptual"
+canonical_id: ""
+aliases: ["CSS in HTML", "inline CSS", "internal CSS", "external CSS", "Cascading Style Sheets", "HTML styles"]
+duplicate_of: ""
+source_trust_level: "B"
+confidence_score: 0.90
+created_at: 2026-06-23
+updated_at: 2026-06-23
+review_reason: ""
+merge_history: []
+tags: ["html", "web", "frontend", "w3schools", "css", "styling"]
+raw_sources: ["https://www.w3schools.com/html/html_css.asp"]
+applied_in: []
+github_commit: ""
+---
+
+# [[HTML CSS]]
+
+## 🎯 한 줄 통찰 (One-line insight)
+CSS (Cascading Style Sheets) formats the layout of a web page and can be applied to HTML in three ways — inline (`style` attribute), internal (`<style>` in `<head>`), and external (linked `.css` file). [S1]
+
+## 🧠 핵심 개념 (Core concepts)
+- **What CSS is** — Cascading Style Sheets are used to format the layout of a webpage: color, font, text size, spacing, positioning/layout, background images/colors, responsive displays for different devices and screen sizes, and much more. [S1]
+- **Cascading** — a style applied to a parent element also applies to all children elements within the parent. [S1]
+- **Three ways to add CSS** — inline (the `style` attribute on elements), internal (a `<style>` element in `<head>`), and external (a `<link>` to an external `.css` file). [S1]
+- **Common properties** — `color` (text color), `font-family` (font), `font-size` (text size), `border`, `padding` (internal spacing), `margin` (external spacing). [S1]
+
+## 🧩 추출된 패턴 (Extracted patterns)
+- **Inline pattern** — `<h1 style="color:blue;">…</h1>` styles one element directly. [S1]
+- **Internal pattern** — `<style> selector { property: value; } </style>` inside `<head>` styles the whole document. [S1]
+- **External pattern** — `<link rel="stylesheet" href="styles.css">` references a shared stylesheet. [S1]
+- **Box-model pattern** — `border` + `padding` + `margin` control an element's framing and spacing. [S1]
+- **Reference-path pattern** — external `href` can be a full URL, a root-relative path, or a same-folder filename. [S1]
+
+## 📖 세부 내용 (Details)
+**What is CSS?**
+Cascading Style Sheets (CSS) is used to format the layout of a webpage. With CSS, you can control the color, font, the size of text, the spacing between elements, how elements are positioned and laid out, what background images or background colors are to be used, different displays for different devices and screen sizes, and much more. The cascading concept means a style applied to a parent element will also apply to all children elements within the parent. [S1]
+
+**Three ways to add CSS** [S1]
+- **Inline** — using the `style` attribute on HTML elements
+- **Internal** — using a `<style>` element in the `<head>` section
+- **External** — linking to external CSS files via `<link>`
+
+**Inline CSS** [S1]
+```html
+<h1 style="color:blue;">A Blue Heading</h1>
+<p style="color:red;">A red paragraph.</p>
+```
+
+**Internal CSS** [S1]
+```html
+<!DOCTYPE html>
+<html>
+<head>
+<style>
+body {background-color: powderblue;}
+h1   {color: blue;}
+p    {color: red;}
+</style>
+</head>
+<body>
+<h1>This is a heading</h1>
+<p>This is a paragraph.</p>
+</body>
+</html>
+```
+
+**External CSS** — the HTML file links to an external stylesheet: [S1]
+```html
+<!DOCTYPE html>
+<html>
+<head>
+  <link rel="stylesheet" href="styles.css">
+</head>
+<body>
+<h1>This is a heading</h1>
+<p>This is a paragraph.</p>
+</body>
+</html>
+```
+The external `styles.css` file: [S1]
+```css
+body {
+  background-color: powderblue;
+}
+h1 {
+  color: blue;
+}
+p {
+  color: red;
+}
+```
+
+**CSS color, font-family, and font-size** [S1]
+```html
+<!DOCTYPE html>
+<html>
+<head>
+<style>
+h1 {
+  color: blue;
+  font-family: verdana;
+  font-size: 300%;
+}
+p {
+  color: red;
+  font-family: courier;
+  font-size: 160%;
+}
+</style>
+</head>
+<body>
+<h1>This is a heading</h1>
+<p>This is a paragraph.</p>
+</body>
+</html>
+```
+
+**Border, Padding, Margin** [S1]
+```css
+p {
+  border: 2px solid powderblue;
+}
+```
+```css
+p {
+  border: 2px solid powderblue;
+  padding: 30px;
+}
+```
+```css
+p {
+  border: 2px solid powderblue;
+  margin: 50px;
+}
+```
+
+**Linking to external CSS** — the `href` can point to a full URL, a root-relative path, or a same-folder filename: [S1]
+```html
+<link rel="stylesheet" href="https://www.w3schools.com/html/styles.css">
+```
+```html
+<link rel="stylesheet" href="/html/styles.css">
+```
+```html
+<link rel="stylesheet" href="styles.css">
+```
+
+**Chapter summary** [S1]
+- Use the `style` attribute for inline styling
+- Use the `<style>` element for internal CSS
+- Use the `<link>` element for external CSS files
+- Use the `<head>` to store style and link elements
+- The CSS `color` property controls text colors
+- The CSS `font-family` property defines fonts
+- The CSS `font-size` property sets text sizes
+- The CSS `border` property creates borders
+- The CSS `padding` adds internal spacing
+- The CSS `margin` adds external spacing
+
+**Related HTML tags**
+
+| Tag | Description |
+|---|---|
+| `<style>` | Defines style information for a document |
+| `<link>` | Links a document to an external resource |
+
+[S1]
+
+## 🛠️ 적용 사례 (Applied in summary)
+The inline, internal, and external CSS examples above are the canonical applied examples from the source. No external project/commit applications found in the source.
+
+## 💻 코드 패턴 (Code patterns)
+Inline (HTML):
+```html
+<h1 style="color:blue;">A Blue Heading</h1>
+```
+Internal:
+```html
+<style>
+body {background-color: powderblue;}
+h1   {color: blue;}
+p    {color: red;}
+</style>
+```
+External link:
+```html
+<link rel="stylesheet" href="styles.css">
+```
+Box model:
+```css
+p {
+  border: 2px solid powderblue;
+  padding: 30px;
+  margin: 50px;
+}
+```
+
+## ⚖️ 비교 및 선택 기준 (Comparison & decision criteria)
+The source presents three insertion methods; choosing among them: [S1]
+
+| Method | How | Scope |
+|---|---|---|
+| Inline | `style` attribute on an element | A single element only |
+| Internal | `<style>` element in `<head>` | The whole document |
+| External | `<link rel="stylesheet">` to a `.css` file | Shareable across many pages |
+
+## ⚖️ 모순 및 업데이트 (Contradictions & updates)
+No contradictions found in the source.
+
+## ✅ 검증 상태 및 신뢰도
+- **상태:** draft
+- **검증 단계:** conceptual (실제 적용 사례 발견 시 applied/validated로 승격 가능)
+- **출처 신뢰도:** B (W3Schools — widely used educational reference, not a primary standards body)
+- **신뢰 점수:** 0.90
+- **중복 검사 결과:** 신규 생성 (New discovery)
+
+## 🔗 지식 그래프 (Knowledge Graph)
+- **상위/루트:** [[HTML Tutorial]]
+- **관련 개념:** [[HTML Colors]], [[HTML Styles]], [[HTML Attributes]], [[HTML Introduction]]
+- **참조 맥락:** Referenced whenever applying styling (color, font, spacing, layout) to HTML, and when choosing inline vs internal vs external CSS.
+
+## 📚 출처 (Sources)
+- [S1] W3Schools — HTML CSS — https://www.w3schools.com/html/html_css.asp
+
+## 📝 변경 이력 (Change history)
+- 2026-06-23: Initial draft synthesized from the W3Schools "HTML CSS" page (Astra wiki-curation, P-Reinforce v3.1 format).