본문 바로가기
HTML5 + CSS3 + Javascript (웹 프로그래밍)/02. HTML5 기본 문서 만들기

5. 인라인 프레임

심플심플심플심플 2021. 2. 15. 00:17

인라인 프레임 만들기, <iframe>

 <iframe> 태그를 이용하면

 현재 HTML 페이지 내에 내장 윈도우를
만들고

 다른 HTML 페이지를 출력할 수 있다.

 <iframe> 태그에 의해 만들어지는
윈도우를

 인라인 프래임(inline frame)이라고
부른다.

 <iframe> 태그의 속성은 다음과 같다.

<iframe src="URL"
        srcdoc="HTML 문서 텍스트"
        name="윈도우 이름"
        width="프레임의 가로 길이"
        height="프레임의 세로 길이">

    iframe 태그를 다루지 않는 브라우저에 의해 대신 출력되는 텍스트
</iframe>

<!--
    scr: 출력할 웹 페이지의 URL 주소
    srcdoc: 직접 HTML 태그로 작성된 텍스트로서 출력될 내용
    name: 프레임 윈도우의 이름. 다른 웹 페이지에서 target 속성으로 사용
    width: 프레임의 가로 길이(폭). 픽셀 값. 디폴트 300
    height: 프레임의 세로 길이(높이). 픽셀 값. 디폹트 150
-->

 

 다음은 200x150 픽셀 크기의 인라인
프레임을 만들고,

 iframe.html을 출력하는 코드이다.

<iframe src="iframe1.html" width="200" height="150">
    <!-- '<iframe> 태그'를 지원하지 않는 브라우저는 이 텍스트를 대신 출력한다. -->
    이 브라우저는 iframe 태그를 지원하지 않습니다.
</iframe>

<iframe>으로 로드 되지 않는 사이트가 있다.

 아마존, 네이버 등 대부분의 포털 사이트는

 <iframe> 태그로는 연결할 수 없도록
하고 있다.

 이들 사이트는 Clickjacking이라고 하는
'웹 침입'을 막기 위해

 인라인 프레임에 출력되기를 거부한다.

 다음은 2개의 인라인 프레임에

 각각 iframe1.html과 iframe.html을
출력하는

 간단한 HTML 페이지를 보여준다.

<!DOCTYPE html>
<html>
    <head>
        <title>iframe을 가지는 웹 페이지</title>
    </head>

    <body>
        <h3>2개의 &lt;iframe&gt;을 가집니다. </h3>
        <hr>
        <iframe src="iframe1.html" width="200" height="150"></iframe>
        <iframe src="iframe2.html" width="200" height="100"></iframe>
    </body>
</html>
<!--iframe1.html-->
<!DOCTYPE html>
<html>
    <head>
        <title>첫 번째 iframe</title>
    </head>

    <body>
        <h4>첫 번째 iframe</h4>
    </body>
</html>
<!--iframe2.html-->
<!DOCTYPE html>
<html>
    <head>
        <title>두 번째 iframe</title>
    </head>

    <body>
        <h4>두 번째 iframe</h4>
    </body>
</html>

<frameset>과 <frame>을 권장하지 않음

 예전에 많이 사용해왔던

 <frameset>과 <frame>은 문서와
웹 주소 사이의 불일치,

 잘못된 북마킹, 프린트, 검색 시의
불완전성 등으로 인해

 HTML5에서 완전히 제외되었으므로
더 이상 사용하지 말기 바란다.

 다음은 간단한 예제이다.

<!DOCTYPE html>
<html>
    <head>
        <title>iframe을 이용한 신문 사이트</title>
    </head>

    <body>
        <h3>2개의 신문 사이트입니다.</h3>
        <hr>
        <iframe src="http://www.thisisgame.com" width="300" height="300"></iframe>
        <iframe src="http://www.gamemeca.com"   width="300" height="300"></iframe>
    </body>
</html>

<iframe> 사용 시 주의사항

 <iframe>을 사용할 때 몇 가지
주의할 점이 있다.

 첫째, <iframe> 태그는 <body>태그
