아이프레임과 프레임
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 |