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>
This commit is contained in:
@@ -0,0 +1,119 @@
|
||||
---
|
||||
id: html-block-and-inline
|
||||
title: "HTML Block and Inline"
|
||||
category: "Frontend"
|
||||
status: "draft"
|
||||
verification_status: "conceptual"
|
||||
canonical_id: ""
|
||||
aliases: ["block-level elements", "inline elements", "display block", "display inline", "div vs span"]
|
||||
duplicate_of: ""
|
||||
source_trust_level: "B"
|
||||
confidence_score: 0.89
|
||||
created_at: 2026-06-23
|
||||
updated_at: 2026-06-23
|
||||
review_reason: ""
|
||||
merge_history: []
|
||||
tags: ["html", "web", "frontend", "w3schools", "layout"]
|
||||
raw_sources: ["https://www.w3schools.com/html/html_blocks.asp"]
|
||||
applied_in: []
|
||||
github_commit: ""
|
||||
---
|
||||
|
||||
# [[HTML Block and Inline]]
|
||||
|
||||
## 🎯 한 줄 통찰 (One-line insight)
|
||||
Every HTML element has a default display value — block-level elements start on a new line and take the full width, while inline elements flow within a line and take only the width they need. [S1]
|
||||
|
||||
## 🧠 핵심 개념 (Core concepts)
|
||||
- **Default display value** — every HTML element has a default display value depending on what type of element it is. The two most common display values are block and inline. [S1]
|
||||
- **Block-level element** — always starts on a new line; browsers automatically add some space (a margin) before and after it; takes up the full width available. [S1]
|
||||
- **Inline element** — does not start on a new line; only takes up as much width as necessary. [S1]
|
||||
- **`<div>`** — a block-level element used as a container for other HTML elements. [S1]
|
||||
- **`<span>`** — an inline container used to mark up a part of a text, or a part of a document. [S1]
|
||||
- **Nesting rule** — an inline element cannot contain a block-level element. [S1]
|
||||
|
||||
## 🧩 추출된 패턴 (Extracted patterns)
|
||||
- **Block container pattern** — use `<div>` to group block-level sections that each occupy their own horizontal band. [S1]
|
||||
- **Inline highlight pattern** — use `<span>` to style a fragment of text inside a larger block without breaking the flow of the line. [S1]
|
||||
- **Containment constraint** — block elements may contain inline elements, but inline elements may not contain block elements. [S1]
|
||||
|
||||
## 📖 세부 내용 (Details)
|
||||
**Block-level Elements.** A block-level element always starts on a new line, and the browsers automatically add some space (a margin) before and after the element. A block-level element always takes up the full width available (stretches out to the left and right as far as it can). Two commonly used block elements are `<p>` and `<div>`. [S1]
|
||||
```html
|
||||
<p>Hello World</p>
|
||||
<div>Hello World</div>
|
||||
```
|
||||
|
||||
Here are the block-level elements in HTML: [S1]
|
||||
|
||||
`<address>`, `<article>`, `<aside>`, `<blockquote>`, `<canvas>`, `<dd>`, `<div>`, `<dl>`, `<dt>`, `<fieldset>`, `<figcaption>`, `<figure>`, `<footer>`, `<form>`, `<h1>`-`<h6>`, `<header>`, `<hr>`, `<li>`, `<main>`, `<nav>`, `<noscript>`, `<ol>`, `<p>`, `<pre>`, `<section>`, `<table>`, `<tfoot>`, `<ul>`, `<video>`
|
||||
|
||||
**Inline Elements.** An inline element does not start on a new line. An inline element only takes up as much width as necessary. This is a `<span>` element inside a paragraph. [S1]
|
||||
```html
|
||||
<span>Hello World</span>
|
||||
```
|
||||
|
||||
Here are the inline elements in HTML: [S1]
|
||||
|
||||
`<a>`, `<abbr>`, `<acronym>`, `<b>`, `<bdo>`, `<big>`, `<br>`, `<button>`, `<cite>`, `<code>`, `<dfn>`, `<em>`, `<i>`, `<img>`, `<input>`, `<kbd>`, `<label>`, `<map>`, `<object>`, `<output>`, `<q>`, `<samp>`, `<script>`, `<select>`, `<small>`, `<span>`, `<strong>`, `<sub>`, `<sup>`, `<textarea>`, `<time>`, `<tt>`, `<var>`
|
||||
|
||||
> **Note:** An inline element cannot contain a block-level element! [S1]
|
||||
|
||||
**The `<div>` Element.** The `<div>` element is often used as a container for other HTML elements. [S1]
|
||||
```html
|
||||
<div style="background-color:black;color:white;padding:20px;">
|
||||
<h2>London</h2>
|
||||
<p>London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.</p>
|
||||
</div>
|
||||
```
|
||||
|
||||
**The `<span>` Element.** The `<span>` element is an inline container used to mark up a part of a text, or a part of a document. [S1]
|
||||
```html
|
||||
<p>My mother has <span style="color:blue;font-weight:bold;">blue</span> eyes and my father has <span style="color:darkolivegreen;font-weight:bold;">dark green</span> eyes.</p>
|
||||
```
|
||||
|
||||
**HTML Tag Reference.** [S1]
|
||||
|
||||
| Tag | Description |
|
||||
|---|---|
|
||||
| `<div>` | Defines a section in a document (block-level) |
|
||||
| `<span>` | Defines a section in a document (inline) |
|
||||
|
||||
## 🛠️ 적용 사례 (Applied in summary)
|
||||
The black-background `<div>` (London) and the colored-`<span>` eye-color sentence are the canonical applied examples of block vs. inline behavior. No external project/commit applications found in the source.
|
||||
|
||||
## 💻 코드 패턴 (Code patterns)
|
||||
Block element (full width, new line):
|
||||
```html
|
||||
<div>Block content</div>
|
||||
```
|
||||
Inline element (flows within text):
|
||||
```html
|
||||
<p>Text with an <span>inline</span> fragment.</p>
|
||||
```
|
||||
|
||||
## ⚖️ 비교 및 선택 기준 (Comparison & decision criteria)
|
||||
- **Use a block-level element (e.g. `<div>`, `<p>`)** when the content should occupy its own horizontal band and start on a new line. [S1]
|
||||
- **Use an inline element (e.g. `<span>`)** when the content should sit within the flow of a line and take only the width it needs. [S1]
|
||||
- **Constraint:** an inline element cannot contain a block-level element. [S1]
|
||||
|
||||
## ⚖️ 모순 및 업데이트 (Contradictions & updates)
|
||||
No contradictions found in the source. [S1]
|
||||
|
||||
## ✅ 검증 상태 및 신뢰도
|
||||
- **상태:** draft
|
||||
- **검증 단계:** conceptual (실제 적용 사례 발견 시 applied/validated로 승격 가능)
|
||||
- **출처 신뢰도:** B (W3Schools — widely used educational reference, not a primary standards body)
|
||||
- **신뢰 점수:** 0.89
|
||||
- **중복 검사 결과:** 신규 생성 (New discovery)
|
||||
|
||||
## 🔗 지식 그래프 (Knowledge Graph)
|
||||
- **상위/루트:** [[HTML Tutorial]]
|
||||
- **관련 개념:** [[HTML Div]], [[HTML Classes]], [[HTML Id]], [[HTML Tables]]
|
||||
- **참조 맥락:** Referenced whenever deciding how an element flows in a layout — on its own line versus within a line of text.
|
||||
|
||||
## 📚 출처 (Sources)
|
||||
- [S1] W3Schools — HTML Block and Inline Elements — https://www.w3schools.com/html/html_blocks.asp
|
||||
|
||||
## 📝 변경 이력 (Change history)
|
||||
- 2026-06-23: Initial draft synthesized from the W3Schools "HTML Block and Inline Elements" page (Astra wiki-curation, P-Reinforce v3.1 format).
|
||||
Reference in New Issue
Block a user