이미지, 오디오, 비디오: 웹에 생명을 불어넣다

HTML은 단순한 텍스트뿐만이 아니라, 사진, 음악, 영상까지 다양한 미디어를 손쉽게 웹에 담아낼 수 있는 힘을 갖추고 있습니다. 여기서 소개하는 이미지·오디오·비디오 임베딩 태그들은 웹 페이지를 살아 숨 쉬게 만드는 핵심 도구입니다.

이미지를 담는 법: <img> 태그의 모든 것

사진이나 그림을 웹페이지에 삽입할 때는 img 태그가 주인입니다. 이 태그에는 반드시 이미지 파일의 경로를 지정하는 src 속성과, 이미지를 불러올 수 없을 때를 대비해 대체 설명을 담는 alt 속성을 쓸 것을 권장합니다. 예시로, <img src="cat.jpg" alt="귀여운 고양이 사진">처럼 사용합니다. 크기 조정은 width나 height 속성으로 비율을 쉽고 안전하게 바꿀 수 있습니다. 이미지가 담는 정보까지 세심하게 신경 써야 접근성과 검색에서도 더 좋은 결과를 얻습니다.

오디오 삽입: 소리로 공간을 채우다

음악이나 음성 파일을 들려주고 싶다면 HTML5에서 새롭게 도입된 audio 태그가 그 역할을 담당합니다. 기본 구조는 <audio src="song.mp3" controls></audio>처럼 단순합니다. 여기서 controls 속성은 재생/일시정지 버튼 등 기본 제어기를 화면에 보이게 해줍니다. 반복 재생이 필요하면 loop, 자동 재생은 autoplay, 그리고 음소거는 muted 속성을 곁들일 수 있습니다. 미디어 파일이 여러 형식으로 제공되어야 한다면 <source> 태그로 종류별로 소스를 나열해 크로스브라우징에도 대비할 수 있습니다.

영상을 끌어오는 힘: <video> 태그의 활용법

웹페이지에 직접 영상을 넣을 때에는 video 태그를 사용하면 됩니다. <video src="sample.mp4" controls width="400"></video>와 같이 몇 줄 코드면 영상이 눈앞에 펼쳐집니다. 오디오 태그와 마찬가지로 각종 제어 속성이 지원되며, 재생 도중 썸네일 이미지를 띄우고 싶다면 poster 속성에 이미지를 지정합니다. 파일은 MP4, WebM, Ogg 등 여러 형식을 지원하지만, 모든 브라우저를 폭넓게 대응하려면 여러 포맷을 준비하고 <source> 태그로 나열하는 것이 좋습니다. 비디오의 크기, 자동 반복, 음소거 등 다양한 설정도 속성에 따라 자유롭게 컨트롤할 수 있습니다.

외부 콘텐츠와의 연결도 문제없다

내 서버에 직접 파일을 두지 않아도, 유튜브 동영상이나 구글 지도 등 외부 서비스를 웹에 임베드하려면 iframe 태그가 단골로 쓰입니다. 주소만 맞게 입력하면, 원하는 콘텐츠를 내 페이지로 불러오기가 매우 간편해집니다. 최근의 HTML 표준은 멀티미디어 컨텐츠를 손쉽게 불러오면서도 보안, 호환성 면에서도 편리함을 더해가고 있습니다.

멀티미디어 활용, 더 쉽고 더 풍부하게

한때는 복잡한 플러그인이나 별도 프로그램에 의존해야 했던 미디어 삽입이, 이젠 HTML 기본 기능만으로 충분히 구현 가능합니다. 이미지는 정보 전달과 감성 표현에, 오디오와 비디오는 생생한 몰입감을 더해줍니다. 적절한 태그의 선택과 속성의 활용만 잘 익히면, 나만의 웹페이지도 멀티미디어로 가득 채울 수 있습니다.

이처럼 HTML은 정보전달의 경계를 무한히 확장하며, 텍스트에서 이미지, 그리고 음악과 영상에 이르기까지 콘텐츠의 모든 것을 아우르는 웹의 기준점이 됩니다.