🐧audio 태그
📌audio 태그 : 웹서버에 저장된 소리파일을 전달받아 재생하는 태그
→ embed 태그 : 플래시 재생, object 태그 : 멀티미디어 파일 재생
→ 소리파일 : mp3 파일, ogg 파일 등
🌠src 속성 : 소리파일의 URL 주소를 속성값으로 설정
🌠autoplay 속성 : 자동 재생 - 속성값 생략 가능
🌠controls 속성 : 재생 관련 제어판 제공 - 속성값 생략 가능
🌠loop 속성 : 반복 재생 : 속성값 생략 가능
🌠preload 속성 : none, metadata, auto(기본) 중 하나를 속성값으로 설정
<audio src="audio/horse.mp3" autoplay controls loop preload="auto"></audio>
📌source 태그 : 멀티미디어 파일을 제공하기 위한 태그
🌠type 속성 : 파일의 형식(MimeType)을 속성값으로 설정
<source src="audio/horse.ogg" type="audio/ogg">
📃16_audio.html
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>HTML</title> </head> <body> <h1>audio 태그</h1> <hr> <!-- audio 태그 : 웹서버에 저장된 소리파일을 전달받아 재생하는 태그 --> <!-- → embed 태그 : 플래시 재생, object 태그 : 멀티미디어 파일 재생 --> <!-- → 소리파일 : mp3 파일, ogg 파일 등 --> <!-- src 속성 : 소리파일의 URL 주소를 속성값으로 설정 --> <!-- autoplay 속성 : 자동 재생 - 속성값 생략 가능 --> <!-- controls 속성 : 재생 관련 제어판 제공 - 속성값 생략 가능 --> <!-- loop 속성 : 반복 재생 : 속성값 생략 가능 --> <!-- preload 속성 : none, metadata, auto(기본) 중 하나를 속성값으로 설정 --> <audio src="audio/horse.mp3" autoplay controls loop preload="auto"></audio> <audio src="audio/horse.ogg" controls></audio> <hr> <!-- 브라우저의 특성상 재생이 안될때 --> <audio controls> <!-- source 태그 : 멀티미디어 파일을 제공하기 위한 태그 --> <!-- type 속성 : 파일의 형식(MimeType)을 속성값으로 설정 --> <source src="audio/horse.ogg" type="audio/ogg"> <source src="audio/horse.mp3" type="audio/mp3"> </audio> </body> </html>
🐧video 태그
📌video 태그 : 웹서버에 저장된 동영상 파일을 제공받아 재생하는 태그
→ 동영상 파일 : mp4 파일, ogv 파일, webm 파일
📃17_video.html
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>HTML</title> </head> <body> <h1>video 태그</h1> <hr> <!-- video 태그 : 웹서버에 저장된 동영상 파일을 제공받아 재생하는 태그 --> <!-- → 동영상 파일 : mp4 파일, ogv 파일, webm 파일 등 --> <video src="video/movie.mp4" controls="controls" width="500"></video> <video src="video/movie.ogv" controls="controls" width="500"></video> <hr> <!-- 브라우저의 특성상 재생이 안될때 --> <video controls="controls"> <source src="video/movie.ogv" type="video/ogg"> <source src="video/movie.mp4" type="video/mp4"> </video> </body> </html>
🐧figure 태그
📌figure 태그 : 이미지에 대한 설명을 제공하기 위한 태그
→ 하위태그 : img(1개 이상), figcaption 태그(1개)
📌figcaption 태그 : 이미지에 대한 설명을 출력하기 위한 태그
<figcaption>천혜향은 동성 2인실입니다.</figcaption>
📃18_figure.html
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>HTML</title> </head> <body> <h1>figure 태그</h1> <hr> <!-- figure 태그 : 이미지에 대한 설명을 제공하기 위한 태그 --> <!-- → 하위태그 : img(1개 이상), figcaption 태그(1개) --> <figure> <img alt="천혜향 2인실" src="image/che.png"> <!-- figcaption 태그 : 이미지에 대한 설명을 출력하기 위한 태그 --> <figcaption>천혜향은 동성 2인실입니다.</figcaption> </figure> <figure> <img alt="동백방 4인실" src="image/dong.png"> <img alt="유채방 4인실" src="image/yu.png"> <figcaption>동백방과 유채방은 4인실 동성 또는 가족 1팀이 묵을수 있습니다.</figcaption> </figure> </body> </html>