내에서만 사용된다.

 둘째, src 속성이 생략되면 브라우저에
<iframe> 영역이 만들어지기는 하지만

 비어있는 상태로 존재한다.

 셋째, 인라인 프레임이 출력할 HTML 텍스트를
srcdoc 속성에 직접 작성할 수 있다.

 srcdoc이 있으면 src 속성은 무시된다.

 다음은 src에 지정된 iframe1.html이
출력되지 않고,

 srcdoc 속성에 작성된 HTML 텍스트가
출력되는 사례이다.

<!DOCTYPE html>
<html>
    <head>
        <title>srcdoc에 HTML 문서 작성</title>
    </head>

    <body>
        <h3>srcdoc에 HTML 문서 작성</h3>
        <hr>
        <iframe src="iframe1.html" width="300" height="300"
                srcdoc="<html><head></head><body>
                        어림도 없지</body></html>"></iframe>
    </body>
</html>

 

 그리고 이렇게 해도 똑같이 나온다.

<!DOCTYPE html>
<html>
    <head>
        <title>srcdoc에 HTML 문서 작성</title>
    </head>

    <body>
        <h3>srcdoc에 HTML 문서 작성</h3>
        <hr>
        <iframe src="iframe1.html" width="300" height="300"
                srcdoc="어림도 없지"></iframe>
    </body>
</html>

 

 둘의 차이는 srcdoc에 HTML 텍스트를
출력한 것과 HTML 텍스트를 출력한 것이다.

 무슨 차이인지는 잘 모르겠다.

 나도 배우는 중이다.

 

 그리고 넷째, 인라인 프레임 안에
또 다른 인라인 프레임을

 중첩하여 만들 수 있다.

<!DOCTYPE html>
<html>
    <head>
        <title>srcdoc에 HTML 문서 작성</title>
    </head>

    <body>
        <h3>srcdoc에 HTML 문서 작성</h3>
        <hr>
        <iframe src="iframe1.html" width="300" height="300"></iframe>
    </body>
</html>
<!--iframe1.html-->
<!DOCTYPE html>
<html>
    <head>
        <title>첫 번째 iframe</title>
    </head>

    <body>
        <h4>첫 번째 iframe</h4>
        <iframe src="iframe2.html" width="200" height="200"></iframe>
    </body>
</html>
<!--iframe2.html-->
<!DOCTYPE html>
<html>
    <head>
        <title>두 번째 iframe</title>
    </head>

    <body>
        <h4>두 번째 iframe</h4>
    </body>
</html>

 

인라인 프레임 윈도우의 이름

 인라인 프레임은

 프레임 윈도우 혹은 간단히
윈도우라고 부르기도 한다.

 인라인 프레임을 포함하여
모든 윈도우(탭)에는

 이름을 붙이고 이름으로
접근한다.

 인라인 프레임의 이름은 name
속성을 사용하여 붙인다.

 다음은 iframe.html을 출력하는
인라인 프레임의 이름을

 left로 붙인 사례이다.

<iframe src="iframe1.html" name="left"></iframe>

 

브라우저 윈도우와 인라인 프레임 윈도우의 계층 관계

 브라우저 윈도우와

 그 속에 삽입된 인라인 프레임
윈도우 사이에는

 부모 자식 관계가 형성된다.

 인라인 프레임이 다시 인라인
프레임을 포함하면

 이들 사이 역시 부모 자식 관계가
형성된다.

 윈도우 사이의 계층 관계를 지칭하는
용어와 사례를 간단히 알아보자.

  • top 윈도우 - 최상위 브라우저 윈도우
  • parent 윈도우 - 부모 윈도우
  • child 윈도우 - 자식 윈도우

 브라우저 윈도우와 left, right,
upper, lower 이름을 가진

 4개의 프레임 윈도우가 부모 자식의
계층 관계를 형성한다.

  • left, right 프레임의 parent 윈도우 - 브라우저 윈도우
  • upper, lower 프레임의 parent 윈도우 - right 윈도우
  • left, right, upper, lower 프레임의 top 윈도우 - 브라우저 윈도우
