HTML5 - Image & Multimedia tag

이소라·2021년 6월 10일
0

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. Media

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>

0개의 댓글