반응형
<iframe>태그로 HTML 문서 안에 다른 HTML 문서 또는 동영상 등을 끼워 넣거나 다른 웹사이트를 출력할 수 있습니다.
<iframe src="URL" width="너비" height="높이" name="프레임이름"></iframe>
|
(예제1) 하단에서 예제 파일을 다운로드 할 수 있습니다.
html5-013-a.html
<!DOCTYPE html>
<html>
<head>
<title>HTML5</title>
<meta charset="utf-8" />
</head>
<body>
<img src="images/img1.jpg" /><br/>
</body>
</html>
|
![](https://blog.kakaocdn.net/dn/oiVuc/btsuJfVtEJU/aqE8HDzWSLDGp2wK9aL6J1/img.png)
html5-013-iframe-1.html
<!DOCTYPE html>
<html lang="ko">
<head>
<title>iframe</title>
<meta charset="utf-8" />
</head>
<body>
<iframe src="html5-013-a.html"></iframe>
</body>
</html>
![](https://blog.kakaocdn.net/dn/bLbqwo/btsu0syPG2M/KsBbqbK2w1t78dkjNlBlC0/img.png)
width와 height 속성을 생략했을 때, 기본으로 설정되어 있는 width와 height 값이 304, 154 정도로 정해져 있는 것 같습니다.
<iframe src="html5-013-a.html" width="320" height="420"></iframe>
|
![](https://blog.kakaocdn.net/dn/bxrTrd/btsuG983tpd/T0ccxXPVqPqyoeoHPXATa1/img.png)
iframe
프레임의 테두리를 보이지 않게 하는 것은 CSS에서 처리합니다. 프레임 테두리 설정하는 것은 CSS 강의에 넣도록 하겠습니다.
이번에는 video 태그를 사용하지 않고 iframe 태그로 동영상을 삽입해 보겠습니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<title>iframe</title>
<meta charset="utf-8" />
</head>
<body>
<iframe src="frozen.mp4"></iframe>
</body>
</html>
![](https://blog.kakaocdn.net/dn/UPouJ/btsuJe3j2aW/B1jq4WKmepSLbQnCK4wPlK/img.png)
<a> 태그의 target 속성의 값 중에는 프레임이름을 지정할 수 있습니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<title>iframe</title>
<meta charset="utf-8" />
</head>
<body>
<h1>iframe 태그</h1>
<table border="0">
<tr>
<td>
<a href="html5-013-iframe-1.html" target="iframe00">html5-013-iframe-1.html</a><br/>
<a href="html5-013-iframe-2.html" target="iframe00">html5-013-iframe-2.html</a><br/>
</td>
<td>
<iframe src="html5-013-iframe-1.html"
width="400" height="500" name="iframe00"></iframe>
</td>
</tr>
</table>
</body>
</html>
![](https://blog.kakaocdn.net/dn/JIs36/btsuTPnOhda/TLAwQ4jOQHhrg9OYTq89P0/img.png)
![](https://blog.kakaocdn.net/dn/cM43f5/btsu7UhdPVL/vKwybMntNfAvt5kVLlKKKK/img.png)
728x90
반응형
'HTML_CSS' 카테고리의 다른 글
(HTML/CSS) 캘린더 달력 일정관리 (0) | 2023.04.04 |
---|---|
HTML 시멘틱 태그를 사용한 2단 레이아웃 (0) | 2022.11.14 |
(HTML/CSS) 2단 레이아웃 (0) | 2022.11.02 |
(HTML/CSS) 웹 폰트 사용하기: 구글 폰트 사용하기 (0) | 2022.10.09 |