▶ <audio>
-
소리 콘텐츠(MP3) 삽입.
-
속성
- autoplay
: 페이지에 접근해서 오디오가 준비되면(사이트 진입 시) 바로 오디오 콘텐츠 재생. boolean 값.
autoplay 속성 지정 시 preload는 무시됨.
- controls
: 제어 메뉴를 표시. 재생, 소리 음량 조절, 정지 버튼 등 제어하는 메뉴. boolean 값.
- loop
: 재생이 끝나면 다시 처음부터 재생 반복. boolean 값.
- preload
: 페이지가 로드될 때 파일을 로드할지 지정(힌트 제공). 기본값은 metadata.
none: 로드하지 않음. 플레이되면 오디오 파일 로드.
metadata: 메타데이터만 로드. 기본적인 정보만 가지고 있겠다는 것.
auto: 전체 파일을 미리 로드.
- src
: Contents URL 명시
- muted
: 음소거 여부 설정. boolean 값.
▶ <video>
-
동영상 콘텐츠(MP4)를 삽입.
-
속성
- autoplay
: 페이지에 접근해서 준비되면(사이트 진입 시) 바로 재생. boolean 값.
autoplay 속성 지정 시 preload는 무시됨.
- controls
: 제어 메뉴 표시. 재생, 소리 음량 조절, 정지 버튼 등 제어하는 메뉴. boolean 값.
- loop
: 재생이 끝나면 다시 처음부터 반복 재생. boolean 값.
- muted
: 음소거 여부 설정. boolean 값.
- poster
: 동영상 썸네일의 이미지 URL 명시.
- preload
: 페이지가 로드될 때 파일을 로드할지의 지정(힌트 제공). 기본값은 metadata.
none: 로드하지 않음.
metadata: 메타데이터만 로드.
auto: 전체 파일 로드.
- src
: 콘텐츠 URL 명시.
- width
: 동영상 가로 너비 지정.
- height
: 동영상 세로 너비 지정.
▶ <figure>, <figcaption>
-
이미지 삽입 후 그 하단에 이미지에 대한 설명을 적는다고 가정.
일반 태그 사용 시 브라우저 입장에서는 이미지와 텍스트가 분리되어 있으니 상호 관련 있는 내용이라고 생각하지 못함. -
<figure>, <figcaption>은 이미지와 이미지에 대한 설명이 연결되어 있다는 걸 브라우저에 알려주기 위해 사용.
-
<figure>은 이미지나 삽화, 도표 등의 영역은 설정.
-
<figurecaption>은 <figure>에 포함되어 이미지나 삽화 등에 대한 설명을 표시함(Figure Caption).
-
이와 같이 작업 시 브라우저, 검색엔진, 정보통신 보조 기기 등이 이러한 구조를 확인할 수 있음.
'HTML, CSS > HTML' 카테고리의 다른 글
[HTML] <script> (0) | 2020.08.26 |
---|---|
[HTML] 내장 콘텐츠 - iframe, canvas (0) | 2020.08.26 |
[HTML] 멀티미디어(1) - img (0) | 2020.08.24 |
[HTML] 수정 관련 요소 - del, ins (0) | 2020.08.23 |
[HTML] 인라인 텍스트(3) - code, kbd, sup/sub, time, span, br (0) | 2020.08.22 |