오디오 파일 삽입
오디오 파일을 삽입할 때는 <audio> 태그를 사용하며, 파일 종류는 mp3, ogg, wav 등이 있다.
1. 속성
- src : 오디오 파일의 위치 정보
- controls : 재생 제어기 표시
- Loop : 반복 재생
- autoplay : 문서가 출력됨과 동시에 자동 재생(안 됨)
- muted : 음소거 상태로 시작
- preload : 재생 전에 미리 다운로드
ex)
<audio controls>
<source src="bear.mp3" type="audio/mpeg">
<source src="bear.ogg" type="audio/ogg">
<source src="bear.wav" type="audio/wav">
오디오파일을 재생할 수 없습니다.
</audio>
1. bear.mp3를 재생.
2. 만약 브라우저에서 mp3를 재생할 수 없으면, bear.ogg를 재생.
3. 만약 브라우저에서 ogg를 재쟁할 수 없으면, bear.wav를 재생.
4. 모두 재생할 수 없으면, 마지막 문장을 출력.
5. 파일 세 가지 모두 존재해야 함.
비디오 파일 삽입
비디오 파일을 삽입할 때는 <video> 태그를 사용하며, 파일 종류는 mp4, webm, ogg가 있다.
1. 속성
- 오디오 태그용 속성과 동일.
- width/height : 영상의 출력 너비/높이 지정.
- poster : 영상이 재생되기 전에 보여질 이미지 지정.
* 오디오와 비디오의 보조 태그 = <source> : src 속성
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>오디오/비디오 추가</title>
</head>
<body>
<h2>오디오 파일 추가</h2>
<audio src="audios/bear.mp3" controls />
<hr>
<h2>비디오 파일 추가</h2>
<video src="videos/movie.ogv" width="400px" controls autoplay muted />
</body>
</html>특수문자
특수문자를 화면에 나타내고 싶을 때는 다음과 같은 형식을 따른다.
=> '&' + 키값 + ';'
종류)
- < : <
- > : >
- & : &
- ©(capyright) : ©
- ®(상표) : ®
- # : #
- 공백(spacebar) :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>특수문자 활용</title>
</head>
<body>
<h2><특수문자 활용></h2>
<p>빈칸 - 여기 에 빈칸 있음.</p>
<p>copyright : ©eunseo-Kim</p>
<p>상표등록 : ®2022-08-03</p>
<p>Ä</p>
</body>
</html><hr> 태그 알아보기
<hr> 태그는 수평선(분류선)을 작성한다.
속성)
- align : 정렬 => left, center, right
- noshade : 입체감 제거
- size : 두께 지정. px(픽셀 단위)
- width : 가로길이(너비). px/% 단위를 사용.
'HTML' 카테고리의 다른 글
| 6. form 및 input (0) | 2022.08.12 |
|---|---|
| 5. 영역 처리/시맨틱 (0) | 2022.08.11 |
| 3. List 및 Table (0) | 2022.08.11 |
| 2. 기본적인 태그 알아보기 (0) | 2022.08.11 |
| 1. HTML 기초 (0) | 2022.08.11 |
