wiki:html:html_note:html_iframes
목차
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>태그는 인라인 프레임을 지정합니다. src속성은 삽입할 페이지의 URL을 정의합니다.- 항상
title속성 포함 (스크린 리더를 위해서) height및width속성은 iframe의 크기를 지정합니다.- iframe 주변의 테두리를 제거하려면
border:none;를 사용하세요
HTML iframe Tag
| Tag | Description |
| <iframe> | 인라인 프레임을 정의합니다. |
|---|
/volume1/web/dokuwiki/data/pages/wiki/html/html_note/html_iframes.txt · 마지막으로 수정됨: 2023/01/13 18:44 (바깥 편집)
별도로 명시하지 않을 경우, 이 위키의 내용은 다음 라이선스에 따라 사용할 수 있습니다: CC Attribution-Share Alike 4.0 International
