2. HTML_이미지 동영상 삽입

📚 HTML 이미지 & 동영상 삽입 정리

 

 

🖼️ 이미지 삽입

<!-- 이미지 삽입 기본 -->
<img 
    src="./images/book.jpg"   <!-- 이미지 경로 (.은 현재 위치) -->
    alt="책 이미지"           <!-- 대체 텍스트: 이미지가 없을 때 표시 -->
    title="book.jpg"         <!-- 마우스 오버 시 설명 -->
    width="100"              <!-- 가로 크기 -->
    height="50"              <!-- 세로 크기 -->
>

 

• src : 이미지 경로 지정
• alt : 이미지가 없을 때 대신 표시되는 텍스트 (웹 접근성 ↑)
• title : 마우스를 올리면 나오는 설명

---

🎥 동영상 삽입

<video width="300" controls>
    <source src="./media/myMovie.mp4" type="video/mp4"> <!-- 크롬, 사파리, IE -->
    <source src="./media/myMovie.ogv" type="video/ogg"> <!-- 파이어폭스, 오페라 -->
    브라우저가 동영상을 지원하지 않습니다.
</video>

 

 

• controls : 재생/일시정지/볼륨 등 컨트롤러 표시
• width : 동영상 크기
• <source> 여러 개 지정 → 브라우저 호환성 보장
• 마지막 문구 : 동영상 미지원 브라우저에서 표시됨