HTML
31일차//[html] iframe 태그 사용법
aesup
2021. 2. 24. 17:52
728x90
iframe
이란 Inline Frame 의 약자로,
웹 브라우저 내에 또 다른 프레임, 즉 현재 브라우저에 렌더링되고 있는 문서 안에 또 다른
HTML페이지를 삽입할 수 있도록 하는 기능을 제공한다.
iframe을 사용하면, 현재 렌더링된 브라우저의 페이지에서 다른 도메인이나,
다른 url의 페이지를 현재 페이지의 일부처럼 렌더링하고 사용할 수 있다.
이러한 장점 때문에, 동영상 플레이어(youtube동영상 재생), 지도표시(google map)등의 기능을 제공할 때 iframe을 사용할 수도 있다.
(현재는 HTML5표준에서 이런 기능을 기본적으로 지원하고 있기 때문에 많이 사용되고 있지는 않다.)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<!-- iframe : web안에 web
NAVER , 유튜브, 맵
-->
<h3>여기는 index2.html head(머리말) 입니다</h3>
<iframe src = "https://www.youtube.com/watch?v=6ZUPsl0EVuk" width="300" height="300"></iframe>
<br>
<h3>여기는 index2.html footer(꼬리말) 입니다</h3>
<iframe src = "index.html" width="300" height="300"></iframe>
<br>
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d12652.417997635719!2d126.92887369765731!3d37.55260168996326!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x0!2zMzfCsDMzJzA5LjMiTiAxMjbCsDU2JzE1LjQiRQ!5e0!3m2!1sko!2skr!4v1614132434662!5m2!1sko!2skr"
width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy"></iframe>
<br>
<iframe width="660" height="371" src="https://www.youtube.com/embed/0IpbvXVbBYA"
frameborder="0" allow="accelerometer; ?autoplay = 1; clipboard-write; encrypted-media;
gyroscope; picture-in-picture" allowfullscreen></iframe>
</body>
</html>
728x90