오봉이와 함께하는 개발 블로그
문서 삽입 태그 본문
728x90
FrontEnd_day1 정리 (2021.12.02 목요일)
문서 삽입 태그 : <iframe> 태그
- <iframe> 태그
- 현재의 html 문서 내에 다른 문서 포함
- <iframe> 태그를 만들어서 영역을 만들어 놓고 <map>의 <area>에서 target="iframe이름" 지정
- <iframe>의 위치 설정 중요 (css로 크기, 위치 등 속성 설정)
문서 삽입 태그 예제
- iframe.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>이미지 맵</title>
<style>
#bigBox { margin:0 auto; width:1024px;}
#box2 { position:absolute; margin-left:250px; top:270px;}
iframe {width:580px; height:480px; border:none;}
</style>
</head>
<body>
<div id="bigBox">
<div id="box1">
<img src="image/메인.png" border="1" usemap="#cityMap">
<map name="cityMap">
<area shape="rect" coords = "60, 90, 250, 150" href="newyork.html" target="iFrameArea">
<area shape="rect" coords = "310, 90, 500, 150" href="paris.html" target="iFrameArea">
<area shape="rect" coords = "560, 90, 750, 150" href="roma.html" target="iFrameArea">
<area shape="rect" coords = "810, 90, 1000, 150" href="beijing.html" target="iFrameArea">
</map>
</div>
<div id="box2">
<iframe name="iFrameArea"></iframe>
</div>
</div>
</body>
</html>
728x90
Comments