[HTML] 웹페이지에 이미지, 사운드, 비디오 삽입하기 (img, audio, video)

 웹페이지에 이미지, 사운드, 비디오를 삽입하는 멀티미디어 태그를 알아보겠습니다.

 

[ Contents ]

 

 

1. 이미지 태그 <img>

Adblock_alert.png

<img src="Adblock_alert.png" alt="애드블록" width="500px" height="300px">

 img 태그는 이미지를 삽입하는 인라인 태그입니다. src 속성에 이미지 경로를 입력하고, width와 height 속성으로 가로 세로의 크기를 조정합니다.

 

 alt 속성값은 이미지가 나오지 않을 때, 대신 출력하는 문구입니다. 보통 이미지에 대한 설명을 alt 속성값으로 지정합니다.

 이미지가 나오지 않는 이유는 대부분 '잘못된 경로' 때문이며, 이미지의 확장자(png, jpg 등)와 상대주소를 정확히 명시해야 합니다. 절대 주소로 해도 되지만, 폴더 계층구조가 바뀌면 모든 경로를 수정해야 하므로 대개 상대 주소로 적습니다. 루트 폴더는 html 파일이 있는 폴더이고, 보통 './src/img/이미지.png'와 같이 파일 경로를 만듭니다.  

 

 

 

2. 사운드 태그 <audio>

<audio src="test.mp3" controls autoplay loop></audio>

 img 태그와 마찬가지로 src의 파일 경로로 오디오 파일을 삽입할 수 있습니다.

 audio 태그는 특이하게 속성값 없이, 속성만으로 기능을 추가할 수 있습니다. controls 속성으로 음악 플레이어 삽입할 수 있으며, controls가 없으면 사용자가 소리를 제어할 수 없습니다.

 autoplay가 있으면 오디오가 곧바로 재생됩니다.

 loop는 오디오가 무한 반복 재생되도록 만듭니다.

 위 코드는 페이지가 로딩되자마자 test.mp3 오디오를 반복 재생합니다.

 

<audio src="test.mp3" autoplay loop></audio>

 위 코드는 음악 플레이어 없이, test.mp3를 무한 반복합니다. 이는 유저가 음악을 끌 수 없으므로, 주의해야 합니다.

 

 

 

3. 비디오 태그 <video>

<video src="test.mp4" width="400px" height="300px" controls autoplay></video>

 video 태그는 img 태그와 audio 태그를 합친 느낌입니다. 영상은 '이미지 + 소리'라서 그럴까요? img 태그의 width, height 속성으로 가로 세로 크기를 조절할 수 있고, audio 태그의 controls, autoplay 속성을 사용할 수 있습니다.