html/examples/06_미디어속성.html

<!doctype html>
<html lang="ko">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>HTML 미디어 속성 예제</title>
        <style>
            .img-style {
                width: 100px;
                height: 100px;
            }
            .video-style {
                width: 200px;
                height: 100px;
            }
        </style>
    </head>
    <body>
        <h1>HTML 미디어 속성 예제</h1>

        <!-- 이미지 파일을 불러오는 예제 -->
        <img src="../src/image.png" alt="이미지 설명" class="img-style" />

        <!-- 이미지가 없는 경우 대체 텍스트 표시 -->
        <img src="image-notFound.jpg" alt="이미지 설명" />

        <!-- 미디어 파일에 기본 컨트롤 인터 페이스를 추가 -->
        <video src="../src/video.mp4" controls class="video-style">비디오가 지원되지 않는 브라우저입니다.</video>

        <!-- 미디어 파일이 자동으로 재생되는 예제 -->
        <audio src="../src/audio.mp3" autoplay></audio>

        <!-- 미디어 파일이 무한 반복되는 예제 -->
        <video src="../src/video.mp4" autoplay loop class="video-style"></video>

        <!-- 미디어 파일을 음소거로 재생 -->
        <video src="../src/video2.mp4" autoplay muted class="video-style"></video>
    </body>
</html>