iFRAME | Inline FRAME(subwindow)

Home > Document > HTML > 고급 과정 > iframe element

페이지 목차

IFRAME

앞 페이지에서 Frameset 을 알아 보았는데, 이 번에는 iFrame에 대해서 알아 보겠습니다. 앞 페이지의 Frameset의 경우 Frameset 의 정보를 담고 있는 Frameset Page 가 필요했던 반면 iFrame(Inline FRAME)의 경우 <IFRAME> </IFRAME> 이라는 Tag 만으로 다른 문서를 원하는 위치에 삽입시킬 수 있습니다. <IMG> Tag 으로 Image 파일을 문서에 링크시키는 것과 같은 방법이라고 생각하면 되겠습니다.

**Legend** : Optional, Forbidden, Empty, Deprecated, Loose DTD, Frameset DTD [표 보는 방법]
Element	Start tag	End tag	Empty	Deprecated	DTD
IFRAME					L

IFRAME Element

name

링크시 target frame 이름 또는 scripting 할 때 호출될 이름 (한글 안됨)
예)	<iframe name="subwin">

src

iframe에 들어갈 source 파일의 uri
예)	<iframe name="subwin" src="../html/top.html>

frameborder

프레임의 테두리, 사용값 (0 \| 1) (Default 1)
예)	<iframe frameborder="0">

marginwidth

Inline FRAME의 좌측 여백, 사용 단위는 (색상, 길이단위 참조)
예)	<iframe marginwidth="10">

marginheight

Inline FRAME의 상단 여백, 사용 단위는 (색상, 길이단위 참조)
예)	<iframe marginwidth="10" marginheight="15">

scrolling

scroll bar 의 유뮤, 사용값 (no \| auto \| yes) (Default auto)
예)	<iframe scrolling="no">

height

Inline FRAME 창의 높이(기본값 : 150 Pixel), 사용 단위는 (색상, 길이단위 참조)
예)	<iframe height="400">

width

Inline FRAME 창의 폭(기본값 : 300 Pixel), 사용 단위는 (색상, 길이단위 참조)
예)	<iframe width="600">

공통 속성

align, class, id, dir, style 등은 ( 공통 속성표 를 참조)

iframe 예제

iframe 의 장점이라면 서로 다른 설정을 가진 여러 개의 파일을 한 문서에 불러 올 수 있다는 것 입니다. 앞의 Division Marker 부분에서 Transitioal Mode와 Strict Mode를 비교해 보았지만 이런 DTD 선언은 한 문서에 두가지 설정을 할 수 없습니다. 하지만 iframe 을 이용하면 그게 가능해 지죠. 우선 두 가지 DTD Mode를 iframe 으로 한 군데 불러 보겠습니다. 아래의 2개의 파일을 Myfolder/html 폴더에 각각 주어진 이름으로 저장 하시져...

입력 - transitional.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML>
    <HEAD>
        <TITLE>Transitional Mode DTD</TITLE>
    </HEAD>
    <BODY>
        <SPAN style="background-color:gold;width:200px;height:200px;">
            Transitional Mode DTD
        </SPAN>
    </BODY>
</HTML>

입력 - strict.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN">
<HTML>
    <HEAD>
        <TITLE>Strict Mode DTD</TITLE>
    </HEAD>
    <BODY>
        <SPAN style="background-color:gold;width:200px;height:200px;">
            Strict Mode DTD
        </SPAN>
    </BODY>
</HTML>

이제 아래의 파일을 하나 더 만들어 Myfolder/html 폴더에 저장하고 실행합니다.

입력 - dtd_mode.html

<HTML>
    <HEAD>
        <TITLE></TITLE>
    </HEAD>
    <BODY>
        <CENTER>
            <IFRAME name="iframe01" src="iframe/transitional.html" marginwidth="25"
            marginheight="25" width="250" height="250" frameborder="0"></IFRAME>
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <IFRAME name="iframe02" src="iframe/strict.html" marginwidth="25" 
            marginheight="25" width="250" height="250"></IFRAME>
        </CENTER>
    </BODY>
</HTML>

출력결과

marginwidth 와 marginheight 가 조절이 안되는 경우
iframe 으로 불러오는 문서의 BODY Tag에 leftmargin 과 topmargin 이 지정되어 있으면 marginwidth 와 marginheight 가 조절이 안됩니다.

Transparent Color 와 allowTransparency attribute

Transparent Color

Block-Level Element 들에 대해서 지금 까지 수 차례에 걸쳐 다루어 보았는데, 혹시 이런 궁금증을 가지지는 않았는지 모르겠군요.

"Block-Level Element 의 배경색은 무슨 색일까?"

