저번 장에서 배웠던 video 기억하시죠?
이번 장에서는 video를 저장하지 않고
url 그대로 가져와 쓸 수 있는 iframe 태그에 대해 다뤄보도록 하겠습니다!
◈ <iframe>
-> HTML 문서 안에 다른 HTML 페이지(URL 등)을 삽입하는 기능을 가진 태그
기본 구조 : <iframe ~ ></iframe>
iframe은 video 태그와는 다르게 직접 그 URL을 가져와 붙일 수 있습니다!
즉, 매번 동영상을 저장한 뒤 집어 넣는 번거로운 과정을 거치지 않아도 되는 고급 태그인 것입니다!
자 그럼 이제 어떻게 적용하는지 예시를 통해 확인 해보겠습니다!
See the Pen poNOPyM by JaeyongLee (@jaeyonglee960212) on CodePen.
어때요? 확실히 video 태그보다 훨씬 편리하죠?
이제 코드를 하나하나 뜯어서 살펴보겠습니다!
<!DOCTYPE html>부터 <body> 까지는 다들 아실거라 믿고 <iframe> 파트에 대해서 설명하겠습니다!
(만약 모르시겠다면, 밑의 링크를 참고해주세요!)
2021/02/13 - [html] - < html 공부 > 2장. HTML의 기본 구조 및 태그 기능
< html 공부 > 2장. HTML의 기본 구조 및 태그 기능
저번에 HTML의 정의에 대해 간략하게 알아봤다면, 이번에는 HTML의 기본 구조 및 각 태그의 기능에 대해 알아보겠습니다! 위의 사진은 Visual Studio Code를 이용해 작성한 HTML의 기본 틀입니다. 작성 방
introducing-turtle.tistory.com
<iframe>은 URL을 가져오기 위해 사용한 태그이고,
처음으로 사용한 src라는 속성은 가져오려는 URL 주소, 즉 출처를 나타내주는 특성을 가지고 있습니다.
그리고 width와 height 속성은 각각 넓이와 높이를 지정해주는 특성을 가지고 있습니다.
마지막으로 살펴볼 title 속성은 작성한 iframe의 제목을 지정해주는 특성을 지니고 있습니다.
어느 정도 이해가 가시나요?
video 태그를 보고 오신 분은 확실히 이렇게 느끼실 것입니다.
'어? video 태그랑 코드도 비슷하잖아?'
네, 맞습니다. 코드의 내용이 너무나도 비슷하죠 ㅎㅎ
다만, 주의해야할 점이 있는데 그건 바로 src를 작성할 때입니다.
유튜브 소스를 가져오신 분들은 아시겠지만
보통 유튜브 주소를 가져오게 되면
https://youtube.com/watch?v=고유ID 혹은 https://youtu.be/고유ID의 의 형태로
가져오게 되는데 이 형태를 src에 작성하면 iframe이 작동하지 않습니다!
(이유는 저도 아직 공부중이라 정확히 모르겠습니다 ㅜㅜ 추후에 정확한 원인을 찾은 후 업로드하겠습니다!)
그렇다면 어떻게 해야하느냐?
바로 embed를 중간에 삽입하는 것입니다.
https://youtube.com/embed/고유ID <- ※중요※
이해가 되시죠?
아마 다른 방법도 존재할 것이라 생각하는데 현재 제가 알고 있는 방법은 이 방법이 유일합니다 ㅜㅜ
(열심히 공부해서 다른 방법이 있다면 수정해서 업로드하겠습니다!)
아무튼! 이제 오늘 배운 내용을 다시 정리해보겠습니다!
<iframe>은 HTML 문서 안에 다른 HTML 페이지를 삽입할 때 사용하는 태그이고,
그 안에는 다양한 속성이 존재합니다.
src는 출처를 표시해주는 속성
width와 height는 넓이와 높이를 지정하는 속성
title은 iframe의 제목을 설정해주는 속성입니다.
이 때, 주의해야할 점이 있는데
바로 src를 사용할 때 유튜브에 나와있는 주소를 그대로 사용하면 안된다는 점입니다!
꼭 https://youtube.com/embed/고유ID 의 형태로 사용하셔야 합니다! (꼭이요!)
어때요? iframe이 확실히 video보단 편한거 같죠...?
아니라도 그렇다고 해주세요 ㅜㅜ
비슷한 기능을 가진 태그를 보며
다시 한 번 html의 신비로움을 알 수 있었습니다.
다음 장에서는 (아직 미정)에 대해 다뤄보도록 하겠습니다!
오늘도 제 블로그를 찾아와주셔서 감사합니다!
그럼 다음 장에서 봬요~ 안녀어어엉~~~~~~~
출처 : 🎵저작권없는음악 웅장한음악 무료음원 무료BGM 다운로드 유튜브 배경음악 저작권없는브금(Epicness) - 나눔뮤직 Nanum Sound
https://youtu.be/pZRND1cjvTc
'html' 카테고리의 다른 글
| < html 공부 > 9장. HTML의 태그 (7) - 리스트 (0) | 2021.03.13 |
|---|---|
| < html 공부 > 8장. HTML의 태그 (6) - a (0) | 2021.03.08 |
| < html 공부 > 6장. HTML의 태그 (4) - 멀티미디어(video) (0) | 2021.03.04 |
| < html 공부 > 5장. HTML의 태그 (3) - 멀티미디어(img) (0) | 2021.03.03 |
| < html 공부 > 4장. HTML의 태그 (2) - 멀티미디어(audio) (0) | 2021.03.02 |