HTML - 멀티미디어 & 내장 콘텐츠 & 스크립트

멀티미디어

1. img

• 이미지를 삽입
• 반응형 웹에서 이미지를 지원하기 위해, ‘미디어쿼리’라고 부르는 CSS Media Rule(@media)에서 background-image 속성을 많이 사용하는데, 반응형 이미지를 처리하기 위해 뷰포트(Viewport)의 크기부터 사용자 화면의 해상도 등 많은 환경을 고려해야한다.
• HTML IMG의 srcset과 sizes를 통해 쉽게는 이미지의 크기를 설정하는 것만으로 대부분의 고려 사항을 사용자 브라우저(User agent)에 떠넘길 수 있다.

속성	의미	값
src	(필수)이미지 URL	URL
alt	(필수)이미지의 대체텍스트
width	이미지의 가로 너비
height	이미지의 세로 너비
srcset	브라우저에게 제시할 이미지 URL과 원본 크기의 목록을 정의	w, x
sizes	미디어 조건과 해당 조건일 때 이미지 최적화 크기의 목록을 정의

 

1) srcset은 브라우저에 제시할(사용할) 이미지들과 그 이미지들의 원본 크기를 지정

• 출력된 이미지 목록(후보)
• 이미지를 2장이상 사용할때 사용
•  주의사항은 이미지의 크기로 px단위가 아닌 w 디스크립터 혹은 x 디스크립터를 입력해야 하며, 작은 크기 이미지부터 순서대로 입력
• IE 지원 X

 

2) sizes 

• 미디어조건과 그 조건에 해당하는 이미지의 ‘최적화 출력 크기’를 지정
• IE 지원X

<img
  srcset="images/heropy_small.png 400w,
          images/heropy_medium.png 700w,
          images/heropy_large.png 1000w"
  sizes="(min-width: 1000px) 700px"  <!--최소 1000px, 이상일 경우 700px로 변경-->
  src="images/heropy.png"
  alt="HEROPY" />

- 뷰포트 너비가 400px 이하일 때 heropy_small.png(400px)가 사용
- 뷰포트 너비가 401~700px 일 때 heropy_medium.png(700px)가 사용
- 뷰포트 너비가 701~999px 일 때 heropy_large.png(1000px)가 사용
- 뷰포트 너비가 1000px 이상일 때 heropy_medium.png(700px)가 사용

 

- <!-- sizes는 없고 width만 있음 -->

<img
  srcset="images/heropy_small.png 400w,
          images/heropy_medium.png 700w,
          images/heropy_large.png 1000w"
  width="500"
  src="images/heropy.png"
  alt="HEROPY" />

- 뷰포트 너비가 400px 이하일 때 heropy_small.png가 사용
- 뷰포트 너비가 401~700px 일 때 heropy_medium.png가 사용
- 뷰포트 너비가 701px 이상일 때 heropy_large.png가 사용
- 뷰포트 너비에 따라 사용되는 이미지가 달라지지만 크기는 500px로 고정

 

• width는 이미지의 ‘출력 크기’만 지정하는 데 반해, sizes는 이미지의 ‘출력 크기’ + ‘최적 크기’도 함께 지정하는 개념
• 따라서 sizes="500px"이 지정된 첫번째 예제는 500px에 최적화된 이미지로 heropy_medium.png를 사용했고 이미지 크기도 500px로 설정
• sizes와 width를 같이 작성할 경우 width가 우선

 

3) W descriptor :  이미지의 원본 크기(가로 너비)를 의미

• 400x300(px) 크기 이미지의 w 값은 400w
• 고정된 이미지 크기를 유지하려면 width 속성을 추가할 수 있다.

<img
  srcset="images/heropy_small.png 400w,
          images/heropy_medium.png 700w,
          images/heropy_large.png 1000w"
  src="images/heropy.png"
  alt="HEROPY" />

- 뷰포트 너비가 400px 이하일 때 heropy_small.png(400px)가 사용
- 뷰포트 너비가 401~700px 일 때 heropy_medium.png(700px)가 사용
- 뷰포트 너비가 701px 이상일 때 heropy_large.png(1000px)가 사용

