8. image, audio, video 활용

1. image

<img> 태그는 웹 문서에 이미지를 삽입할 때 사용한다.

 

기본 문법

• src: 이미지 파일의 경로 지정
• alt:  이미지가 표시되지 않을 때 대신 표시될 텍스트

<img src="이미지 파일 경로" alt="대체용 텍스트">

 

이미지 경로

• 절대 경로(absolute path): 이미지가 위치한 웹 서버의 전체 URL을 포함
• 상대 경로(relative path): 현재 HTML 파일의 위치를 기준으로 이미지 경로 지정

//절대 경로
<img src="https://search.pstatic.net/sunny/?src=https%3A%2F%2Fpng.pngtree.com%2Fpng-vector%2F20231013%2Fourlarge%2Fpngtree-cute-vector-illustration-of-a-delicious-dessert-over-white-png-image_10157017.png&type=a340"
      alt="" />
    
//상대 경로   
<img src="./img/dessert.jpg" alt="dessert, cake" />

 

2. audio

기본 문법

<audio src="오디오 파일 경로"></audio>

 

태그 속성

• controls: 오디오 재생 컨트롤 바 표시 (오디오 재생, 일시 정지, 음량 조절 등)
• autoplay: 오디오 자동 재생
• loop: 오디오 반복 재생
• preload: 페이지를 로드할 때 오디오 파일을 먼저 미리 로드할지 여부 지정 (none, metadata, auto)
• muted: 오디오 음소거

 

3. video

기본 문법

<video src="비디오 파일 경로"></video>

 

태그 속성

• controls: 비디오 재생 컨트롤 바 표시 (비디오 재생, 일시 정지, 음량 조절 등)
• autoplay: 비디오 자동 재생
• loop: 비디오 반복 재생
• preload: 페이지를 로드할 때 비디오 파일을 먼저 미리 로드할지 여부 지정 (none, metadata, auto)
• muted: 비디오 음소거
• width/ height: 비디오의 가로, 세로 크기 지정
• poster="파일 이름": 비디오가 로딩되기 전에 표시되는 이미지