[HTML5]이미지 태그, 오디오 태그, 비디오 태그

이미지 태그에 대해 설명합니다

모든 포스트 목록

이미지 관련 태그

<img src="주소" width="넓이" height="높이" alt="대체 택스트" title="설명">

이미지 태그

• src(source) 속성 : 파일의 주소
• width, height 속성 : 파일 크기 조정
• alt(alternate text) 속성 : 이미지가 표시하지 못할 경우를 대비한 대체 설명 텍스트 지정

<figure>콘텐츠</figure>

그림, 사진 등의 콘텐츠를 함께 묶어서 하나의 독립된 단위로 취급하고 싶을 때 사용하는 태그

<figcaption>설명</figcaption>

<figure> 요소를 위한 제목을 표현, <figure> 요소 내에 위치한다

img, figure 태그 예시

[figurecaption]logo

<figure>
   <figurecaption>[figurecaption]logo</figurecaption>
   <img src="img.png" title="[img]">
</figure>

오디오 태그

<audio [controls] [autoplay] src="주소" preload="로드">대체 텍스트 입력</audio>

오디오 삽입 태그

• controls 속성 : 미디어 제어기를 표시할 지 여부
• autoplay 속성 : 파일이 로드되자마자 자동으로 재생 여부
• loop 속성 : 사운드 반복 재생 횟수
• preload 속성 : 브라우저가 미리 로딩 할 지 여부
  • auto(기본값) : 페이지를 로드하고 바로 오디오 파일 다운로드
  • metadata : 사용자가 재생 시키기 전까지는 오디오의 메타데이터만 다운로드
  • none : 재생 하기 전까지는 오디오 파일 다운로드 안 함

<source src="주소" type="파일의 형식">

이 요소를 사용하여 오디오 파일이 지원되지 않을 경우를 대비한다

• 같은 내용을 여러 형식으로 작성한 파일을 지정한다
• src 속성 : 오디오 파일의 주소
• type 속성 : MIME 형식으로 전송하여 웹에 전달

audio 태그 예시

<audio autoplay controls loop="10" src="주소">브라우저에서 audio를 지원하지 않습니다</audio>

source 태그 예시

<audio controls autoplay preload="auto">
    <source src="ex.mp3" type="audio/mp3">
    <source src="ex.ogg" type="audio/ogg">
    <source src="ex.wav" type="audio/wav"> 
</audio>

비디오 태그

<video [controls] src="주소" width="폭" height="높이">

비디오 삽입 태그

• src, controls, loop, qutoplay 속성 : <audio> 요소의 속성과 동일
• width, height 속성 : 화면에서 비디오가 표시될 영역의 크기
• videoWidth, videoHeight 속성 : 비디오 자체의 너비와 높이
• poster 속성 : 동영상이 로딩되고 있을 때 보여줄 이미지
• preload 속성 : 브라우저가 미리 로딩 할 지 여부
  • auto(기본값) : 페이지를 로드하고 바로 비디오 파일 다운로드
  • metadata : 비디오 크기, 첫 프레임 등 비디오의 메타데이터만 다운로드
  • none : 재생 시작 전까지 비디오 파일 다운로드 안 함

<source src="주소" type="파일의 형식">

이 요소를 사용하여 비디오 파일이 지원되지 않을 경우를 대비한다

• 같은 내용을 여러 형식으로 작성한 파일을 지정한다
• src 속성 : 비디오 파일의 주소
• type 속성 : MIME 형식으로 전송하여 웹에 전달

video 태그 예시

<video controls="" src="" width="360px" height="360px" videowidth="300px" videoheight="300px">
    이 브라우저에서 video를 지원하지 않습니다
</video>

#html5 #이미지 #오디오 #비디오
참고 : HTML5 웹 프로그래밍 입문, 저자 : 임순범, 박희민, 이창환