수업/└HTML&CSS
[HTML]공간 분할 태그 <iframe>
onlyun
2022. 1. 2. 14:31
하나의 웹 문서 안에 또 다른 웹 문서를 표시할 때,
공간 분할 태그 <iframe>
ex) 실습 예제
링크가 걸린 [ 동물의 숲 ], [ 쿠키런 ], [ 놀러와 마이홈 ]을 클릭하면
링크 걸린 내용이 iframe 태그에 표시되도록 만든 것.
소스 코드
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Iframe example</title>
</head>
<body>
<header></header>
<nav>
<a href="aniForest.html" target="if_a">동물의 숲</a>
<a href="cookie.html" target="if_a">쿠키런</a>
<a href="myhome.html" target="if_a">놀러와 마이홈</a><br/><br/>
</nav>
<section>
<iframe src="basic.html" name="if_a" width="350" height="300" border="1"></iframe>
<iframe src="basic.html" name="if_b" width="350" height="300" border="1"></iframe>
</section>
<footer></footer>
</body>
</html>*각 동물의 숲, 쿠키런, 놀러와 마이홈에 대해 설명이 적힌 html 문서를 작성.
그 파일들을 각각 <a> 태그로 연결했고 iframe에 표시되도록 설정한 것.
*HTML5에서 border 속성은 지원하지 않으나 iframe 크기가 보이도록 하기 위해서 지정해두었음.