- 해당 srcset 내용을 CSS로 표현하려고 하면 코드내용이 많아진다. 따라서 srcset을 적절히 잘 사용해야함

 

 

4) X descriptor : 이미지의 비율 의도를 의미

• x 디스크립터는 디바이스의 픽셀 비율(Device pixel ratio)과 일치하는 값으로 최적화 선택된다.
• x보다는 w단위를 선택하는게 좋다.

예제

<!-- srcset, sizes -->
<!-- 다양한 디스플레이 해상도에 맞는 최적의 이미지를 브라우저가 선택해서 사용 -->
<img srcset="./small.jpg 320w,
             ./medium.jpg 640w,
             ./large.jpg 1024w"
     sizes="(max-width: 480px) 300px,
            (max-width: 800px) 600px,
            900px"
     src="./small.jpg"
     alt="The image" />
<img srcset="./image.jpg,
             ./image-1.5x.jpg 1.5x,
             ./image-2x.jpg 2x"
     src="./image.jpg"
     alt="The image" />

img { display: inline; }

 

---

2. audio

소리를 삽입

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

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

audio { display: inline; }

 

 

3. video

동영상 콘텐츠(MP4)를 삽입.

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

속성	의미	값	기본값
autoplay	준비되면 바로 재생	불린(Boolean)
controls	제어 메뉴를 표시	불린(Boolean)
loop	재생이 끝나면 다시 처음부터 재생	불린(Boolean)
muted	음소거 여부	불린(Boolean)
poster	동영상 썸네일 이미지 URL	URL
preload	페이지가 로드될 때 파일을 로드할지의 지정(힌트 제공)	none: 로드하지 않음, metadata: 메타데이터만 로드, auto: 전체 파일 로드	metadata
src	콘텐츠 URL	URL
width	동영상 가로 너비
height	동영상 세로 너비

video { display: inline; }

 

 

4. figure, figcaption

<figure>는 이미지나 삽화, 도표 등의 영역을 설정.
<figcaption>는 <figure>에 포함되어 이미지나 삽화 등의 설명을 표시.

<figure>
  <img src="milk.jpg" alt="A milk">
  <figcaption>Milk is a nutrient-rich, white liquid food produced by the mammary glands of mammals.</figcaption>
</figure>

figure { display: block; }
figcation { display: inline; }

 

---

내장콘텐츠

1. iframe

다른 HTML 페이지를 현재 페이지에 삽입. 중첩된 브라우저

속성	의미	값	기본값
name	프레임의 이름
src	포함할 문서의 URL	URL
width	프레임의 가로 너비
height	프레임의 세로 너비
allowfullscreen	전체 화면 모드 사용 여부	불린(Boolean)
frameborder	프레임 테두리 사용 여부	0, 1	1
sandbox	보안을 위한 읽기 전용으로 삽입	불린(Boolean) or allow-form: 양식 제출 가능, allow-scripts: 스크립트 실행 가능 , allow-same-origin: 같은 출처(도메인)의 리소스 사용 가능

<iframe width="1280" height="720" src="https://www.youtube.com/embed/Q9yn1DpZkHQ" frameborder="0" allowfullscreen></iframe>

iframe { display: inline; }

 

 

2. canvas

• Canvas API이나 WebGL API를 사용하여 그래픽이나 애니메이션을 랜더링.
• 그림은 JS로 그릴 수있음

속성	의미
width	캔버스의 가로 너비
height	캔버스의 세로 너비

 

canvas { display: inline; }

 

---

스크립트

1. script

스크립트 코드를 문서에 포함하거나 참조

속성	의미	값	특징
async	스크립트의 비동기적(Asynchronously) 실행 여부	불린(Boolean)	src 속성 필수
defer	문서 파싱(구문 분석) 후 작동 여부	불린(Boolean)	src 속성 필수
src	참조할 외부 스크립트 URL	URL	포함된 스크립트 코드는 무시됨
type	MIME 타입	text/javascript(기본값)

script { display: none; }

 

 

2. noscript

스크립트를 지원하지 않는 경우에 삽입할 HTML을 정의.

noscript { display: inline; }

 

---

Thanks to heropy.blog/2019/05/26/html-elements/