반응형
<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>
|
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>
width와 height 속성을 생략했을 때, 기본으로 설정되어 있는 width와 height 값이 304, 154 정도로 정해져 있는 것 같습니다.
|
<iframe src="html5-013-a.html" width="320" height="420"></iframe>
|
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>
<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>
반응형
'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 |