Files
2nd/10_Wiki/Topic_HTML/HTML_Iframes.md
T
koriweb 9609c04755 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

5.8 KiB

id, title, category, status, verification_status, canonical_id, aliases, duplicate_of, source_trust_level, confidence_score, created_at, updated_at, review_reason, merge_history, tags, raw_sources, applied_in, github_commit
id title category status verification_status canonical_id aliases duplicate_of source_trust_level confidence_score created_at updated_at review_reason merge_history tags raw_sources applied_in github_commit
html-iframes HTML Iframes Frontend draft conceptual
iframe
inline frame
embed page
iframe target
iframe src
B 0.89 2026-06-23 2026-06-23
html
web
frontend
w3schools
embedding
https://www.w3schools.com/html/html_iframe.asp

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]
  • Sizingheight 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]

<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]

<iframe src="demo_iframe.htm" height="200" width="300" title="Iframe Example"></iframe>

Or you can use the CSS height and width properties: [S1]

<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]

<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]

<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]

<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):

<iframe src="url" title="description"></iframe>

Sized, borderless iframe (HTML):

<iframe src="demo_iframe.htm" style="height:200px;width:300px;border:none;" title="Iframe Example"></iframe>

Iframe as link target (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)

📚 출처 (Sources)

📝 변경 이력 (Change history)

  • 2026-06-23: Initial draft synthesized from the W3Schools "HTML Iframes" page (Astra wiki-curation, P-Reinforce v3.1 format).