img태그로이미지를넣는방법
<img src="파일명 또는 파일경로" alt="이미지설명">
동영상플레이어를넣는방법
<iframe src="동영상경로">iframe이 지원되지 않는 웹브라우저에서 띄울 텍스트</iframe>
<iframe width="917" height="516" src="https://www.youtube.com/embed/9Pk7UYHhXoo"
frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media;
gyroscope; picture-in-picture" allowfullscreen></iframe>
각 코드의 뜻은 아래와 같아요.
<iframe
width="917" #동영상 플레이어의 가로 길이
height="516" #동영상 플레이어의 세로 길이
src="https://www.youtube.com/embed/9Pk7UYHhXoo" #동영상의 주소
frameborder="0" #동영상 플레이어의 테두리 두께
allow="autoplay;"> #동영상의 자동 재생 여부
</iframe><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>동영상 플레이어 넣기~</title>
</head>
<body>
<iframe width="500" height="300" src="https://www.youtube.com/embed/9Pk7UYHhXoo" frameborder="10" allow="autoplay;"></iframe>
</body>
</html>allow="autoplay;"속성
allow="autoplay;"
삽입한동영상플레이어를자동재생되게끔해줘요
외부재생차단여부는영상마다다르니위속성을항상사용할수있는것은아니다!를알아두시면돼요!
video 태그
<video src="동영상파일이름" autoplay muted="muted">
이 웹브라우저는 비디오 태그가 지원되지 않습니다.
</video>autoplay속성으로자동재생되게했고,muted="muted"속성으로음소거처리를했어요.
muted="muted"속성을쓰지않으면자동재생이되지않으니,자동재생을하고싶다면꼭같이써주세요:)
iframe태그와차이점은video태그는동영상의파일을직접게시한다는것
iframe태그는동영상의링크를가져왔었죠?
video태그는img태그처럼박수지님의컴퓨터에있는동영상파일을직접가져와요!
또한 지원하는 확장자도 한정적입니다 .
- MP4
- WebM
- Ogg
그러니iframe 태그보다쓰기불편하다고할수있어요.
audio 태그: video태그와마찬가지로박수지님의컴퓨터에있는음성파일을가져와요!
<audio controls>
<source src="audio.mp3" type="audio/mp3">
</audio> video태그와다르게audio태그로source태그를감싸는형태로써주셔야해요!
또,audio태그에controls속성을달아줘야음악컨트롤러를눈으로볼수있으니참고해주세요:)지원하는확장자도한정적
- MP3
- WAV
- Ogg
audio태그는박수지님이원하는배경음악을깔때유용
천방지축😛 얼레벌레🙄 빙글빙글🙃 돌아가는 수지의 코드~🎵