HTML
미디어(이미지/오디오/비디오/유튜브) 태그
ADELA_J
2023. 3. 23. 16:27
*img
1. src = 경로 지정
2. alt = 이미지 없을 때 나오는 글자 지정
3. width = 너비 지정
4. height = 높이
*audio/video
1. src = 경로
2. preload = 준비 중일 때 데이터를 모두 불러올지 여부 지정
3. autoplay = 자동 재생 여부
4. loop = 반복 여부
5. controls = 재생도구 출력 여부
6. width / heigt = 너비/높이 지정
7. poster = 동영상을 불러오는 동안 다른 이미지 보여주기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>image_basic</title>
</head>
<body>
<img src="penguins.png" alt="펭귄애기들사진입니다" width="500">
<img src="Nothing" alt="사진이없습니다." width="300">
<img src="https://search.pstatic.net/sunny/?src=https%3A%2F%2Fi.pinimg.com%2F736x%2F6a%2Ff9%2F3f%2F6af93fcb518eedf563dc93a6f6bf6f1d.jpg&type=sc960_832" alt="고양이라죠" width="300">
<audio controls autoplay="controls">
<source src="Kalimba.mp3" type="audio/mp3">
<source src="Kalimba.ogg" type="audio/ogg">
</audio>
<video controls autoplay = "controls" poster="penguins.png">
<source src="Wildlife.mp4" type="video/mp4">
<source src="Wildlife.webm" type="video/webm">
</video>
</body>
</html>
*Youtube
영상 에서 오른쪽 클릭 > copy embed code > 붙여넣기
iframe -> 프레임을 짜주는 하나의 함수. 소스를 주고 받기 보다는 유튜브는 이렇게 들어와야
>> 브라우저마다 다 안뜰수도 있음 주의