라는 궁금증 말입니다. 이제 부터 Block-Level Element 의 배경색에 대해서 알아 보도록 하겠습니다. 알고 있겠지만 Table Element 에서 table > tr > td 순으로 배경색(bgcolor)이 상속됩니다. 그렇다면 결론은 투명(transparent)한 색이라는 거죠. 상위의 배경색을 물려 받기 위해서는 투명색이 아니면 안되겠죠...정리하자면 "Block-Level Element 의 배경색은 투명(transparent)색이다." 가 되겠습니다.

allowTransparency attribute (*IE Only)

allowTransparency attribute 는 단어의 뜻 그대로 투명도(Transparency)의 허용(allow) 여부(boolean : 참 | 거짓) 를 결정하는 속성입니다. 이 속성은 FRAME Element 와 iFRAME Element 에만 적용되는 속성입니다. 지금 배우고 있는 iFRAME 의 경우를 예로 들자면 iFrame Element 를 사용해서 불러올 문서가 현재 문서의 배경색으로 보이게 된다는 말입니다. 즉, 현재 작업 중인 문서의 배경색이 'gold' 라면 iFrame 으로 들어오는 문서도 'gold' 배경색으로 보인다는 말이죠. 이 때 allowTransparency 를 허용(true)하느냐, 허용하지않느냐(false)에 따라 그럴 수도 있고 그렇지 않을 수도 있습니다. 다음은 iFrame으로 문서를 불러와서 현재 문서의 배경색을 적용시키는 예제입니다. 따로 페이지를 만들 필요없이 앞에 만들었던 transitional.html 과 dtd_mode.html 을 사용하도록 합시다. 아래의 굵은 글씨 부분을 추가하시져...

입력 - transitional.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML>
    <HEAD>
        <TITLE>Transitional Mode DTD</TITLE>
    </HEAD>
    <BODY style="background-color : transparent;">
        <SPAN style="background-color:gold;width:200px;height:200px;">
            Transitional Mode DTD
        </SPAN>
    </BODY>
</HTML>

입력 - dtd_mode.html

<HTML>
    <HEAD>
        <TITLE></TITLE>
    </HEAD>
    <BODY>
        <CENTER>
            <IFRAME allowTransparency="true" name="iframe01" src="iframe/transitional.html"
            marginwidth="25" marginheight="25" width="250" height="250" frameborder="0">
            </IFRAME>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <IFRAME name="iframe02" src="iframe/strict.html" marginwidth="25" 
            marginheight="25" width="250" height="250"></IFRAME>
        </CENTER>
    </BODY>
</HTML>

출력결과

결과와 같이 allowTransparency="true" 로 설정하고 iframe 으로 불러온 transitional.html 문서의 배경색이 문서의 배경색이 되었습니다. 물론 이런 효과를 내는 방법은 이 방법 말고도 여러가지 있습니다. 이 Transparent color 에 대해서는 CSS에서 보다 심도있게 다루어 보도록 하겠습니다.

iframe 은 왜 쓸데도 없는 End Tag이 붙어 있을까?

아마도 호기심 많은 여러분들 모두 궁금하게 여겼으리라 봅니다. 무었이든지 이유없이 생기는 건 없다고 하지 않습니까? W3C 가 바보일 리도 없구 말이져. iframe 에 End Tag 이 붙어 있는 이유는 바로 iframe을 지원하지 않는 브라우저를 위해서 입니다. iframe 을 지원하지 않는 브라우저를 사용하는 사용자 입장에서는 iframe 이 들어간 문서를 보다가 중간에 문액이 끊긴다든지, 예를 들어 '아래의 그림을 보시오!' 라고 했는데, 그림은 커녕 글자도 안보인다든지 하면 곤란한 일이기 때문에 원래는 아래와 같이 iframe Tag 사이에 iframe 으로 불러온 문서와 동일한 문서의 Link 를 만들어서 문서를 볼 수 있게 해 주는 겁니다.

입력

<IFRAME src="http://www.webdesigners.co.kr/html/see_me.html">브라우저가 iframe을 지원하지
않습니다. 관련 문서를 보려면 <A href="http://www.webdesigners.co.kr/html/see_me.html">
여기</A>를 클릭하세요.</IFRAME>

이렇게 위와 같이 Coding 하면 iframe을 지원하는 브라우저에서는 iframe 으로 불러온 문서만 보이고, iframe Tag 사이의 글자나 링크가 나타나지 않습니다. 반대로 iframe 을 지원하지 않는 브라우저에서는 iframe Tag 사이의 글자와 링크만 보이게 됩니다.

관련 링크