HTML 입문 | HTML 공간 분할 | HTML 아이플레임(iframe)

iframe 요소

iframe이란 inline frame의 약자이다.
iframe 요소를 이용하면 해당 웹 페이지 안에 어떠한 제한 없이 또 다른 하나의 웹 페이지를 삽입할 수 있다.

문법은 아래와 같다.

<iframe src="URL"></iframe>

iframe 요소는 frame 요소와는 달리 종료 태그가 존재한다. 또한, iframe 요소는 명시된 크기로 삽입되는 창의 크기가 고정된다.

<iframe src="//www.devkuma.com" style="width:100%; height:300px"></iframe>

코드 실행

iframe 요소의 테두리 변경

iframe 요소는 기본적으로 검정색 테두리(border)를 가진다. 이러한 테두리의 스타일은 style 속성에서 border 속성을 이용하면 변경할 수 있다.

<iframe src="//www.devkuma.com" style="width:100%; height:300px; border: 3px dashed maroon">
</iframe>

테두리를 표현하고 싶지 않으면 style 속성에서 border 속성값을 none으로 설정하면 된다.

<iframe src="//www.devkuma.com" style="width:100%; height:300px; border:none"></iframe>

코드 실행

iframe 요소의 페이지 변경하기

<a>태그를 이용하면 iframe 요소의 페이지를 변경할 수 있다. <a> 태그의 target 속성과 iframe 요소의 name 속성을 연결하면, <a>태그를 통해 iframe 요소의 페이지를 변경할 수 있다.

<iframe src="//www.devkuma.com" name="frame_target" style="width:100%; height:400px;"></iframe>
<p>
  <a href="//www.google.com" target="frame_target">구글로 이동</a>
</p>

코드 실행

그밖에

그밖에 <frameset>, <frame>, <noframes> 요소가 있는데, HTML5 표준 권고안에서 더 이상 지원하지 않는다. 따라서, 하나의 페이지에 여러 페이지를 표현하기 위해서는 <iframe> 요소를 사용해야 한다.