iframe은 페이지 안에서 페이지를 삽입하는 방법이다.
문법
<iframe src="불러올 웹페이지의 URL" scrolling="스크롤링 허용여부(yes|no|auto)">
iframe을 지원하지 않는 브라우저인 경우 대체정보를 제공
</iframe>
- src : 불러올 페이지의 url
- scrolling : iframe 안에서 스크롤링을 허용할 것인지를 지정
* auto : 스크롤이 필요한 경우만 스크롤바를 노출(기본값)
* yes : 스크롤링 허용. 스크롤이 필요 없는 경우도 스크롤 바를 노출
* no : 스크롤 하지 않음
참고사항 : width, height, frameborder(프레임의 테두리 사용여부) 등의 속성이 더 있지만, 디자인에 대한 부분은 css를 통해서 제어하는 것이 권장된다.
예제
<!DOCTYPE html>
<html>
<body>
<iframe src="https://www.daum.net" width="90%" height="300" frameborder="1" scrolling="yes"></iframe>
</body>
</html>
예제 설명
예제를 html 파일에 코딩하여 실행하면 아래 그림과 같은 웹페이지가 나온다.
iframe으로 설정해놓은 화면 안에 daum 사이트 화면이 나오고 scrolling 옵션을 yes로 설정하였기 때문에 오른쪽에 스크롤 기능이 존재한다.
frame은 하나의 화면에 여러개의 페이지를 분할해서 보여준다. html5로 넘어오면서 권장하지 않고, 되도록 iframe 사용 권장한다.
문법
<frameset (cols|rows)="열 혹은 행의 크기(콤마로 구분)">
<frame src="frame_a.htm" name="프레임의 이름"/>
</frameset>
예제
- frameexample.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 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
<html>
<head>
<style type="text/css">
body{
background-color: red;
}
</style>
</head>
<body>
contents_of_frame1.html<br />
<a href="https://www.daum.net" target="content">https://www.daum.net</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="https://www.daum.net" target="content">https://www.daum.net</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>
예제 설명
예제들을 html 파일에 코딩하여 실행하면 아래 그림과 같은 웹페이지가 나온다.
frame을 이용해 화면을 3부분으로 나누었고, 1번은 배경색을 빨간색으로 하고 daum 페이지로 접속하는 링크를 삽입했다. 2번은 배경색을 파란색으로 하고 daum 페이지로 접속하는 링크를 삽입했다. 3번은 파란 배경색만 설정했다. 첫번째와 두번째 frame의 링크를 클릭하여 접속하면 3번 프레임에 daum 페이지가 아래와 같이 로딩된다.
'Programming > HTML' 카테고리의 다른 글
| 표 (0) | 2017.12.11 |
|---|---|
| 이스케이핑 (0) | 2017.12.11 |
| 목록 (0) | 2017.12.11 |
| 이미지 태그 (0) | 2017.12.11 |
| 문단, 줄바꿈, 띄어쓰기, 링크 (0) | 2017.12.07 |
꼴통보안인