1. Image
image tag attribute
- src : 이미지 파일 경로
- alt : 이미지 파일이 없을 경우 표시되는 문장
- width : 이미지 너비 (주로 CSS에서 지정)
- height : 이미지 높이 (주로 CSS에서 지정)
<!DOCTYPE html>
<html>
<body>
<img src="assets/images/dog.jpg" alt="dog" width="100">
<img src="assets/images/wrongname.gif" alt="이미지가 없습니다">
</body>
</html>
2.1 audio tag attribute
- src : 음악 파일 경로
- preload : 재생 전 음악 파일을 모두 불러올 것인지 지정
- autoplay : 음악 파일을 자동 재생할 것인지 지정
- loop : 음악을 반복할 것인지 지정
- controls : 음악 재생 도구를 표시할 것인지 지정
<!DOCTYPE html>
<html>
<body>
<audio src="assets/audio/Taylor.mp3" controls></audio>
</body>
</html>
웹 브라우저별로 지원하는 음악 파일 형식
- Internet Explorer : MP3
- Chrome : MP3, Wav, Ogg
- Firefox : MP3, Wav, Ogg
- Safari : MP3, Wav
- Opera : MP3, Wav, Ogg
- 파일 형식 차이의 문제가 발생할 수 있음
- source tag를 사용하여 파일 형식의 차이 문제를 해결 가능함
- source tag의 type attribute 생략 가능함
<!DOCTYPE html>
<html>
<body>
<source src="assets/audio/Taylor.mp3" type="audio/mpeg">
<source src="assets/audio/Taylor.ogg" type="audio/ogg">
</body>
</html>
2.2 video tag attribute
- src : 동영상 파일 경로
- poster : 동영상 준비 중 표시될 이미지 파일 경로
- preload : 재생 전 동영상 파일을 모두 불러올 것인지 지정
- autoplay : 동영상 파일을 자동 재생할 것인지 지정
- loop : 동영상을 반복할 것인지 지정
- controls : 동영상 재생 도구를 표시할 것인지 지정
- width : 동영상의 폭 지정
- height : 동영상의 높이 지정
웹 브라우저별로 지원하는 동영상 파일 형식
- Internet Explorer : MP4
- Chrome : MP4, WebM, Ogv
- Firefox : MP4, WebM, Ogv
- Safari : MP4
- Opera : MP4, WebM, Ogv
- 파일 형식 차이의 문제가 발생할 수 있음
- source tag를 사용하여 파일 형식의 차이 문제를 해결 가능함
- source tag의 type attribute 생략 가능함
<!DOCTYPE html>
<html>
<body>
<video width="640" height="360" controls>
<source src="assets/video/wildlife.mp4" type="video/mp4">
<source src="assets/video/wildlife.webm" type="video/webm">
</video>
</body>
</html>
