문제를 잘 정의하는 것은 문제를 절반 해결한 것이다. - 2023.12

이 문서는 읽기 전용입니다. 원본을 볼 수는 있지만 바꿀 수는 없습니다. 문제가 있다고 생각하면 관리자에게 문의하세요.
====== HTML Tutorial - HTML Iframes ======
<WRAP left notice 80%>
  * description : HTML Tutorial - HTML Iframes
  * author      : 오션
  * email       : shlim@repia.com
  * lastupdate  : 2021-05-21
</WRAP>
<WRAP clear></WRAP>
\\
=====The source of the article===== 
[[https://www.w3schools.com/html/html_iframe.asp|HTML Iframes]]\\
\\
%%HTML iframe%%은 웹 페이지 내부에 웹 페이지를 표시하는 데 사용됩니다.\\

=====HTML Iframe Syntax=====
%%HTML <iframe>%% 태그는 인라인 프레임(Inline frame)을 지정합니다.\\
\\
인라인 프레임은 현재 %%HTML%% 문서 내부에 다른 문서를 끼워 넣는 데 사용됩니다.\\

====Syntax====
<code html>
<iframe src="url" title="description">
</code>
\\

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

=====Iframe - Set Height and Width=====
''%%height%%'' 및 ''%%width%%'' 속성을 사용하여 %%iframe%%의 크기를 지정합니다.\\
\\
높이(height)와 너비(width)는 기본적으로 픽셀 단위로 지정됩니다.\\

====Example====
<code html>
<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>
</code>
\\

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

====Example====
<code html>
<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>
</code>

=====Iframe - Remove the Border=====
기본적으로 %%iframe%%에는 테두리(border)가 있습니다.\\
\\
테두리를 제거하려면, ''%%style%%'' 속성(attribute)을 추가하고, %%CSS%% ''%%border%%'' 속성(property)을 사용합니다.\\

====Example====
<code html>
<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>
</code>
\\
%%CSS%%를 사용하면 %%iframe%% 테두리의 크기, 스타일 및 색상을 변경할 수도 있습니다.\\

====Example====
<code html>
<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>
</code>

=====Iframe - Target for a Link=====
%%iframe%%을 링크의 대상 프레임(target frame)으로 사용할 수 있습니다.\\
\\
링크의 ''%%target%%'' 속성(attribute)은 %%iframe%%의 ''%%name%%'' 속성을 참조해야 합니다.\\

====Example====
<code html>
<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>
</code>

=====Chapter Summary=====
   * %%HTML%% ''%%<iframe>%%'' 태그는 인라인 프레임을 지정합니다.
   * ''%%src%%'' 속성은 삽입할 페이지의 %%URL%%을 정의합니다.
   * 항상 ''%%title%%'' 속성 포함 (스크린 리더를 위해서)
   * ''%%height%%'' 및 ''%%width%%'' 속성은 %%iframe%%의 크기를 지정합니다.
   * iframe 주변의 테두리를 제거하려면 ''%%border:none;%%'' 를 사용하세요

=====HTML iframe Tag=====
| Tag       | Description                 |
^ <iframe>  ^ 인라인 프레임을 정의합니다.  ^


{{tag>오션 HTML Iframes}}
문제를 잘 정의하는 것은 문제를 절반 해결한 것이다. - 2023.12

사용자 도구

사이트 도구

문서 도구
