iframe이란
- 웹 페이지안에 또다른 웹 페이지를 제한없이 삽입 할 수 있는 기능이다.
- src로 웹 페이지 경로를 지정함
- 사용법
<iframe src="test01.html" width="800" height="400">하이퍼텍스트와 연동 가능
- <a>태그안에 target을 <iframe>의 name과 동일하게 설정하여 하이퍼텍스트를 클릭했을 때 해당 하이퍼텍스트 href에 지정된 경로로 iframe안에 웹 페이지를 띄워 줄 수 있다.
- 사용법
<nav>
<a href="test01.html" target="ifbox01">test01.html</a>
<a href="test02.html" target="ifbox01">test02.html</a>
<a href="test03.html" target="ifbox01">test03.html</a>
<a href="test04.html" target="ifbox01">test04.html</a>
</nav>
<iframe src="" width="800" height="400" name="ifbox01">예시 코드
<html>
<head>
<title>iframe으로 페이지 내에 다른 내용 넣기</title>
</head>
<body>
<hr>
<h1>iframe으로 페이지 내에 다른 내용 넣기</h1>
<p>
<iframe src="**" width="n" height="n"> </iframe> <br>
src속성으로 안에 보여질 내용의 경로를 지정하고 <br>
width/height속성으로 iframe의 가로/세로 크기를 지정.
</p>
<iframe>iframe미지원 브라우저 사용자용 메세지</iframe>
<hr>
<h2>- iframe안에 보여줄 수 있는 종류(링크와 일치) - </h2>
<h3>1. 절대 경로(URL)로 iframe안에 보여주기</h3>
<iframe src="http://www.itwillbs.co.kr/"></iframe>
<h3>2. 상대 경로로 *.html/*.htm (웹페이지) iframe안에 보여주기</h3>
<iframe src="test06.html"> </iframe>
<iframe src="test04.html"> </iframe>
<h3>3. 상대 경로로 *.jpg/*.gif/*.png/...(이미지 파일) iframe안에 보여주기</h3>
<iframe src="img/cat.jpg" width="640" height="426"> </iframe>
<h3>4. 상대 경로로 *.mp4/*.webm/*.ogg/...(동영상 파일) iframe안에 보여주기</h3>
<iframe src="blossom.mp4" width="400" height="300"> </iframe>
<h3>5. 상대 경로로 *.txt (텍스트 파일) iframe안에 보여주기</h3>
<iframe src="무료이미지주소.txt"> </iframe>
<hr>
<h2>- iframe안에 링크 열어 주기 - </h2>
<p><iframe <b>name="abc"</b>> ---- 서로 일치 <br>
<a href="*" <b>target="abc"</b>> --- 시킴
</p>
<nav>
<a href="test01.html" target="ifbox01">test01.html</a>
<a href="test02.html" target="ifbox01">test02.html</a>
<a href="test03.html" target="ifbox01">test03.html</a>
<a href="test04.html" target="ifbox01">test04.html</a>
<a href="test05.html" target="ifbox01">test05.html</a>
<a href="test06.html" target="ifbox01">test06.html</a>
<a href="test07.html" target="ifbox01">test07.html</a>
</nav> <br><br>
<iframe src="test01.html" width="800" height="400" name="ifbox01">
</iframe>
<h5>문제. iframe안에 이미지 열기</h5>
<iframe src="img/bear.jpg" width="650" height="400" name="ifbox02">
</iframe>
<nav>
<a href="img/bear.jpg" target="ifbox02">photo1</a>
<a href="img/drop.jpg" target="ifbox02">photo2</a>
<a href="img/cat.jpg" target="ifbox02">photo3</a>
</nav>
</body>
</html>예시 코드 | 결과
'Web > HTML' 카테고리의 다른 글
| HTML 따라하기 9일 차 | form의 GET방식과 POST방식 (0) | 2022.05.23 |
|---|---|
| HTML 따라하기 8일 차 | form input select textarea (0) | 2022.05.23 |
| HTML 따라하기 6일 차 | 하이퍼 텍스트 링크 만들기 (0) | 2022.05.20 |
| HTML 따라하기 5일 차 | 이미지 만들기 (2) | 2022.05.19 |
| HTML 따라하기 4일 차 | 테이블 만들기 (0) | 2022.05.19 |