본문 바로가기
Study/HTML

HTML 기초 강의 10편: 이미지, 비디오, 오디오 삽입하기

by wawManager 2024. 11. 10.
728x90

1. 이미지 삽입하기: <img> 태그

이미지는 <img> 태그를 사용하여 삽입하며, 주요 속성으로 src, alt, width, height 등이 있습니다. <img> 태그는 닫는 태그가 없는 단일 태그입니다.

<img src="image.jpg" alt="이미지 설명" width="300" height="200">

 

  • src: 이미지 파일의 경로를 지정합니다.
  • alt: 이미지를 표시할 수 없는 경우 대신 표시할 텍스트로, 웹 접근성에도 중요합니다.
  • width, height: 이미지의 너비와 높이를 픽셀(px) 또는 퍼센트(%)로 설정합니다.

예제: 이미지 삽입

<img src="https://via.placeholder.com/150" alt="예제 이미지" width="150" height="150">

 

2. 비디오 삽입하기: <video> 태그

HTML5에서는 <video> 태그를 사용하여 비디오를 직접 삽입할 수 있습니다. <source> 태그로 다양한 형식의 비디오 파일을 추가하여 호환성을 높일 수 있습니다.

<video width="320" height="240" controls>
    <source src="movie.mp4" type="video/mp4">
    <source src="movie.ogg" type="video/ogg">
    지원하지 않는 브라우저에서는 이 텍스트가 표시됩니다.
</video>
  • controls: 재생, 일시 정지, 볼륨 등의 기본 비디오 컨트롤을 제공합니다.
  • autoplay: 페이지 로드 시 비디오가 자동으로 재생됩니다. (일부 브라우저는 음소거된 상태에서만 자동 재생을 허용)
  • loop: 비디오가 끝나면 다시 처음부터 반복 재생됩니다.
  • muted: 비디오가 음소거 상태로 시작됩니다.

예제: 비디오 삽입

<video width="320" height="240" controls autoplay loop muted>
    <source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
    <source src="https://www.w3schools.com/html/mov_bbb.ogg" type="video/ogg">
    지원하지 않는 브라우저에서는 이 텍스트가 표시됩니다.
</video>

3. 오디오 삽입하기: <audio> 태그

오디오 파일은 <audio> 태그를 사용하여 삽입하며, 비디오와 마찬가지로 <source> 태그를 통해 여러 형식의 오디오 파일을 추가할 수 있습니다.

<audio controls>
    <source src="sound.mp3" type="audio/mpeg">
    <source src="sound.ogg" type="audio/ogg">
    지원하지 않는 브라우저에서는 이 텍스트가 표시됩니다.
</audio>

 

  • controls: 재생, 일시 정지, 볼륨 조절 등의 기본 오디오 컨트롤을 제공합니다.
  • autoplay: 페이지 로드 시 오디오가 자동으로 재생됩니다.
  • loop: 오디오가 끝나면 다시 처음부터 반복 재생됩니다.
  • muted: 오디오가 음소거 상태로 시작됩니다.

예제: 오디오 삽입

<audio controls autoplay loop muted>
    <source src="https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3" type="audio/mpeg">
    지원하지 않는 브라우저에서는 이 텍스트가 표시됩니다.
</audio>

 

4. 외부 미디어 삽입하기: YouTube와 같은 외부 소스 사용

YouTube와 같은 외부 사이트의 비디오를 웹 페이지에 삽입할 때는 iframe 태그를 사용합니다.

<iframe width="560" height="315" src="https://www.youtube.com/embed/dQw4w9WgXcQ" 
        title="YouTube video player" frameborder="0" 
        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" 
        allowfullscreen></iframe>

 

  • src: 임베드할 비디오의 URL입니다.
  • allowfullscreen: 전체 화면 모드가 가능하게 설정합니다.
  • frameborder: 테두리 두께를 지정합니다. (0은 테두리가 없음)

예제: YouTube 비디오 삽입

<iframe width="560" height="315" src="https://www.youtube.com/embed/dQw4w9WgXcQ" 
        title="YouTube video player" frameborder="0" 
        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" 
        allowfullscreen></iframe>

5. 미디어 관련 속성 및 고려 사항

미디어 속성 및 설정

  • 반응형 설정: CSS에서 max-width: 100%를 설정하여 미디어가 화면 크기에 맞춰 조정되도록 합니다.
  • 자막 추가: <track> 태그를 사용하여 비디오에 자막을 추가할 수 있습니다. 이를 통해 접근성을 높일 수 있습니다.
<video width="320" height="240" controls>
    <source src="movie.mp4" type="video/mp4">
    <track src="subtitles.vtt" kind="subtitles" srclang="en" label="English">
</video>

웹 접근성

  • 대체 텍스트: 이미지의 alt 속성, 비디오와 오디오에서 지원하지 않는 브라우저를 위한 대체 텍스트를 작성합니다.
  • 미디어 자동 재생: 일부 사용자에게 혼란을 줄 수 있으므로, 자동 재생 설정은 주의해서 사용해야 합니다

HTML 미디어 요소 활용 예제

아래는 다양한 미디어 요소를 사용하여 웹 페이지에 콘텐츠를 삽입한 예제입니다.

<!DOCTYPE html>
<html>
<head>
    <title>HTML 미디어 요소 예제</title>
    <style>
        img, video, audio, iframe {
            max-width: 100%;
            height: auto;
        }
    </style>
</head>
<body>
    <h2>이미지</h2>
    <img src="https://via.placeholder.com/300" alt="샘플 이미지" width="300">

    <h2>비디오</h2>
    <video width="320" height="240" controls autoplay muted>
        <source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
    </video>

    <h2>오디오</h2>
    <audio controls>
        <source src="https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3" type="audio/mpeg">
    </audio>

    <h2>YouTube 비디오</h2>
    <iframe width="560" height="315" src="https://www.youtube.com/embed/dQw4w9WgXcQ" 
            title="YouTube video player" frameborder="0" 
            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" 
            allowfullscreen></iframe>
</body>
</html>

요약

이번 강의에서는 HTML에서 이미지, 비디오, 오디오 등 다양한 미디어 콘텐츠를 삽입하는 방법과 각 태그의 속성들에 대해 알아보았습니다. HTML5의 미디어 태그를 사용하면 웹 페이지에 다양한 콘텐츠를 쉽게 추가하여 사용자 경험을 풍부하게 만들 수 있습니다.

 

 

 

 

 

728x90

'Study > HTML' 카테고리의 다른 글

HTML 기초 강의 12편: SEO 기초와 HTML 최적화  (0) 2024.11.12
HTML 기초 강의 11편: 웹 접근성(Accessibility) 기초와 ARIA 태그  (1) 2024.11.11
HTML 기초 강의 9편: 폼 유효성 검사(Validation)  (1) 2024.11.09
HTML 기초 강의 8편: HTML5 시맨틱 태그로 웹 구조 개선하기  (5) 2024.11.08
HTML 기초 강의 7편: 테이블로 데이터 정리하기  (0) 2024.11.07

관련글

티스토리툴바