[HTML5] 아이프레임과 프레임


아이프레임과 프레임


1. iframe


(1) iframe이란?

페이지안에 페이지를 삽입하는 방법이다. 예를들어 생활코딩 홈페이지인 opentutorials.org에는 유튜브가 삽입되어 있는데, 유튜브를 삽입하는 방법이 바로 iframe을 이용한 것이다.


(2) 문법

<iframe src="불러올 웹페이지의 URL" scrolling="스크롤링 허용여부(yes|no|auto)">

  // iframe를 지원하지 않는 브라우저인 경우 대체정보를 제공

</iframe>

- src : 불러올 페이지의  URL

- scrolling : 아이프레임 안에서 스크롤링을 허용할 것인지를 지정

auto : 스크롤이 필요한 경우만 스크롤 바를 노출 (기본 값)

yes : 스크롤링 허용, 스크롤이 필요 없는 경우도 스크롤 바를 노출

no : 스크롤 하지 않음

cf.) width, height, frameborder(프레임의 테두리 사용여부) 등의 속성이 더 있지만, 디자인에 대한 부분은 CSS를 통해서 제어하는 것이 권장된다.


(3) 예제

example1.html (jsfiddle, github)

<!DOCTYPE html>

<html>

    <body>

        <iframe src="http://opentutorials.org" width="90%" height="300" frameborder="1" scrolling="yes"></iframe>

    </body>

</html>


2. frame

하나의 화면에서 여러개의 페이지를 분할해서 보여줌


(1) 문법

<frameset (cols | rows)="열 혹은 행의 크기(콤마로 구분)">

   <frame src="frame_a.htm" name="프레임의 이름" />

 </frameset>


(2) 예제

example2.html 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"

    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<frameset cols="40%, 60%">//frameset: frame을 묶어주는 단위 / cols(열): 좌우로 배치

  <frameset rows="25%, 75%">//row(행): 상하로 배치

    <frame src="contents_of_frame1.html" />//25%

    <frame src="contents_of_frame2.html" />//75%

  </frameset>

  <frame name="content" src="contents_of_frame3.html" /> //name 속성에 content로 타깃을 지정할 수 있다.

  <noframes>// 브라우저가  프레임을 지원하지 않는다면 noframes에 지정한 태그 출력된다.

    <body>// body 위에 지정하는 frameset

      <p>This frameset document contains:</p>

      <ul>

        <li><a href="contents_of_frame1.html">contents_of_frame1.html</a></li>

        <li><a href="contents_of_frame2.html">contents_of_frame1.html</a></li>

        <li><a href="contents_of_frame3.html">contents_of_frame1.html</a></li>

      </ul>

    </body>

  </noframes>

</frameset>

</html>


contents_of_frame1.html 

<html>

    <head>

        <style type="text/css">

            body{

                background-color: red;

            }

        </style>

    </head>

    <body>

        contents_of_frame1.html<br />

        <a href="http://opentutorials.org" target="content">http://opentutorials.org</a>

    </body>

</html>


contents_of_frame2.html 

<html>

    <head>

        <style type="text/css">

            body{

                background-color: green;

            }

        </style>

    </head>

    <body>

        contents_of_frame2.html<br />

        <a href="http://w3c.org" target="content">http://w3c.org</a>

    </body>

</html>


contents_of_frame3.html 

<html>

    <head>

        <style type="text/css">

            body{

                background-color: blue;

            }

        </style>

    </head>

    <body>

        contents_of_frame3.html

    </body>

</html>



'WebFont-end > HTML5' 카테고리의 다른 글

[HTML5] <form> 태그 2  (0) 2014.12.20
[HTML5] <form> 태그 1  (0) 2014.12.20
[HTML5] <meta> 태그  (0) 2014.12.20
[HTML5] 이스케이핑  (0) 2014.12.20
[HTML5] URL  (0) 2014.12.20