Img, Multmedia Tag

🟦    Img Tag

이미지를 삽입해 화면에 출력하는 역할.

👉🏻  닫는 태그가 없는 빈 태그(Empty Tag)이며, 속성을 통해 이미지의 경로와 정보를 설정한다.

 

🔸  핵심 속성

<img src="경로" alt="대체 텍스트">

• src (Source): 필수 속성으로, 이미지, 스크립트, 비디오 등 외부 리소스의 위치(URL)를 지정하는 태그.
• alt (Alternative Text): 이미지를 표시할 수 없을 때 대신 표시되는 설명 텍스트.
  • alt="설명": 사진을 통한 정보 전달을 위해  내용이 필요한 경우.
  • alt="": 디자인을 위한 이미지로  내용이 불필요할 경우.

 

🔸  크기 및 제목 관련 속성

이미지의 외형과 부가 정보를 제어하는 속성.

<img src="경로"
     alt="대체 텍스트"
     width="너비" height="높이"
     title="설명"
     loading="lazy">

• width, height: 이미지의 너비를 픽셀(px) 단위로 지정. (한가지만 조절하면 원본 비율에 맞춰 나머지는 자동으로 조정)
• title: 이미지 위에 마우스 오버 시 나타나는 설명(툴팁) 제공.
• loading: img 태그의 로딩 방식을 지정하는 속성.
  
  • eager loading: 즉시 로드.
  • lazy loading: 화면에 보일 때까지 이미지 로딩 지연 후 필요 시점에 로드.

 

 

📍  POINT 📍 

✔️ 이미지 크기는 HTML에서 수정하는 것보다 CSS(width, height)로 조절하는 것이 좋다. ✔️ 

✔️  alt=" " 따옴표 사이에 한 칸을 띄우면 안되고, alt="" 반드시 붙여서 써야 '빈 값'으로 정확히 인식한다. ✔️

 

 

📋 이미지 태그 속성 요약표 📋

속성명	의미	필수 여부	비고
src	이미지 파일 경로	필수	로컬 파일 혹은 웹 URL
alt	대체 텍스트	필수	웹 접근성 및 SEO에 필수
width	이미지 너비	선택	숫자만 입력 (px단위 생략)
height	이미지 높이	선택	비율 유지를 위해 하나만 권장
title	설명 메시지	선택	마우스 호버 시 노출

 

---

 

🟦   Multimedia Tag

이미지, 영상, 소리 같은 멀티미디어 콘텐츠를 넣을 때 사용하는 역할.

👉🏻 fallback 텍스트: 브라우저가 <video> 태그를 지원하지 않거나, 영상 재생이 불가능할 경우 태그 사이에 대신 표시되는 안내 문구를 넣을 수 있다.

 

🔵 <video> 비디오 태그

동영상을 재생할 때 사용하는 태그.

🔸 핵심 속성

<video controls muted autoplay loop preload="metadata" width="700" poster="images/thumbnail.jpg">
  <source src="video/movie.mp4" type="video/mp4">
  <source src="video/movie.webm" type="video/webm">
  브라우저가 비디오를 지원하지 않습니다.
</video>

• src: 비디오 파일의 경로를 지정.
• controls: 재생 제어기 표시.
• autoplay: 페이지가 로드 시 자동 재생. (대부분의 브라우저에서 muted와 함께 작동)
• muted: 음소거 상태로 시작.
• loop: 재생이 끝나면 자동 반복.
• preload: 페이지 로드 시 얼마나 미리 로드할지 결정.
  • auto: 전체 파일 미리 로드.
  • metadata: 메타데이터 (정보)만 로드.
  • none: 로드 없음.
• poster: 영상이 로딩 중이거나 재생 전일 때 보여줄 썸네일 이미지.

 

🔵 <audio> 오디오 태그

음악, 음성 파일을 삽입할때 사용하는 태그.

🔸 핵심 속성

<audio controls muted preload="metadata">
  <source src="audio/music.mp3" type="audio/mpeg">
  <source src="audio/music.ogg" type="audio/ogg">
  브라우저가 오디오를 지원하지 않습니다.
</audio>

• src: 오디오 파일의 경로를 지정.
• controls: 재생 제어기 표시.
• autoplay: 페이지가 로드 시 자동 재생. (대부분의 브라우저에서 muted와 함께 작동)
• muted: 음소거 상태로 시작.
• loop: 재생이 끝나면 자동 반복.
• preload: 페이지 로드 시 얼마나 미리 로드할지 결정.
  • auto: 전체 파일 미리 로드.
  • metadata: 메타데이터 (정보)만 로드.
  • none: 로드 없음.

 

🔵 <source> 소스 태그

다양한 파일 형식(mp4, webm, ogg 등)을 지원해 호환성을 높인다.

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

• 브라우저가 <source> 태그 순서대로 지원 가능 여부를 체크하고 재생 가능한 파일을 사용한다.

 

🔵 <object>, <embed> 태그

HTML5를 지원하지 않는 브라우저에서 사용할 수 있는 플러그인(오디오 및 동영상을 위한 추가 확장기능) 포함 태그.

<object width="900" height="800" data="product.pdf"></object>

<embed src="medias/spring.mp3">

 

 

📍  POINT 📍 

✔️ <video>, <audio> 태그는 사용자 편의를 위해 controls 속성을 표시한다. ✔️ 

✔️ autoplay 속성은 muted 속성과 같이 사용한다. ✔️

✔️ <source> 태그로 다양한 기기 호환을 위한 여러 확장자를 제공한다. ✔️

 

 

📋 멀티미디어 속성 요약표 📋

속성명	의미	비고
controls	재생 제어기	사용자 조작 시 필수 요소
autoplay	자동 재생	muted와 함께 써야 브라우저가 차단 안 함
muted	음소거	자동 재생을 위한 매너
loop	반복 재생	배경 영상이나 BGM에 유용
poster	미리보기 이미지	영상 로딩 전 썸네일 역할