프로그래밍/HTML 기초
HTML 문법 - 5 (멀티미디어 태그)
beans3142
2022. 6. 14. 20:38
멀티미디어 태그
멀티미디어 태그는 이미지, 오디오, 동영상과 같은 컨텐츠들을 넣을 때 사용하는 태그들이다.
<img>
이미지 삽입을 위해 사용하는 태그이다.
다음과 같은 속성들을 가진다.
src | 이미지의 위치 경로 |
title | 이미지의 제목 |
width | 이미지의 너비 |
height | 이미지의 높이 |
alt | 이미지의 대체 텍스트 |
style | 이미지의 스타일 |
border | 이미지 테두리 |
<audio>
오디오를 삽입할 때 사용하는 태그이다.
다음과 같은 속성들을 가진다.
src | 오디오의 경로 |
controls | 컨트롤바 표시 |
autoplay | 자동재생 |
loop | 반복재생 |
muted | 기본적으로 음소거 설정 |
preload | 오디오 파일 미리 다운로드 |
오디오 파일을 블로그에 올려놓고 링크를 가져와서 아래처럼 작성해서 오디오를 첨부할 수 있다.
<audio src="https://blog.kakaocdn.net/dn/cxdFNy/btrEPczTszI/CKRRAGA0ta0mX0uI9Bezl1/%EC%B9%9C%EA%B5%AC%EB%85%B8%EB%9E%98.mp3?attach=1&knm=tfile.mp3" controls></audio>
적용시키면 위와 같은 창을 만들 수 있다.
<video>
비디오 삽입을 위한 태그이다.
src | 비디오파일의 경로 |
controls | 컨트롤바 표시 |
autoplay | 자동재생 |
width | 너비 |
height | 높이 |
loop | 반복재생 |
muted | 기본상태를 음소거로 설정 |
preload | 파일 미리 다운로드 |
poster | 비디오의 썸네일 |