HTML 멀티 미디어

<img />

빈태그

이미지를 삽입

 

- srcset : 이미지 소스의 세트, 같은 비율의 다양한 크기를 가지는 동일 이미지들 최소 2개이상 명시

브라우저에 이미지 선택권 위임하는 속성 -> 사용자 환경의 브라우저에 최적 크기 이미지를 보여줌

단, 이미지 크기로 px이 아닌 w 단위 혹은 x 단위를 입력해야 하며, 작은 크기 이미지부터 순서대로 입력해야함

 

속성은 쉼표로 구분된 사용할 이미지들의 경로와 해당 이미지 원본 크기 지정

sizes 속성은 쉼표로 구분된 미디어조건(선택적)과 그에 따라 최적화되어 출력될 이미지 크기 지정

 

w

w 단위(width descriptor)는 이미지 원본 크기(가로 너비) 의미

ex ) 400 x 300 (px) 크기 이미지의 w 값은 400w 

 

x

x 단위(device pixel ratio descriptor)는 이미지 비율 의도(=배수) 의미

 

w 단위 사용하면 x 단위 사용할 필요 없음. 대부분의 경우 w 단위 사용

 

sizes

미디어 조건(괄호사용)과 그 조건에 해당하는 이미지의 '최적화 출력 크기' 지정

 

- 최적화 출력 : 출력크기와 최적크기 동시에 지정해서 경로가 바뀌지 않음(조건 설정해서 그때그때 다르게 가능)

- 일반 출력 : width 속성 사용 - 사이즈는 유지하지만 이미지 경로는 달라짐

 

sizes와 width 같이 작성할 경우 width가 우선 => 둘 다 IE 지원안함

 

<img
  srcset="경로 원본크기,
          경로 원본크기,
          경로 원본크기"
  sizes="(미디어조건) 최적화출력크기,
         (미디어조건) 최적화출력크기,
         기본출력크기"
  src="경로"
  alt="대체텍스트" />

 

<audio>

소리 콘텐츠(mp3) 삽입

 

속성	의미	값	기본값
autoplay	준비되면 바로 재생	boolean
controls	제어 메뉴(버튼) 표시	boolean
loop	재생 끝나면 다시 처음부터 재생	boolean
preload	페이지가 로드될 때 파일 로드할지 지정(힌트제공)	none : 로드하지 않음 metadata : 메타데이터만 로드 auto : 전체 파일 로드	metadata
src	콘텐츠 URL	URL
muted	음소거 여부	boolean

 

<video>

동영상 콘텐츠(mp4) 삽입

- autoplay가 지정된 경우, preload는 무시됨

 

audio 속성에서 몇개 추가됨

속성	의미	값	기본값
crossorigin	가져 오기가 CORS(동일 출처 정책) 사용하여 수행되어야 하는지 여부	anonymous, use-credentials
poster	동영상 시작 전 보여지는 썸네일 이미지 URL	URL

 

<figure>, <figcaption>

figure : 이미지나 삽화, 도표등의 영역 설정 - 블록요소

figcaption : figure에 포함되어 이미지나 삽화 등의 설명 표시 - 인라인요소

 

<iframe>

다른 HTML 페이지를 현재 페이지에 삽입

ex) 유튭, 비메오 ..

인라인요소

 

속성	의미	값	기본값
frameborder	프레임 테두리 사용 여부	0(사용X), 1	1
sandbox	보안을 위한 읽기 전용으로 삽입	불린 or allow-form : 양식 제출 가능, allow-scripts : 스크립트 실행 가능, allow-same-origin : 같은 출처(도메인)의 리소스 사용 가능

 

<canvas>

Canvas API나 WebGL API 사용해 그래픽이나 애니메이션을 렌더링

JS를 알아야 제어 가능

인라인요소

 

<script>

스크립트 코드 문서에 포함하거나 참조(외부 스크립트)

JS나 외부 스크립트를 가져옴

 

속성	의미	값	특징
async	스크립트의 비동기적 실행 여부	불린	src 속성 필수
defer	문서 파싱(구문 분석) 후 작동 여부	불린	src 속성 필수
src	참조할 외부 스크립트 URL	URL	포함된 스크립트 태그는 무시됨(script에 src 사용해서 외부 자바스크립트 파일 가져오면 내부에 작성한 스크립트 코드는 무시된다는 뜻)

defer :  js를 연결하는 script가 head에 있는 경우 위에서부터 아래로 읽을 때 js에서 body에 있는 element를 찾으려 할 경우 아직 읽지 않은 부분이기 때문에 null값이 들어가고 명령이 제대로 동작하지 않음. 따라서 defer를 사용해서 구문 분석을 다 한 후 작동 시키거나 아예 body태그 맨 아래에 script 태그를 넣는 경우가 있음.

 

<noscript>

스크립트 지원하지 않는 경우(js 지원 안하거나, 샌드박스로 막은 경우)에 삽입할 HTML 정의