프레임 태그와 embed 태그에 대해 설명합니다
(프레임 태그는 HTML5에서는 지원하지 않습니다)
객체를 포함하는 태그들
<frame>, <iframe>, <embed> 태그들은 웹페이지의 전체 화면을 여러 개의 구역으로 나누는 태그들이다
<framset cols or row = "픽셀 or 비율" name="이름">프레임</frameset>
<frame> 태그의 상위 태그
- <body>와 함께 작성할 수 없다
<frame src="주소">
- 프레임은 가로, 세로 상관없이 복합 분할이 가능하다
- 링크로 프레임을 제어할 수 있다(예시는 아래 iframe 두 번째 예시 참고)
예시
<frameset cols="20%, 80%">
<frame src="a.html">
<frame src="b.html">
</frameset>결과
복합 분할 예시
<frameset rows="30%, *">
<frame src="a.html">
<frameset cols="20%, 80%">
<frame src="b.html">
<frame src="c.html">
</frameset>
</frameset>결과
<iframe src="주소" width="폭" height="높이" name="이름"></iframe>
웹페이지 안에 다른 웹페이지를 삽입하는 태그
- src 속성 : 내부 프레임에 출력할 파일의 url 지정
- width, height 속성 : 프레임의 크기 지정
- name 속성 : 프레임 이름
- 링크로 프레임을 제어할 수 있다
아이프레임 예시
<iframe src="https://qhrhksgkazz.tistory.com/65" width="300px" height="300px""></iframe>링크로 제어하는 아이프레임 예시
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>강아지 사진 골라보기</title>
</head>
<body>
<table>
<tr>
<td><a href="a.jpg" target="mark"><img src="a.jpg" width="300px" heigh="200px" alt="강아지1"></a></td>
<td><a href="b.jpg" target="mark"><img src="b.jpg" width="300px" height="200px" alt="강아지2"></a></td>
<td><a href="c.jpg" target="mark"><img src="c.jpg" width="300px" height="200px" alt="강아지3"></a></td>
</tr>
<tr>
<td colspan="3"><iframe src="" name="mark" width="900px" height="300px"></iframe></td>
</tr>
</table>
</body>
</html>결과
원하는 강아지 사진을 선택하였을 때
<embed src="삽입할 파일의 URL" width="폭" height="높이">
주로 HTML 파일이 아닌 비디오, 오디오, 애니메이션 등 외부 애플리케이션 파일을 포함하는 태그
임베드 예제
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>취미 소개</title>
</head>
<body>
<a href="https://playoverwatch.com/ko-kr/" target="_blank">오버워치 공식 홈페이지</a>
<hr>
<h3>오버워치 트레일러</h3>
<embed src="https://www.youtube.com/embed/ELPl0d3SXCE" width="600" height="600">
</body>
</html>+) 유튜브에서 동영상을 가져오고 싶을 때 다음과 같은 방식으로 url을 가져와야 한다
'기초공부 > WEB' 카테고리의 다른 글
| [HTML5]생활코딩 WEB1 정리 (0) | 2019.03.19 |
|---|---|
| [HTML5]form 태그 (0) | 2019.03.19 |
| [HTML5]링크 태그 (0) | 2019.03.18 |
| [HTML5]기초 태그, 특수 문자 (0) | 2019.03.18 |
| [WEB]포스트 목록 (0) | 2019.03.13 |
