FE/HTML

[HTML] 미디어태그-이미지(Image), 오디오(Audio), 비디오(Video), 유튜브(Youtube)

kKkKkKWJ 2024. 6. 2. 17:22

*작성자는 공부 중인 학생으로 잘못 된 정보가 있을 수 있음을 알려드립니다.

 

1. 이미지 태그

<img src="이미지주소" alt="대체 텍스트">

이미지 태그에는 src속성과 alt속성이 반드시 있어야한다.

 

src 속성

이미지의 경로를 지정한다. 파일의 형식은 jpeg, png, gif를 추천한다.

외부 url도 가능하고, 컴퓨터 내의 이미지도 가능한데, 이 때 경로는 절대 경로와 상대 경로 모두 가능하다.

💡 절대 경로 : 전체 경로를 포함하여 리소스의 위치를 지정한다.

💡 상대 경로 : 현재 문서의 우치를 기준으로 리소스의 위치를 지정한다.

 

alt 속성

이미지를 정상적으로 불러오지 못했을 때 이미지에 대한 대체 텍스트를 나타낸다.

 

이미지의 크기 조절은 HTML의 height와 width 속성으로 가능하지만, CSS로 하기를 공식 문서에서 권장하고 있다.

<img src="https://www.w3schools.com/images/w3schools_green.jpg" alt="W3Schools.com" style="width:104px;height:142px;">

이미지와 관련된 태그에는 <picture>태그도 있다.

img태그는 단순히 하나의 이미지를 삽입하지만, pictur태그는 주로 반응형 이미지를 제공하기 위해서 사용된다.

즉, 화면 크기나 해상도에 따라 다른 이미지를 제공하기 위해 사용된다.

이는 나중에 배울 미디어 쿼리를 이용해서도 구현이 가능하기 때문에 많이 사용하지는 않는 것같다. ( 개인적인 생각 )

<picture>태그에 대해서 알아보고 싶다면 링크를 참고하기 바란다.

<picture>
  <source srcset="image-small.jpg" media="(max-width: 600px)">
  <source srcset="image-medium.jpg" media="(max-width: 1200px)">
  <source srcset="image-large.jpg">
  <img src="image-default.jpg" alt="Description of image">
</picture>

 


2. 오디오 태그

<audio src="Kalimba.mp3 controls="controls></audio>

오디오 태그는 위와 같은 형식을 따른다.

하지만 브라우저에 따라 지원하는 확장자 형식이 다르기 때문에 브라우저에 따라 오디오가 실행되지 않는 현상이 생길 수 있다.

이를 해결하기 위한 방법으로 audio 태그 안에 source 태그를 사용하는 방식이 있다.

 

코드를 먼저 살펴보는 것이 도움이 될 것 같다.

<audio controls autoplay muted>
  <source src="horse.ogg" type="audio/ogg">
  <source src="horse.mp3" type="audio/mpeg">
  Your browser does not support the audio element.
</audio>

먼저, audio태그의 속성부터 알아보자.

 

controls 속성

오디오의 재생, 볼륨과 같은 컨트롤러가 생긴다.

 

autoplay

자동 재생에 대한 속성이다.

 

muted

음소거에 대한 속성이다.

 

source안에는 같은 곡에 대한 다양한 확장자 파일을 지정하면, 웹 브라우저에 대한 제약 없이도 음악을 재생할 수 있다.

참고로, <audio>태그와 </audio>태그의 사이에 있는 내용은 음악을 정상적으로 불러오지 못했을 때 뜨는 텍스트이다.

 

 

3. 비디오 태그

<video> 태그의 속성은 <audio>태그의 속성과 매우 유사하다.

따라서 별다른 설명은 필요없이 바로 아래 예시를 보아도 이해가 될 것이다.

<video width="320" height="240" autoplay muted>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
  Your browser does not support the video tag.
</video>

 

비디오의 확장자는 mp4, WebM, Ogg 등이 있는데 브라우저에 따른 지원은 다음과 같다.

 

4. iframe 태그

우리 컴퓨터 내의 영상을 올리는 일도 있지만, 최근 유튜브 시장이 커지면서 유튜브 영상을 첨부하는 일이 많을 것이다.

이에 HTML은 유튜브 영상을 가져올 수 있는 <iframe>태그가 있다.

 

이 태그의 코드를 먼저 확인해 보자.

<iframe width="420" height="315"
  src="https://www.youtube.com/embed/tgbNymZ7vqY?autoplay=1&mute=1">
</iframe>

 

✔ src 속성

src 속성에 단순히 삽입할 (1)유튜브의 브라우저 url을 입력하거나 (2)유튜브 영상의 공유->링크 복사 로 삽입하면 영상이 정상적으로 삽입되지 않는다.

 

영상을 삽입하는 방법은 아래와 같다.

이 방법으로 복사를 누르면 <iframe>태그까지 포함되어 있는 상태로 복사가 되고, 단순히 코드에 붙여넣기만 하면 된다.

 

iframe에서 자동재생과 음소거, 컨트롤 등은 퍼가기 옵션에서 선택할 수도 있고,

퍼가기 옵션에서 설정할 수 없는 옵션들은 src 속성에 있는 링크에서 설정해주어야 한다.


src 속성값에서 조절할 수 있는 옵션은 대표적으로 autoplay, mute, loop, playlist, controls 등이 있다.