목차

HTML Tutorial - HTML Iframes

  • description : HTML Tutorial - HTML Iframes
  • author : 오션
  • email : shlim@repia.com
  • lastupdate : 2021-05-21


The source of the article

HTML Iframes

HTML iframe은 웹 페이지 내부에 웹 페이지를 표시하는 데 사용됩니다.

HTML Iframe Syntax

HTML <iframe> 태그는 인라인 프레임(Inline frame)을 지정합니다.

인라인 프레임은 현재 HTML 문서 내부에 다른 문서를 끼워 넣는 데 사용됩니다.

Syntax

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


Tip:
항상 <iframe>에 대한 title 속성(attribute)을 포함하는 것이 좋습니다.
이것은 스크린 리더에서 iframe의 내용을 읽는 데 사용됩니다.

Iframe - Set Height and Width

height 및 width 속성을 사용하여 iframe의 크기를 지정합니다.

높이(height)와 너비(width)는 기본적으로 픽셀 단위로 지정됩니다.

Example

<body>
 
  <h2>HTML Iframes</h2>
  <p>
    You can use the height and width attributes to specify the size of the iframe:
  </p>
 
  <iframe src="https://wikidocs.net/" height="200" width="300" title="WikiDocs"></iframe>
 
</body>


또는 style 속성(attribute)을 추가하고 CSS height 및 width 속성(properties)을 사용할 수 있습니다.

Example

<body>
 
  <h2>HTML IFrames</h2>
  <p>
    You can also use the CSS height and width properties to specify the size of the iframe:
  </p>
 
  <iframe src="https://wikidocs.net/" style="height:200px; width:300px;" title="WikiDocs"></iframe>
 
</body>

Iframe - Remove the Border

기본적으로 iframe에는 테두리(border)가 있습니다.

테두리를 제거하려면, style 속성(attribute)을 추가하고, CSS border 속성(property)을 사용합니다.

Example

<body>
 
  <h2>Remove the Iframe Border</h2>
  <p>
    To remove the default border of the iframe, use CSS:
  </p>
 
  <iframe src="https://wikidocs.net/" style="border:none;" title="WikiDocs"></iframe>
 
</body>


CSS를 사용하면 iframe 테두리의 크기, 스타일 및 색상을 변경할 수도 있습니다.

Example

<body>
 
  <h2>Custom Iframe Border</h2>
  <p>
    With CSS, you can also change the size, style and color of the iframe's border:
  </p>
 
  <iframe src="https://wikidocs.net/" style="border:2px solid red;" title="WikiDocs"></iframe>
 
</body>

Iframe - Target for a Link

iframe을 링크의 대상 프레임(target frame)으로 사용할 수 있습니다.

링크의 target 속성(attribute)은 iframe의 name 속성을 참조해야 합니다.

Example

<body>
 
  <h2>Iframe - Target for a Link</h2>
 
  <iframe src="demo_iframe.htm" name="iframe_a" height="300px" width="100%" title="Iframe Example"></iframe>
 
  <p><a href="https://www.w3schools.com" target="iframe_a">W3Schools.com</a></p>
 
  <p>When the target attribute of a link matches the name of an iframe, the link will open in the iframe.</p>
  <!-- Content Security Policy of your site blocks some resources
Some resources are blocked because their origin is not listed in your site's Content Security Policy (CSP). Your site's CSP is allowlist-based, so resources must be listed in the allowlist in order to be accessed. -->
 
</body>

Chapter Summary

HTML iframe Tag

Tag Description
<iframe> 인라인 프레임을 정의합니다.
, ,