1. 인라인 프레임 : <iframe>
: 현재 HTML 페이지 내에 내장 윈도우를 만들고 다른 HTML 페이지 출력 가능
<iframe src="URL"
srcdoc="HTML 문서 텍스트"
name="윈도우 이름"
width="프레임의 폭"
height="프레임의 높이">
iframe 태그를 다루지 않는 브라우저에 의해 대신 출력되는 텍스트
</iframe>2. 2개의 인라인 프레임을 가진 웹 페이지
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>iframe을 가지는 웹 페이지</title>
</head>
<body>
<h3>2개의 <iframe>을 가집니다.</h3>
<hr>
<iframe src="iframe1.html" width="200" height="150"></iframe>
<iframe src="iframe2.html" width="200" height="100"></iframe>
</body>
</html>
3. <iframe>으로 2개의 신문 사이트 출력하기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>iframe을 이용한 신문 사이트</title>
</head>
<body>
<h3>2개의 신문 사이트입니다.</h3>
<hr>
<iframe src="http://www.etnews.com" width="300" height="300"></iframe>
<iframe src="http://www.mk.co.kr" width="300" height="300"></iframe>
</body>
</html>
4. target 속성으로 프레임 윈도우 활용
메인
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>target 속성 활용</title>
</head>
<body>
<h3>target 속성 활용</h3>
<hr>
<iframe src="ex2-24-sitelist.html" name="left" width="200" height="300"></iframe>
<iframe src="http://www.w3c.org" name="right" width="300" height="300"></iframe>
</body>
</html>
iframe 내부에 사용할 리스트
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>사이트 리스트</title>
</head>
<body>
<h4>사이트 리스트</h4>
<ul>
<li><a href="http://www.w3c.org" target="right">W3C</a></li>
<li><a href="http://www.etnews.com" target="_self">전자신문</a></li>
<li><a href="http://www.mk.co.kr" target="_top">매일경제신문</a></li>
<li><a href="http://www.w3c.org" target="_blank">새 창에 W3C</a></li>
</ul>
</body>
</html>
'HTML5／CSS3 > 2. HTML5 기본 문서 만들기' 카테고리의 다른 글
| Day 41 : 컴퓨터 기술 소개 웹 페이지 - HTML 태그로 만들기 (0) | 2021.12.14 |
|---|---|
| Day 41 : 미디어 삽입 (0) | 2021.12.14 |
| Day 41 : 하이퍼링크 (0) | 2021.12.14 |
| Day 41 : 연습 문제 - List, Table (0) | 2021.12.14 |
| Day 40 : 고급 문서 만들기 - Img, List, Table (0) | 2021.12.13 |