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,133 @@
|
||||
---
|
||||
id: css-display
|
||||
title: "CSS Display"
|
||||
category: "Frontend"
|
||||
status: "draft"
|
||||
verification_status: "conceptual"
|
||||
canonical_id: ""
|
||||
aliases: ["display property", "block vs inline", "display block", "display inline-block", "display none"]
|
||||
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: ["css", "web", "frontend", "w3schools", "display", "layout", "block", "inline"]
|
||||
raw_sources: ["https://www.w3schools.com/css/css_display.asp"]
|
||||
applied_in: []
|
||||
github_commit: ""
|
||||
---
|
||||
|
||||
# [[CSS Display]]
|
||||
|
||||
## 🎯 한 줄 통찰 (One-line insight)
|
||||
The `display` property controls layout by specifying whether an HTML element is treated as a block or an inline element. [S1]
|
||||
|
||||
## 🧠 핵심 개념 (Core concepts)
|
||||
- **Layout control** — the `display` property is an important CSS property for controlling layout; it specifies whether an HTML element is treated as a block or an inline element. [S1]
|
||||
- **Block-level elements** — a block-level element ALWAYS starts on a new line and takes up the full width available (stretches out to the left and right as far as it can). Examples: `<div>`, `<h1>`–`<h6>`, `<p>`, `<form>`, `<header>`, `<footer>`, `<section>`. [S1]
|
||||
- **Inline elements** — an inline element DOES NOT start on a new line and only takes up as much width as necessary. Examples: `<span>`, `<a>`, `<img>`. [S1]
|
||||
- **Display changes presentation, not type** — setting the display property of an element only changes how the element is displayed, NOT what kind of element it is. [S1]
|
||||
- **`none` removes from flow** — `display: none;` makes an element completely hidden from the document flow (does not take up any space). [S1]
|
||||
|
||||
## 🧩 추출된 패턴 (Extracted patterns)
|
||||
- **Override default display** — change an element's default display to suit layout, e.g. make `<li>` inline or make `<span>`/`<a>` block. [S1]
|
||||
- **`inline-block`** — provides an inline-level block container that supports height, width, padding, and margin. [S1]
|
||||
|
||||
## 📖 세부 내용 (Details)
|
||||
The `display` property is an important CSS property for controlling layout. It specifies whether an HTML element is treated as a block or an inline element. [S1]
|
||||
|
||||
**Block-level Elements**
|
||||
A block-level element ALWAYS starts on a new line and takes up the full width available (stretches out to the left and right as far as it can). Examples include `<div>`, `<h1>`–`<h6>`, `<p>`, `<form>`, `<header>`, `<footer>`, and `<section>`. [S1]
|
||||
|
||||
**Inline Elements**
|
||||
An inline element DOES NOT start on a new line and only takes up as much width as necessary. Examples include `<span>`, `<a>`, and `<img>`. [S1]
|
||||
|
||||
**Common Display Values** [S1]
|
||||
|
||||
| Value | Description |
|
||||
|-------|-------------|
|
||||
| inline | Displays an element as an inline element |
|
||||
| block | Displays an element as a block element |
|
||||
| contents | Makes the container disappear, child elements move up a DOM level |
|
||||
| flex | Block-level flex container |
|
||||
| grid | Block-level grid container |
|
||||
| inline-block | Inline-level block container with height/width/padding/margin support |
|
||||
| none | Completely hidden from the document flow (does not take up any space) |
|
||||
|
||||
**Display each `<li>` as inline:** [S1]
|
||||
```css
|
||||
li {
|
||||
display: inline;
|
||||
}
|
||||
```
|
||||
|
||||
**Display `<span>` as a block element:** [S1]
|
||||
```css
|
||||
span {
|
||||
display: block;
|
||||
}
|
||||
```
|
||||
|
||||
**Display anchor `<a>` as a block element:** [S1]
|
||||
```css
|
||||
a {
|
||||
display: block;
|
||||
}
|
||||
```
|
||||
|
||||
**Applying multiple display values:** [S1]
|
||||
```css
|
||||
p.ex1 {display: none;}
|
||||
p.ex2 {display: inline;}
|
||||
p.ex3 {display: block;}
|
||||
p.ex4 {display: inline-block;}
|
||||
p.ex5 {display: flex;}
|
||||
p.ex6 {display: grid;}
|
||||
```
|
||||
|
||||
**Note:** Setting the display property of an element only changes how the element is displayed, NOT what kind of element it is. [S1]
|
||||
|
||||
## ⚖️ 비교 및 선택 기준 (Comparison & decision criteria)
|
||||
- **Block vs inline** — choose block (`display: block;`) when the element should start on a new line and take the full width; choose inline (`display: inline;`) when it should flow within text and take only the width it needs. [S1]
|
||||
- **`inline-block`** — choose this when you need inline placement (no forced new line) but still want to set height, width, padding, and margin. [S1]
|
||||
- **`none`** — choose when the element should be completely removed from the flow and take up no space. [S1]
|
||||
|
||||
## 🛠️ 적용 사례 (Applied in summary)
|
||||
The page's own examples are the applied cases: `<li>` set to inline, `<span>` and `<a>` set to block, and a paragraph set demonstrating `none`, `inline`, `block`, `inline-block`, `flex`, and `grid`. No external project/commit applications found in the source.
|
||||
|
||||
## 💻 코드 패턴 (Code patterns)
|
||||
Override default display to inline (language: CSS):
|
||||
```css
|
||||
li {
|
||||
display: inline;
|
||||
}
|
||||
```
|
||||
Override default display to block (language: CSS):
|
||||
```css
|
||||
span {
|
||||
display: block;
|
||||
}
|
||||
```
|
||||
|
||||
## ⚖️ 모순 및 업데이트 (Contradictions & updates)
|
||||
No contradictions found in the source.
|
||||
|
||||
## ✅ 검증 상태 및 신뢰도
|
||||
- **상태:** draft
|
||||
- **검증 단계:** conceptual (실제 적용 사례 발견 시 applied/validated로 승격 가능)
|
||||
- **출처 신뢰도:** B (W3Schools — widely used educational reference, not a primary standards body)
|
||||
- **신뢰 점수:** 0.89
|
||||
- **중복 검사 결과:** 신규 생성 (New discovery)
|
||||
|
||||
## 🔗 지식 그래프 (Knowledge Graph)
|
||||
- **상위/루트:** [[CSS Tutorial]]
|
||||
- **관련 개념:** [[CSS Visibility Hide]], [[CSS Max Width]], [[CSS Position]]
|
||||
- **참조 맥락:** Referenced whenever controlling how an element participates in page layout (block vs inline) or removing it from flow.
|
||||
|
||||
## 📚 출처 (Sources)
|
||||
- [S1] W3Schools — CSS Display — https://www.w3schools.com/css/css_display.asp
|
||||
|
||||
## 📝 변경 이력 (Change history)
|
||||
- 2026-06-23: Initial draft synthesized from the W3Schools "CSS Display" page (Astra wiki-curation, P-Reinforce v3.1 format).
|
||||
Reference in New Issue
Block a user