KH/HTML
# 14 iframe
오늘의 진
2022. 9. 14. 10:28
iframe : 인라인 프레임
<iframe> 태그를 이용하면 현재 html페이지 내에 내장 윈도우를 만들고 다른 html 페이지를 출력 할 수 있다.
<iframe> 태그에 의해 만들어지는 윈도우를 Inline Frame(인라인 프레임)이라고 부른다.
[ 형식 ]
<iframe
src="url"
srcdoc="HTML 문서 텍스트"
name = "윈도우 이름"
width = "넓이"
height = "높이">
iframe 테그를 다루지 않는 브라우저에 대신 출력되는 텍스트
</iframe>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<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>
<br><br>
<iframe src="iframe3.html" width="200" height="100" ></iframe>
</body>
</html>
프레임에 이름 붙이기
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>브라우저 윈도우(top)</title>
</head>
<body>
<h3>2개의 <ifrme> 윈도우를 가집니다.</h3>
<hr>
<iframe src="leftframe.html" name ="left" width="300" height="500" ></iframe>
<iframe src="rightframe.html" name="right" width="700" height="500" ></iframe>
</body>
</html>leftframe.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>left iframe</title>
</head>
<body>
<h4>left iframe</h4>
<h4>left iframe</h4>
<h4>left iframe</h4>
<hr>
이곳은 왼쪽 인라인 프레임입니다.
메뉴를 다는 용도로 많이 사용합니다.
</body>
</html>rightframe.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>right iframe</title>
</head>
<body>
<h4>right iframe</h4>
<hr>
<iframe src="http://www.etnews.com" name="upper" width="100%" height="200" ></iframe>
<iframe src="http://www.mk.co.kr" name="lower" width="100%" height="200" ></iframe>
</body>
</html>
right를 보면 프레임 내부에 다시 iframe을 넣은 것을 확인 할 수 있다.
하지만 모든 사이트가 프레임 구조로 들어가는 것은 아니다. 구글 같은 사이트는 불가능함.
(즉, 윈도우 안에 윈도우가 들어갈 수 있는데 모든 사이트를 포함하진 못한다. )
이전으로가기/ 다음으로 가기 만들기
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>iframe Test3</title>
</head>
<body leftmargin="0" topmargin="0">
<img src="../images/titleframe2.gif" >
<iframe src="painting.html" width="500" height="400" scrolling ="auto" name="con" >iframe이 지원되지 않는 웹 브라우져입니다</iframe>
<p>
<a href="painting2.html" target="con">
<img src="../images/next.gif" >
</a>
<a href="painting.html" target="con"><img src="../images/next2.gif">
</a>
</body>
</html>painting.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>마네의 그림</title>
</head>
<body>
<img src="../images/painting1.jpg" vspace="10" hspace+"10"><br>
부인 카미유의 초상 추상화와 마찬가지로<br>
옆으로 서 있는 모습으로 치마를 길게 늘여뜨려 <br>
동적이 있는 어떤 한 순간을 그려 놓았다 <br>
</body>
</html>painting2.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>마네의 그림2</title>
</head>
<body>
<img src="../images/painting2.jpg" vspace="10" hspace="10">
1866년 여름, 모네가 카미유와 함께 살고 있던 집 마당에서 <br>
카미유를 모델로 해서 그린 작품이다. <br>
마당에 깊은 도랑을 파서 캔버스 위쪽을 그랠 때에는<br>
그 도랑 및으로 내려 놓고 그렸다고 한다. <br>
</body>
</html>패널에 con 이라는 이름을 지정해주고 scrolling을 auto로 주어서 스크롤팬을 달아줌
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>target 속성 활용</title>
</head>
<body>
<h3>target 속성 활용</h3>
<hr>
<iframe src="news1.html" name="left" width="250" height="500" ></iframe>
<iframe src="http://www.w3c.org" name="right" width="400" height="500"></iframe>
</body>
</html>news1.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>사이트 리스트</title>
</head>
<body>
<h4>사이트 리스트</h4>
<ul>
<li><a href="http://www.sportsseoul.com" target="right">sportsseoul</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>
1. target ="right" 라고 준 것은 오른쪽 패널의 이름이 right인데 여기로 링크한 것을 띄워 준다.
2.target ="_self" 라고 하면 현재 위치에 띄워준다. 현재 상황에서는 왼쪽의 패널에 띄움
3.target ="_top" 현재창 전체에 띄운다.
4.target ="_blank" 새창에 띄워준다.