1. 이미지
(1)Tag
<img> 이미지 삽입
(2)Attribute
src: 이미지 파일 경로alt: 이미지 파일이 없을 경우 표시되는 문장width: 이미지의 너미(CSS에서 지정하는 것이 일반적)height: 이미지의 높이(CSS에서 지정하는 것이 일반적)
2. 미디어
(1)Audio
1)attribute
<audio src=“ “ controls></audio>
src: 음악 파일 경로preload: 재생 전에 음악 파일을 모두 불러올것인지 지정autoplay: 음악 파일을 자동 재생할 것인지 설정loop: 음악을 반복할 것인지 설정controls: 음악 재생 도구를 표시할 것인지 설정
2)source 태그
웹 브라우저별로 지원하는 음악 파일 형식이 다르기 때문에 파일 형식에 따라 재생되지 않는 브라우저가 있음
->source태그를 사용해 파일 형식의 차이 문제를 해결 (type attribute는 생략 가능)
<audio controls>
<source src=“ “ type=“audio/mpeg”>
<source src=“ “ type=“audio/mpeg”>
</audio>-> 최상위 파일을 실행할 수 없을때 바로 다음 source 태그에 해당하는 파일을 재생함(순차적으로 재생 시도)
(2)비디오
video 태그는 html에서 새롭게 추가된 태그(IE8 이하 사용❌)
1)Attribute
<video width=“ “ height= “ “ src=“ “controls></video>
src: 동영상 파일 경로poster: 동영상 준비중에 표시될 이미지 파일 경로preload: 재생전에 동영상 파일을 모두 불러올것인지 설정autoplay: 동영상 파일을 자동 재생할것인지 설정loop: 동영상을 반복할것인지 설정controls: 동영상 재생 도구를 표시할것인지 지정(재생 도구의 외관은 브라우저마다 차이있음)width: 동영상 너비height: 동영상 높이
2)Source태그
오디오 source태그와 같음
<video width= “ “ height=“ “ controls>
<source src=“ “ type=“video/mp4”>
<source src=“ “ type=“video/webm”>
</video>->mp4 파일 먼저 로딩하고 안되면 webm 파일로 로딩하고 안되면 에러로 처리해라
참고
