HTML5 Source 태그 사용법

1. Source 태그란?

Source 태그는 미디어 요소(audio, video, picture)에 대한 미디어 리소스를 지정하는 데 사용됩니다. 다양한 미디어 형식과 해상도를 지원하여 브라우저가 가장 적합한 미디어를 선택할 수 있게 합니다.

2. 기본 구조

<video controls>
    <source src="video.mp4" type="video/mp4">
    <source src="video.webm" type="video/webm">
    브라우저가 비디오를 지원하지 않습니다.
</video>

3. 자주 사용되는 속성

4. 실제 사용 예제

<!-- 비디오 예제 -->
<div class="video-example">
    <h3>비디오 예제</h3>
    <video controls>
        <source src="video.mp4" type="video/mp4">
        <source src="video.webm" type="video/webm">
        브라우저가 비디오를 지원하지 않습니다.
    </video>
</div>

<!-- 오디오 예제 -->
<div class="audio-example">
    <h3>오디오 예제</h3>
    <audio controls>
        <source src="audio.mp3" type="audio/mpeg">
        <source src="audio.ogg" type="audio/ogg">
        브라우저가 오디오를 지원하지 않습니다.
    </audio>
</div>

<!-- 이미지 예제 -->
<div class="image-example">
    <h3>이미지 예제</h3>
    <picture>
        <source media="(min-width: 800px)" srcset="large.jpg">
        <source media="(min-width: 400px)" srcset="medium.jpg">
        <img src="small.jpg" alt="반응형 이미지">
    </picture>
</div>

<style>
    /* 비디오 예제 스타일 */
    .video-example {
        margin: 20px 0;
        padding: 15px;
        border: 1px solid #ddd;
        border-radius: 4px;
    }

    /* 오디오 예제 스타일 */
    .audio-example {
        margin: 20px 0;
        padding: 15px;
        border: 1px solid #ddd;
        border-radius: 4px;
    }

    /* 이미지 예제 스타일 */
    .image-example {
        margin: 20px 0;
        padding: 15px;
        border: 1px solid #ddd;
        border-radius: 4px;
    }

    /* 반응형 스타일 */
    @media (max-width: 768px) {
        .video-example,
        .audio-example,
        .image-example {
            margin: 10px 0;
            padding: 10px;
        }
    }
</style>

5. 스타일링 예제

<style>
    /* 비디오 스타일 */
    video {
        width: 100%;
        max-width: 800px;
        height: auto;
    }

    /* 오디오 스타일 */
    audio {
        width: 100%;
        max-width: 400px;
    }

    /* 이미지 스타일 */
    picture {
        display: block;
        max-width: 100%;
    }

    /* 반응형 스타일 */
    @media (max-width: 768px) {
        video {
            max-width: 100%;
        }

        audio {
            max-width: 100%;
        }
    }
</style>

6. 성능 최적화 팁

• 적절한 미디어 형식을 선택합니다.
• 미디어 파일을 최적화합니다.
• 지연 로딩을 고려합니다.
• 불필요한 미디어 로딩을 피합니다.

7. 검증 및 테스트

source 태그가 올바르게 사용되었는지 확인하는 방법:

• W3C 마크업 검증 서비스 사용
• 다양한 브라우저에서 테스트
• 다양한 미디어 형식 테스트
• 미디어 로딩 테스트
• 접근성 검사 도구 사용