iframe이란?
페이지안에 페이지를 삽입하는 방법이다. 예를들어 생활코딩 홈페이지인 opentutorials.org에는 유튜브가 삽입되어 있는데, 유튜브를 삽입하는 방법이 바로 iframe을 이용한 것이다.
문법
<iframe src="불러올 웹페이지의 URL" scrolling="스크롤링 허용여부(yes|no|auto)"> iframe를 지원하지 않는 브라우저인 경우 대체정보를 제공 </iframe>
- src : 불러올 페이지의 URL
-
scrolling : 아이프레임 안에서 스크롤링을 허용할 것인지를 지정
- auto : 스크롤이 필요한 경우만 스크롤 바를 노출 (기본 값)
- yes : 스크롤링 허용, 스크롤이 필요 없는 경우도 스크롤 바를 노출
- no : 스크롤 하지 않음
참고. width, height, frameborder(프레임의 테두리 사용여부) 등의 속성이 더 있지만, 디자인에 대한 부분은 CSS를 통해서 제어하는 것이 권장된다.
예제
example1.html (jsfiddle, github)
<!DOCTYPE html> <html> <body> <iframe src="http://opentutorials.org" width="90%" height="300" frameborder="1" scrolling="yes"></iframe> </body> </html>
frame
하나의 화면에서 여러개의 페이지를 분할해서 보여줌
문법
<frameset (cols | rows)="열 혹은 행의 크기(콤마로 구분)"> <frame src="frame_a.htm" name="프레임의 이름" /> </frameset>
예제
example2.html (github)
<!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 rows="25%, 75%">
<frame src="contents_of_frame1.html" />
<frame src="contents_of_frame2.html" />
</frameset>
<frame name="content" src="contents_of_frame3.html" />
<noframes>
<body>
<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 (github)
<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 (github)
<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 (github)
<html>
<head>
<style type="text/css">
body{
background-color: blue;
}
</style>
</head>
<body>
contents_of_frame3.html
</body>
</html>
