..

Search

20) iframe 요소

iframe 요소


iframe 요소

iframe이란 inline frame의 약자입니다.

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

문법

<iframe src="삽입할페이지주소"></iframe>

 

iframe 요소는 frame 요소와는 달리 종료 태그가 존재합니다.

또한, iframe 요소는 명시된 크기로 삽입되는 창의 크기가 고정됩니다.

예제

 

<iframe src="/css/intro" style="width:100%; height:300px">

</iframe>

 

코딩연습 ▶


iframe 요소의 테두리 변경

iframe 요소는 기본적으로 검정색 테두리(border)를 가집니다.

이러한 테두리의 스타일은 style 속성에서 border 속성을 이용하면 변경할 수 있습니다.

예제

 

<iframe src="/css/intro" style="width:100%; height:300px; border: 3px dashed maroon">

</iframe>

 

코딩연습 ▶

 

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

예제

 

<iframe src="/css/intro" style="width:100%; height:300px; border:none">

</iframe>

 

코딩연습 ▶


iframe 요소의 페이지 변경하기

<a>태그를 이용하면 iframe 요소의 최초 페이지를 중간에 변경할 수 있습니다.

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

예제

<iframe src="/css/intro" name="frame_target" style="width:100%; height:400px;"></iframe>

<p>

    <a href="/php/intro" target="frame_target">PHP 수업 확인하러 가기 =></a>

</p>

코딩연습 ▶


프레임셋(frameset)

프레임셋(frameset)을 이용하면 하나의 브라우저 창에 둘 이상의 페이지를 표시할 수 있습니다.

이러한 프레임셋은 iframe 요소와는 달리 하나 이상의 페이지를 동시에 가질 수 있습니다.

또한, noresize 속성을 명시하지 않으면, 사용자가 마음대로 페이지의 크기를 조절할 수 있습니다.

 

프레임셋에서 각각의 페이지는 frame 요소로 표현됩니다.

frame 요소는 iframe 요소와는 달리 종료 태그를 가지지 않습니다.

 

noframes 요소는 해당 브라우저가 frame 요소를 지원하지 않을 때 보여지는 문자열을 저장합니다.

 

frameset, frame, noframes 요소는 더는 HTML5 표준 권고안에서 지원하지 않습니다.
따라서 하나의 브라우저 창에 여러 페이지를 표현하고 싶을 때는 iframe 요소를 사용하거나 CSS를 이용하여 표현해야 합니다.

수직 프레임셋

수직 프레임셋은 하나의 브라우저 창을 세로 방향으로 분리하여 표현합니다.

예제

<frameset cols="25%,*,25%">

<frame name="left" src="/html/intro"/>

<frame name="center" src="/css/intro"/>

<frame name="right" src="/php/intro"/>

<noframes>

    <body> 이 브라우저는 frame태그를 지원하지 않습니다! </body>

</noframes>

</frameset>

코딩연습 ▶


수평 프레임셋

수평 프레임셋은 하나의 브라우저 창을 가로 방향으로 분리하여 표현합니다.

예제

<frameset rows="20%,60%,20%">

<frame name="top" src="/html/intro" noresize="noresize" />

<frame name="center" src="/css/intro" noresize="noresize" />

<frame name="bottom" src="/php/intro" noresize="noresize" />

<noframes>

    <body>

        이 브라우저는 frame태그를 지원하지 않습니다!

    </body>

</noframes>

</frameset>

코딩연습 ▶

 

위의 예제는 frame 요소에 noresize 속성을 명시하였으므로, 사용자가 창의 크기를 조절할 수 없습니다.


연습문제