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,121 @@
+---
+id: html-paragraphs
+title: "HTML Paragraphs"
+category: "Frontend"
+status: "draft"
+verification_status: "conceptual"
+canonical_id: ""
+aliases: ["paragraph tag", "p element", "br", "pre", "hr", "line break", "preformatted text", "horizontal rule"]
+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", "paragraphs", "text"]
+raw_sources: ["https://www.w3schools.com/html/html_paragraphs.asp"]
+applied_in: []
+github_commit: ""
+---
+
+# [[HTML Paragraphs]]
+
+## 🎯 한 줄 통찰 (One-line insight)
+The `<p>` element defines a paragraph that always starts on a new line with browser-added margins, and the browser collapses any extra spaces and blank lines in the source. [S1]
+
+## 🧠 핵심 개념 (Core concepts)
+- **`<p>` defines a paragraph** — always starts on a new line; browsers add white space (margin) before and after. [S1]
+- **Whitespace is collapsed** — the browser automatically removes any extra spaces and lines when the page is displayed. [S1]
+- **Display is unpredictable** — you cannot be sure how HTML will display; different screen sizes and resized windows give different results. [S1]
+- **`<br>` is a line break** — inserts a single line break without starting a new paragraph; it is an empty element with no end tag. [S1]
+- **`<pre>` preserves formatting** — preformatted text displays in a fixed-width font and keeps both spaces and line breaks. [S1]
+- **`<hr>` is a thematic break** — defines a thematic change in content, displayed as a horizontal rule. [S1]
+
+## 🧩 추출된 패턴 (Extracted patterns)
+- **Don't rely on source whitespace** — formatting must come from tags/CSS, not extra spaces or newlines. [S1]
+- **`<br>` for in-paragraph breaks** — use it when you want a new line without a new paragraph. [S1]
+- **`<pre>` for poems/code-like text** — when whitespace and line breaks must be preserved. [S1]
+
+## 📖 세부 내용 (Details)
+**HTML Paragraphs**
+A paragraph always starts on a new line, and browsers automatically add some white space (a margin) before and after a paragraph. The `<p>` element defines a paragraph: [S1]
+```html
+<p>This is a paragraph.</p>
+<p>This is another paragraph.</p>
+```
+
+**HTML Display**
+You cannot be sure how HTML will be displayed. Large or small screens, and resized windows, will create different results. With HTML, you cannot change the display by adding extra spaces or extra lines in your HTML code. The browser will automatically remove any extra spaces and lines when the page is displayed. [S1]
+
+**HTML Line Breaks**
+The HTML `<br>` element defines a line break. Use `<br>` if you want a line break (a new line) without starting a new paragraph: [S1]
+```html
+<p>This is<br>a paragraph<br>with line breaks.</p>
+```
+The `<br>` tag is an empty tag, which means that it has no end tag. [S1]
+
+**The HTML `<pre>` Element**
+The HTML `<pre>` element defines preformatted text. The text inside a `<pre>` element is displayed in a fixed-width font (usually Courier), and it preserves both spaces and line breaks: [S1]
+```html
+<pre>
+  My Bonnie lies over the ocean.
+
+  My Bonnie lies over the sea.
+</pre>
+```
+
+**HTML Horizontal Rules**
+The `<hr>` tag defines a thematic break in an HTML page, and is most often displayed as a horizontal rule. The `<hr>` element is used to separate content (or define a change) in an HTML page. The `<hr>` tag is an empty tag, which means that it has no end tag. [S1]
+
+**Tag reference**
+
+| Tag | Description |
+|---|---|
+| `<p>` | Defines a paragraph |
+| `<hr>` | Defines a thematic change in the content |
+| `<br>` | Inserts a single line break |
+| `<pre>` | Defines pre-formatted text |
+
+## 🛠️ 적용 사례 (Applied in summary)
+The poem inside `<pre>` shows when preformatting is needed (preserving the layout of verse), while `<br>` and `<hr>` show how to control breaks within and between content blocks. No external project/commit applications found in the source.
+
+## 💻 코드 패턴 (Code patterns)
+Two paragraphs (HTML):
+```html
+<p>This is a paragraph.</p>
+<p>This is another paragraph.</p>
+```
+Line breaks within a paragraph:
+```html
+<p>This is<br>a paragraph<br>with line breaks.</p>
+```
+Preformatted text:
+```html
+<pre>
+  My Bonnie lies over the ocean.
+
+  My Bonnie lies over the sea.
+</pre>
+```
+
+## ⚖️ 모순 및 업데이트 (Contradictions & updates)
+A common beginner expectation is corrected here: extra spaces and blank lines in the HTML source do NOT affect the rendered output — the browser collapses them. Use `<br>`, `<pre>`, or CSS for intended spacing. [S1]
+
+## ✅ 검증 상태 및 신뢰도
+- **상태:** draft
+- **검증 단계:** conceptual (실제 적용 사례 발견 시 applied/validated로 승격 가능)
+- **출처 신뢰도:** B (W3Schools — widely used educational reference, not a primary standards body)
+- **신뢰 점수:** 0.90
+- **중복 검사 결과:** 신규 생성 (New discovery)
+
+## 🔗 지식 그래프 (Knowledge Graph)
+- **상위/루트:** [[HTML Tutorial]]
+- **관련 개념:** [[HTML Headings]], [[HTML Basic]], [[HTML Formatting]], [[HTML Elements]]
+- **참조 맥락:** Referenced whenever laying out body text, breaks, and preformatted blocks on a page.
+
+## 📚 출처 (Sources)
+- [S1] W3Schools — HTML Paragraphs — https://www.w3schools.com/html/html_paragraphs.asp
+
+## 📝 변경 이력 (Change history)
+- 2026-06-23: Initial draft synthesized from the W3Schools "HTML Paragraphs" page (Astra wiki-curation, P-Reinforce v3.1 format).