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,125 @@
+---
+id: html-iframes
+title: "HTML Iframes"
+category: "Frontend"
+status: "draft"
+verification_status: "conceptual"
+canonical_id: ""
+aliases: ["iframe", "inline frame", "embed page", "iframe target", "iframe src"]
+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", "embedding"]
+raw_sources: ["https://www.w3schools.com/html/html_iframe.asp"]
+applied_in: []
+github_commit: ""
+---
+
+# [[HTML Iframes]]
+
+## 🎯 한 줄 통찰 (One-line insight)
+An HTML iframe (`<iframe>`) is an inline frame that embeds another HTML document inside the current page. [S1]
+
+## 🧠 핵심 개념 (Core concepts)
+- **`<iframe>` embeds a document** — it specifies an inline frame used to embed another document within the current HTML document. [S1]
+- **`src` attribute** — defines the URL of the page to embed. [S1]
+- **`title` attribute** — it is good practice to always include a `title`; screen readers use it to read out what the iframe content is. [S1]
+- **Sizing** — `height` and `width` attributes (in pixels) set the iframe size; CSS `style` can be used instead. [S1]
+- **Border control** — use `style="border:none;"` to remove the default border, or a CSS `border` value to customize it. [S1]
+- **Link target** — naming an iframe (`name="..."`) lets a link target it so the linked page loads inside the iframe. [S1]
+
+## 🧩 추출된 패턴 (Extracted patterns)
+- **Embed pattern** — `<iframe src="url" title="description"></iframe>` to place an external/internal page inside the current one. [S1]
+- **Styling pattern** — control size and border with either HTML attributes (`height`/`width`) or inline CSS (`style`). [S1]
+- **Named-target pattern** — give the iframe a `name`, then point a link's `target` at that name to load content into the frame. [S1]
+
+## 📖 세부 내용 (Details)
+**HTML Iframes.** An HTML iframe is used to display a web page within a web page. The HTML `<iframe>` tag specifies an inline frame. An inline frame is used to embed another document within the current HTML document. [S1]
+
+**Iframe Syntax.** [S1]
+```html
+<iframe src="url" title="description"></iframe>
+```
+
+> **Tip:** It is a good practice to always include a `title` attribute for the `<iframe>`. This is used by screen readers to read out what the content of the iframe is. [S1]
+
+**Iframe — Set Height and Width.** Use the `height` and `width` attributes to specify the size of the iframe. The attribute values are specified in pixels by default, but they can also be in percent (like "80%"). [S1]
+```html
+<iframe src="demo_iframe.htm" height="200" width="300" title="Iframe Example"></iframe>
+```
+Or you can use the CSS `height` and `width` properties: [S1]
+```html
+<iframe src="demo_iframe.htm" style="height:200px;width:300px;" title="Iframe Example"></iframe>
+```
+
+**Iframe — Remove the Border.** By default, an iframe has a border around it. To remove the border, add the `style` attribute and use the CSS `border` property: [S1]
+```html
+<iframe src="demo_iframe.htm" style="border:none;" title="Iframe Example"></iframe>
+```
+With CSS, you can also change the size, style, and color of the iframe's border: [S1]
+```html
+<iframe src="demo_iframe.htm" style="border:2px solid red;" title="Iframe Example"></iframe>
+```
+
+**Iframe — Target for a Link.** An iframe can be used as the target frame for a link. The `target` attribute of the link must refer to the `name` attribute of the iframe. [S1]
+```html
+<iframe src="demo_iframe.htm" name="iframe_a" title="Iframe Example"></iframe>
+
+<p><a href="https://www.w3schools.com" target="iframe_a">W3Schools.com</a></p>
+```
+
+**Chapter Summary.** [S1]
+- The HTML `<iframe>` tag specifies an inline frame.
+- The `src` attribute defines the URL of the page to embed.
+- Always include a `title` attribute (for screen readers).
+- The `height` and `width` attributes specify the size of the iframe.
+- Use `border:none;` to remove the border around the iframe.
+
+**HTML iframe Tag.** [S1]
+
+| Tag | Description |
+|---|---|
+| `<iframe>` | Defines an inline frame |
+
+## 🛠️ 적용 사례 (Applied in summary)
+The `demo_iframe.htm` embeds (sized, borderless, custom-border) and the named `iframe_a` used as a link target are the canonical applied examples. No external project/commit applications found in the source.
+
+## 💻 코드 패턴 (Code patterns)
+Basic iframe (HTML):
+```html
+<iframe src="url" title="description"></iframe>
+```
+Sized, borderless iframe (HTML):
+```html
+<iframe src="demo_iframe.htm" style="height:200px;width:300px;border:none;" title="Iframe Example"></iframe>
+```
+Iframe as link target (HTML):
+```html
+<iframe src="demo_iframe.htm" name="iframe_a" title="Iframe Example"></iframe>
+<a href="https://www.w3schools.com" target="iframe_a">W3Schools.com</a>
+```
+
+## ⚖️ 모순 및 업데이트 (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 JavaScript]], [[HTML Block and Inline]], [[HTML Tables]]
+- **참조 맥락:** Referenced whenever one web page must be embedded inside another, or a link should load content into a named frame.
+
+## 📚 출처 (Sources)
+- [S1] W3Schools — HTML Iframes — https://www.w3schools.com/html/html_iframe.asp
+
+## 📝 변경 이력 (Change history)
+- 2026-06-23: Initial draft synthesized from the W3Schools "HTML Iframes" page (Astra wiki-curation, P-Reinforce v3.1 format).