이미지의 표현과 동영상, 음악 등 멀티디미어를 지원하는 태그

① 이미지

img tag가 가지는 속성

• src : 이미지 파일 경로
• alt : 이미지 파일이 없을 경우 표시되는 문장
• width : 이미지의 너비 (CSS에서 지정하는 것이 일반적)
• height : 이미지의 높이 (CSS에서 지정하는 것이 일반적)

② 미디어

1. audio

HTML5에서 새롭게 추가된 태그로, IE8 이하에서는 사용할 수 없음.

웹브라우저 별로 지원하는 음악 파일의 형식이 다름.
따라서 source 태그를 사용하여 파일 형식의 차이 문제를 해결할 수 있음.

audio 태그가 가지는 속성

• src : 음악 파일 경로
• preload : 재생 전에 음악 파일을 모두 불러올 것인지 지정
• autoplay : 음악 파일을 자동의 재생 개시할 것인지 지정
• loop : 음악을 반복할 것인지 지정
• controls : 음악 재생 도구를 표시할 것인지 지정

<audio controls>
  <source src="assets/audio/Kalimba.mp3" type="audio/mpeg">
  <source src="assets/audio/Kalimba.ogg" type="audio/ogg">
</audio>

2. 비디오

HTML5에서 새롭게 추가된 태그로, IE8 이하에서는 사용할 수 없음.

웹브라우저 별로 지원하는 음악 파일의 형식이 다름.
따라서 source 태그를 사용하여 파일 형식의 차이 문제를 해결할 수 있음.

video 태그가 가지는 속성

• src : 동영상 파일 경로
• poster : 동영상 준비 중에 표시될 이미지 파일 경로
• preload : 재생 전에 동영상 파일을 모두 불러올 것인지 지정
• autoplay : 동영상 파일을 자동의 재생 개시할 것인지 지정
• loop : 동영상을 반복할 것인지 지정
• controls : 동영상 재생 도구를 표시할 것인지 지정
• width : 동영상의 너비를 지정
• height : 동영상의 높이를 지정

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

🎁 참조 및 출처

• https://poiemaweb.com/html5-tag-image-multimedia