HTML <iframe> 태그
예시
인라인 프레임은 다음과 같이 마크업됩니다.
<iframe src="https://www.w3schools.com" title="W3Schools Free
Online Web Tutorials"></iframe>
아래에서 더 많은 "직접 사용해 보기" 예를 살펴보세요.
정의 및 사용
<iframe>
태그는 인라인 프레임을 지정합니다 .
인라인 프레임은 현재 HTML 문서 내에 다른 문서를 포함하는 데 사용됩니다.
팁: CSS를 사용하여 스타일을 지정하십시오 <iframe>
(아래 예 참조).
팁: 에 대한 제목 속성을 항상 포함하는 것이 좋습니다 <iframe>
. 이것은 스크린 리더가 내용을 읽는 데 사용합니다 <iframe>
.
브라우저 지원
Element | |||||
---|---|---|---|---|---|
<iframe> | Yes | Yes | Yes | Yes | Yes |
속성
Attribute | Value | Description |
---|---|---|
allow | Specifies a feature policy for the <iframe> | |
allowfullscreen | true false |
Set to true if the <iframe> can activate fullscreen mode by calling the requestFullscreen() method |
allowpaymentrequest | true false |
Set to true if a cross-origin <iframe> should be allowed to invoke the Payment Request API |
height | pixels | Specifies the height of an <iframe>. Default height is 150 pixels |
loading | eager lazy |
Specifies whether a browser should load an iframe immediately or to defer loading of iframes until some conditions are met |
name | text | Specifies the name of an <iframe> |
referrerpolicy | no-referrer no-referrer-when-downgrade origin origin-when-cross-origin same-origin strict-origin-when-cross-origin unsafe-url |
Specifies which referrer information to send when fetching the iframe |
sandbox | allow-forms allow-pointer-lock allow-popups allow-same-origin allow-scripts allow-top-navigation |
Enables an extra set of restrictions for the content in an <iframe> |
src | URL | Specifies the address of the document to embed in the <iframe> |
srcdoc | HTML_code | Specifies the HTML content of the page to show in the <iframe> |
width | pixels | Specifies the width of an <iframe>. Default width is 300 pixels |
전역 속성
<iframe>
태그는 HTML의 전역 속성도 지원 합니다 .
이벤트 속성
<iframe>
태그는 HTML의 이벤트 속성 도 지원합니다 .
더 많은 예
예시
iframe 테두리 추가 및 제거(CSS 사용):
<iframe src="/default.asp" width="100%" height="300" style="border:1px solid
black;">
</iframe>
<iframe src="/default.asp" width="100%"
height="300" style="border:none;">
</iframe>
관련 페이지
HTML 튜토리얼: HTML Iframe
HTML DOM 참조: IFrame 개체
기본 CSS 설정
대부분의 브라우저는 <iframe>
다음 기본값으로 요소를 표시합니다.
iframe:focus {
outline: none;
}
iframe[seamless] {
display: block;
}