..

Search

<iframe>

HTML <iframe> 태그


정의 및 특징

<iframe> 태그는 인라인 프레임(inline frame)을 정의할 때 사용합니다.

 

인라인 프레임은 현재 HTML 문서에 다른 문서를 포함시킬 때 사용합니다.

<iframe> 요소의 시작 태그와 종료 태그 사이에는 <iframe> 요소를 지원하지 않는 브라우저를 위한 텍스트를 포함할 수 있습니다.


예제
<iframe src="http://tcpschool.com">
    <p>현재 사용 중인 브라우저는 iframe 요소를 지원하지 않습니다!</p>
</iframe>

코딩연습 ▶


지원하는 브라우저 및 버전

태그명

chrome

edge

ie

firefox

safari

opera

<iframe> 1.0 지원함 지원함 지원함 지원함 지원함

HTML5에서 변경된 사항

HTML5에서는 <iframe> 태그의 align, frameborder, longdesc, marginheight, marginwidth, scrolling 속성이 더 이상 지원되지 않도록 변경되었습니다. 또한, sandbox 속성과 srcdoc 속성이 새롭게 추가되었습니다.


HTML과 XHTML에서의 차이점

XHTML에서는 name 속성을 더 이상 지원하지 않으므로, name 속성 대신 전역 속성인 id 속성을 사용해야 합니다.


사용할 수 있는 속성

html5 : HTML5에서 새롭게 추가된  속성

속성명   속성값 설명

align

 

left

right

top

middle

bottom

주변 요소에 따라 <iframe> 요소가 정렬되는 방법을 명시함.

HTML5에서는 더 이상 지원하지 않음.

frameborder

 

0

1

<iframe> 요소 주위에 테두리(border)를 보여줄지 여부를 명시함.

HTML5에서는 더 이상 지원하지 않음.

height

 

픽셀

<iframe> 요소의 높이를 명시함.

longdesc

 

URL

<iframe> 요소에 보일 콘텐츠에 대한 설명을 담고 있는 페이지를 명시함.

HTML5에서는 더 이상 지원하지 않음.

marginheight

 

픽셀

<iframe> 요소에 보일 콘텐츠의 위쪽과 아래쪽 마진(margin)을 명시함.

HTML5에서는 더 이상 지원하지 않음.

marginwidth

 

픽셀

<iframe> 요소에 보일 콘텐츠의 왼쪽과 오른쪽 마진(margin)을 명시함.

HTML5에서는 더 이상 지원하지 않음.

name

 

텍스트

<iframe> 요소의 이름(name)을 명시함.

sandbox

html5

allow-forms

allow-pointer-lock

allow-popups

allow-same-origin

allow-scripts

allow-top-navigation

<iframe> 요소에 보일 콘텐츠에 대한 추가적인 제한 사항(restrictions)들의 집합을 명시함.

scrolling

 

yes

no

auto

<iframe> 요소에 스크롤바(scrollbar)를 표시할지 여부를 명시함.

HTML5에서는 더 이상 지원하지 않음.

src

 

URL

<iframe> 요소에 보일 문서의 URL를 명시함.

srcdoc

html5

HTML 코드

<iframe> 요소에 보일 웹 페이지의 HTML 코드를 명시함.

width

 

픽셀

<iframe> 요소의 너비를 명시함.


CSS 기본값

iframe:focus {

  outline: none;

}

 

iframe[seamless] {

  display: block;

}


DOM 인터페이스

interface HTMLIFrameElement : HTMLElement {

  attribute DOMString src;

  attribute DOMString srcdoc;

  attribute DOMString name;

  [SameObject, PutForwards=value] readonly attribute DOMTokenList sandbox;

  attribute boolean allowFullscreen;

  attribute boolean allowPaymentRequest;

  attribute DOMString width;

  attribute DOMString height;

  attribute DOMString referrerPolicy;

  readonly attribute Document? contentDocument;

  readonly attribute WindowProxy? contentWindow;

};


연관 페이지

HTML iframe 요소 수업 ⇒


연습문제