#9 - HTML 태그 - 이미지/동영상/오디오

이미지/동영상/오디오 태그 

아래 태그는 body내 위치합니다.

태그 예시

<img
     srcset="images/logo_320.png 320w,
                  images/logo_480.png 480w
                  images/logo_800.png 800w"
     sizes="(max-width: 320px) 280px,
                (max-width: 480px) 440px,
                800px"
     width="100%"
     src="images/logo.png"
     alt="logo" />
     
     

<audio 
     src="audios/audios.mp3"
     alt="audio file"
     autoplay
     muted>
</audio>


<video 
     src="video/video.mp4"
     alt="video file"
     autoplay
     muted>
</video>

<figure>
     <img src="logo.png" alt="logo">
     <figcaption>서비스의 로고입니다.</figcaption>
</figure>

태그 설명

태그	속성	의미	값
img	이미지를 불러올 수 있는 태그
	srcset	브라우저에게 제시할 이미지 목록과 그 크기를 정의 px 사용 안함, 가로는 w, 세로는 x로 입력함 IE 지원 안함
	sizes	미디어 조건문들을 정의하고, 특정 미디어 조건문이 참일 때 어떤 이미지 크기가 최적인지 나타낸다 IE 지원 안함
	예시 ) 브라우저의 가로사이즈가 480인 경우, size에서 480px을 찾아 440px 슬롯을 선택. 440px에 맞는 480w를 찾아 이미지 적용
	with	고정된 가로값 사용
	src (필수)	이미지의 경로	경로
	alt (필수)	이미지가 나오지 않을 경우 대체 텍스트	텍스트
audio	오디오를 불러올 수 있는 태그. autoautoplay / preload 동시 적용 시 autoautoplay가 적용 됨
	autoplay	가능한 빠른 시점에 재생 여부	Boolean
	controls	컨트롤러 제공 여부	Boolean
	loop	반복 재생 여부	Boolean
	preload	정보를 불러오는 시점 설정 1. none : 로드 안함. 오디오 클릭 시 로드 2. metadata : 메타데이터만 로드. 오디오 클릭 시 전체 로드. 기본 값 3. auto : 전체 파일 로드.	none metadata auto
	src	오디오의 경로	URL
	muted	음소거 여부	Boolean
video	동영상 불러올 수 있는 태그. autoautoplay / preload 동시 적용 시 autoautoplay가 적용 됨
	autoplay	가능한 빠른 시점에 재생 여부	Boolean
	controls	컨트롤러 제공 여부	Boolean
	loop	반복 재생 여부	Boolean
	preload	정보를 불러오는 시점 설정 1. none : 로드 안함. 오디오 클릭 시 로드 2. metadata : 메타데이터만 로드. 오디오 클릭 시 전체 로드. 기본 값 3. auto : 전체 파일 로드.	none metadata auto
	poster	썸네일 설정	URL
	src	오디오의 경로	URL
	muted	음소거 여부	Boolean
	with	가로 크기
	height	세로 크기
figure	미디어와 미디어 설명을을 묶어줌. 컴퓨터가 읽을 수 있도록 도와줌
figcaption	미디어에 대한 설명을 입력