HTML 파일에서 사진을 삽입하는 방법
HTML 기본 문법 - 속성 & <img> 태그
HTML 속성 (HTML attribute) 속성(attribute)은 태그의 동작을 제어하기 위해 여는 태그 안에 사용 속성은 요소 유형의 기본 기능을 수정하거나, 아니면 스스로 기능하지 못하는 특정한 요소 유형에 기능
hisoit.tistory.com
▲ <img> 태그를 사용하여 사진을 삽입하는 방법
<img> 태그를 이용해 사진을 삽입하는 방법을 배웠다면, 오늘은 동영상을 삽입하는 방법에 대한 포스팅입니다.
HTML 파일에서 영상을 삽입하는 방법
유튜브에서 삽입하고 싶은 영상에 들어가서 '공유' 버튼을 클릭합니다.
저는 참고하고 있는 생활코딩님의 영상을 삽입해 보겠습니다.
저는 유튜브를 사용하였지만, 다른 동영상 서비스의 영상도 삽입 가능합니다.
여러 공유 버튼 중 퍼가기(imbed)를 누르면 <iframe>이라는 태그로 이루어진 소스 코드가 나오는 것을 확인할 수 있습니다.
해당 코드를 복사해 줍니다.
앞서 만들어놓은 html 파일에 출처/참고한 영상이라는 제목을 달아주고,
위에서 복사한 코드를 붙여넣어주겠습니다.
실행 결과
해당 html 파일을 웹브라우저에서 열어보면, 동영상이 잘 삽입된 것을 확인할 수 있습니다.
<iframe> 태그란?
<iframe> 태그는 인라인 프레임(inline frame)을 정의합니다.
- 인라인 프레임은 현재 HTML 문서 내에 다른 문서를 포함하기 위해 사용됩니다.
- 다시 말하면, 웹 페이지에 다른 웹 사이트를 넣을 수 있기 위한 태그입니다.
참고한 링크
https://www.youtube.com/watch?v=7T7r_oSp0SE&list=PLuHgQVnccGMDZP7FJ_ZsUrdCGH68ppvPb&index=24
https://www.w3schools.com/tags/tag_iframe.ASP
HTML iframe tag
W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.
www.w3schools.com
'개발공부 > HTML' 카테고리의 다른 글
| HTML 기본 문법 - <a> 태그 (0) | 2023.03.10 |
|---|---|
| HTML 기본 문법 - <title>, UTF-8, <head> & <body>, <html> (0) | 2023.03.09 |
| HTML 기본 문법 <li>, <ul>, <ol> 태그 & 부모 자식 (0) | 2023.03.08 |
| HTML 기본 문법 - 속성 & <img> 태그 (0) | 2023.03.07 |
| HTML 기본 문법 - 태그(TAG)란? <strong>, <u>, <h1>~<h6>, <br>, <p> (0) | 2023.03.06 |