<!--top frame-->
<!DOCTYPE html>
<html>
    <head>
        <title>브라우저 윈도우</title>
    </head>

    <body>
        <h3>2개의 &lt;iframe&gt; 윈도우를 가집니다.</h3>
        <hr>
        <iframe src="leftframe.html"  name="left"  width="100" height="500"></iframe>
        <iframe src="rightframe.html" name="right" width="400" height="500"></iframe>
    </body>
</html>
<!--leftframe.html-->
<!DOCTYPE html>
<html>
    <head>
        <title>left iframe</title>
    </head>

    <body>
        <h4>left iframe</h4>
        <hr>
        이곳은 왼쪽 인라인 프레임이다.<br>
        메뉴를 다는 용도로 많이 사용된다.
    </body>
</html>
<!--rightframe.html-->
<!DOCTYPE html>
<html>
    <head>
        <title>right iframe</title>
    </head>

    <body>
        <h4>right iframe</h4>
        <hr>
        <iframe src="http://thisisgame.com"
                name="upper" width="100%" height="200"></iframe>
        <iframe src="http://gamemeca.com"
                name="lower" width="100%" height="200"></iframe>
    </body>
</html>

 

target 속성에 문서를 출력할 윈도우 지정

 target 속성은 <base>, <a>, <area>,
<form> 태그에서

 HTML 페이지를 출력할 윈도우*를
지정하는데 사용된다.

* 인라인 프레임 포함

 target 속성의 값으로 다음 5가지
종류를 지정할 수 있다.

  • _blank - 새로운 브라우저 윈도우(탭) 생성(열기)
  • _self - 현재 윈도우
  • _parent - 부모 윈도우
  • _top - 최상위 브라우저 윈도우
  • 윈도우 이름 - 해당 이름의 윈도우

 이제 target 속성을 사용하는 예를
들어보자.

 

링크를 클릭하면 frame1 이름의 프레임에 http://thisisgame.com 사이트 출력 

<iframe src="http://thisisgame.com" name="frame1"></iframe>
...
<a href="http://thisisgame.com" target="frame1">디스이즈게임</a>

 

링크를 클릭하면 새 윈도우(탭)에 사이트 출력

<a href="http://thisisgame.com" target="_blank">디스이즈게임</a>

 

링크를 클릭하면 현재 윈도우(탭 혹은 프레임 윈도우)에 사이트 출력

<a href="http://thisisgame.com" target="_self">디스이즈게임</a>

 

링크를 클릭하면 부모 윈도우에 사이트 출력

<a href="http://thisisgame.com" target="_parent">디스이즈게임</a>

 

링크를 클릭하면 모든 프레임 윈도우를 제거하고 브라우저 윈도우에 사이트 출력

<a href="http://thisisgame.com" target="_top">디스이즈게임</a>

target 속성으로 프레임 윈도우 활용

<!DOCTYPE html>
<html>
    <head>
        <title>target 속성 활용</title>
    </head>

    <body>
        <h3>target 속성 활용</h3>
        <hr>
        <iframe src="sitelist.html"
                name="left" width="200" height="300"></iframe>
        <iframe src="http://thisisgame.com"
                name="right" width="200" height="300"></iframe>
    </body>
</html>
<!--sitelist.html-->
<!DOCTYPE html>
<html>
    <head>
        <title>사이트 리스트</title>
    </head>

    <body>
        <h4>사이트 리스트</h4>
        <hr>
        <ul>
            <li><a href="http://thisisgame.com" target="right">디스이즈게임</a></li>
            <li><a href="http://gamemeca.com" target="right">게임메카</a></li>
        </ul>
    </body>
</html>

참고 및 출처

명품 HTML5+CSS3+Javascript 웹 프로그래밍
국내도서
저자 : 황기태
출판 : 생능출판(생능출판사) 2017.01.16
상세보기
저작자표시 비영리 변경금지

'HTML5 + CSS3 + Javascript (웹 프로그래밍)/02. HTML5 기본 문서 만들기' Related Articles

티스토리툴바