HTML Image & Multimedia tag: audio, video

2022. 4. 9. 09:33coding tutorial/HTML

<img> : 이미지를 문서 내 삽입할 때 사용하는 태그

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

 

<audio> : 오디오를 문서 내 삽입할 때 사용하는 태그

src 음악 파일 경로
preload 재생 전에 음악 파일을 모두 불러올 것인지 지정
autoplay 음악 파일을 자동의 재생 개시할 것인지 지정
loop 음악을 반복할 것인지 지정
controls 음악 재생 도구를 표시할 것인지 지정. 재생 도구의 외관은 브라우저마다 차이가 있다.

 

<video> : 비디오를 문서 내 삽입할 때 사용하는 태그

src 동영상 파일 경로
poster 동영상 준비 중에 표시될 이미지 파일 경로
preload 재생 전에 동영상 파일을 모두 불러올 것인지 지정
autoplay 동영상 파일을 자동의 재생 개시할 것인지 지정
loop 동영상을 반복할 것인지 지정
controls 동영상 재생 도구를 표시할 것인지 지정. 재생 도구의 외관은 브라우저마다 차이가 있다.
width 동영상의 너비를 지정
height 동영상의 높이를 지정
 
<!-- media tag -->
<!-- 필수 속성:src(경로지정) alt:정보를 알려주는 것 height/width:높이/너비-->
<img src="logo.png" alt="logo" height="70" width="50" />

<!-- controls:음악 컨트롤러 / autoplay:자동재생 / loop:반복재생 -->
<audio src="sound.mp3" controls autoplay loop />
<video src="video.mp4" controls autoplay loop />

'coding tutorial > HTML' 카테고리의 다른 글

HTML의 기본 태그 (DTD, html, head, body tag)  (0) 2022.04.29
HTML Semantic Web  (0) 2022.04.29
HTML의 기본 문법  (0) 2022.04.29
[HTML] form tag  (0) 2022.04.09
HTML 텍스트 관련 태그  (0) 2022.03.30