-
HTML5 학습하기 ‘HTML5 시맨틱 태그 3 - 오디오’IT/HTML 2020. 4. 29. 07:38
HTML5 학습하기 ‘HTML5 시맨틱 태그 3 - 오디오’
1. HTML5 시맨틱 태그 - 오디오
1) 오디오 태그
(1) <audio> 태그
<audio> 태그는 HTML5에서 배경 음악이나 효과음 등 오디오를 삽입할 때 사용하는 태그이다. <audio src = “오디오 파일 경로” [속성] [속성=“속성 값”]>
① HTML5에서 추가 되었다.
② 여러 가지 속성들을 사용하여 사용자의 요구에 맞게 오디오 표현이 가능하다
③ 여러 개의 오디오 소스를 포함할 수 있다.
(2) <audio> 태그 속성
① Src : 비디오 파일의 경로지정
② Controls : 비디오 재생 도구를 출력할지 지정
③ Autoplay : 비디오를 자동 재생할지 지정
④ Loop : 비디오를 반복할지 지정
⑤ Preload : 음악을 재생하기 전에 모두 불러올지 지정
2) 오디오 태그를 활용한 HTML5 시맨틱 태그 실습 예제
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title> HTML5 예제 </title>
</head>
<body>
<header> <h1> 오디오 삽입 예제 </h1> </header>
<article>
<section>
<audio src="audio/audiotest.mp3" controls="" autoplay="" loop=""> </audio>
</section>
</article>
</body>
</html>
'IT > HTML' 카테고리의 다른 글
HTML5 학습하기 ‘HTML5 시맨틱 태그 4 - 입력’ (0) 2020.04.30 HTML5 학습하기 ‘HTML5 시맨틱 태그 2 - 비디오’ (0) 2020.04.28 HTML5 학습하기 ‘HTML5 시맨틱 태그 1 - 이미지’ (0) 2020.04.27 HTML5 학습하기 ‘HTML5 기본 구조 및 문법의 기초’ (0) 2020.04.25 HTML5 학습하기 ‘HTML5 이란?’ (0) 2020.04.24