코딩의 시작, TCP School

HTML <iframe> 태그

정의 및 특징

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

예제

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

코딩연습 ▶

지원하는 브라우저 및 버전

태그명
<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	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	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 요소 수업 ⇒

연습문제

◀ 이전 다음 ▶

Search

<iframe>