HTML5 멀티미디어

이미지와 하이퍼링크

이미지는 크게 비트맵과 벡터로 구분된다.

비트맵

각 픽셀이 모여 만들어진 정보의 집합으로 Raster 이미지라고도 불리며, 픽셀 단위로 화면에 렌더링한다.

JPG(JPEG)

JPG는 압축률이 훌륭해 사진이나 예술 분야에서 많이 사용됨

손실 압축
표현 색상도(24bit, 약 1600만 색상) 뛰어나 고해상도 표시장치에 적합
이미지의 품질과 용량을 쉽게 조절 가능
가장 널리 이용

PNG

Portable Network Graphics는 GIF의 대체 포맷으로 개발됐다.

비손실 압축
8bit/24bit 컬러 이미지 처리
투명도(Alpha Channel) 지원
W3C 권장 포맷

GIF

Graphics Interchange Format는 이미지 파일 내 이미지 및 문자열 같은 정보를 저장할 수 있다.

비손실 압축
여러장의 이미지를 한 개의 파일에 담을 수 있음
8bit 컬러만 지원

WEBP

JPG, PNG, GIF를 모두 대체할 수 있는 구글이 개발한 이미지 포맷

완벽한 손실/비손실 압축 지원
GIF와 같은 애니메이션 지원
투명도(Alpha Channel) 지원
지원 브라우저가 적음

벡터(Vector)

이미지가 가지고 있는 점, 선, 좌표, 색상 등의 정보를 온전히 가지고 있으며, 그것을 화면에 렌더링한다. 조금 더 많은 연산을 하지만 해상도(픽셀)로부터 자유롭게 렌더링할 수 있다. 즉, 확대 및 축소를 해도 이미지가 깨지지 않고, 수학적 정보만 가지고 있기때문에 이미지 확대/축소에도 용량 변화가 없다.

SVG

Scalable Vector Graphics는 마크업 언어 기반의 벡터 그래픽을 표현하는 포맷

해상도의 영향에서 자유로움
CSS로 스타일링 가능
Javascript로 event handling 가능
코드 혹은 파일로 사용 가능
d3.js, Raphael.js에서 표현하는 방식이 SVG이미지이다.
SVG이미지를 지원하지 않는 브라우저(Modernizr) 대응

<!doctype html>
<html lang="ko">
<head>
	<meta charset="utf-8">
	<title>Insert SVG</title>
	<script src="modernizr-custom.js"></script>
</head>
<body>
	<h1>SVG 이미지 삽입하기</h1>
	<img src="images/muffin.svg">
	<script>
		if (!modernizr.svg) {
			$("img").attr("src", "images/muffin.png");
		}
	</script>
</body>
</html>

이미지 관련 태그

`<img>` : 이미지 삽입

<img src="경로" [속성="값"]>
<img src="이미지 상대/절대 경로" alt="이미지를 설명해 주는 대체 텍스트" width="이미지가로">

width, height 중 한개만 입력하면 이미지 비율이 유지되면서 크기만 줄어든다.

/* CSS로 이미지 크기도 조절할 수 있다. */
img {
  width: 666px;
}

가변 이미지(반응형 웹에서 주로 사용)

CSS 이용하기

img{
		max-width: 100%;
    height: auto;
}

max-width를 100%로 지정하면 된다.

`<img>`태그와 `srcset`속성

<img src="<이미지>" srcset="<이미지1>[, <이미지2>,<이미지3>, ...]">

<img src="imgaes/pencil.jpg" srcset="images/pencil-hd.jpg 2x" alt="색연필 제품 이미지">

속성

설명

<img srcset="images/pencil-small.jpg 400w,
             images/pencil-medium.jpg 700w,
             images/pencil-large.jpg 1000w"
     sizes="(max-width: 500px) 444px,
            (max-width: 800px) 777px,
            1222px"
     src="images/pencil.jpg"
     alt="색연필 제품 이미지" />
<img srcset="images/pencil-small.jpg 1x,
             images/pencil-medium.jpg 1.75x,
             images/pencil-large.jpg 2.5x"
     sizes="(min-width: 1000px) 700px"
     src="images/pencil.jpg"
     alt="색연필 제품 이미지" />

srcset 속성은 ','로 구분된 사용할 이미지들의 경로와 해당 이미지의 원본 크기를 지정하고, sizes 속성은 미디어 조건(선택적)과 그에 따라 출력될 이미지 크기를 지정한다.
src 는 srcset 에서 활용되지 못한 이미지가 있으면 활용된다!
일반적으로 w 단위를 사용하는 것을 권장한다.
일반 출력(width)은 일반적으로 크기만 변경하고, 최적화 출력은 srcset에서 최적화 출력에 맞는 이미지를 사용한다.
width 와 srcset 두 개다 선언된 경우, width 가 우선순위를 갖는다.

`<picture>`, `<source>` : 상황별 다른 이미지 표시하기

<picture> 태그와 <source>태그를 함께 사용해 화면 해상도뿐만 아니라 화면 너비에 따라 다른 이미지를 표시할 수 있다.

<picture>
	<source srcset="images/shop-large.jpg" media="(min-width:1024px)">
	<source srcset="images/shop-medium.jpg" media="(min-width:768px)">
	<source srcset="images/shop-small.jpg" media="(min-width:320px)">
	<img src="images/shop.jpg" alt="fill with coffee" style="width:100%;">
</picture>

`<figure>`, `<figcaption>`

<figure> : 설명 글을 붙일 대상 지정
- 설명 글을 붙여야 할 대상을 지정하거나 웹 문서에서 오디오,비디오(멀티미디어)파일을 비롯해 사진,표,소스코드 등 한 단위가 되는 요소를 묶을 때 사용
<figcaption> : 설명 글 붙이기

<figure>
		<img src="http://cfile1.uf.tistory.com/image/145038365098EFDB16035E" alt="용눈이오름">
		<figcaption>완만하고 부드러운 용눈이오름</figcaption>
</figure>

웹과 멀티미디어

웹 사이트에서 플러그인을 이용해 멀티미디어를 재생하는 것은 문제점이 많다. 미디어 파일 형식에 따라 사용하는 플러그인 프로그램이 달라진다는 점이 가장 큰 문제다. ActiveX는 개발자가 원하는 대로 수정이 가능해 원래 의도한 목적 외에도 여러파일을 자동 설치할 수 있다. 심지어 바이러스가 포함 될 수도 있다.

HTML5웹 표준이 지정되면서 플러그인 프로그램들이 사라지고 있다. 이제는 대부분 HTML5 플레이어를 사용한다.

플러그인(plug-in) : 웹 브라우저에서 처리할 수 없는 작업을 위해 웹 문서 안에 포함시킨 외부 프로그램 기능

<object> : 외부 파일 삽입하기
- 자바 애플릿, PDF 파일, 플래시 무비 같은 콘텐츠를 웹 문서안에 포함시키기 위해 사용.

속성

설명

<object data="경로" type="유형" name="이름" width="넓이" height="높이"></object>

<object data="CalmBay.swf" type="application/x-shockwave-flash" width="450" height="400"></object>

<embed> : 외부 파일 삽입하기

<embed src="경로" type="유형" width="너비" height="높이">
<embed src="CalmBay.swf" width="450" height="400">

인코딩 : 원본 비디오를 최대한 압축해 컴퓨터에서 사용할 수 있는 비디오 파일로 변환
디코딩 : 비디오 파일에 저장되어 있는 비디오 정보를 가져와 비디오 플레이어에 보여주는 과정
비디오 코덱 : 인코딩과 디코딩을 수행하는 것

비디오코덱

설명

오디오 코덱

오디오 코덱

설명

HTML5 비디오 변환 하기
- [카카오인코더(mp4, webm)변환]
- [팟 인코더(ogv) 변환]

오디오 & 비디오 재생하기

`<audio>` : 오디오 파일 삽입

<audio src="오디오 파일 경로"[속성][속성="속성 값"]></audio>

속성

설명

<audio src="https://interactive-examples.mdn.mozilla.net/media/cc0-audio/t-rex-roar.mp3" controls autoplay></audio>

자세한 부분은 js로 제어할 수 있다.

`<video>` : 비디오 파일 삽입

<video src="오디오 파일 경로"[속성][속성="속성 값"]></video>

속성

설명

<source> : 여러 미디어 파일 한꺼번에 지정

<source src="video.ogv" type="video/ogg; codecs='theora,vorbis'"]>

<video controls>
	<source src="media/Painting.ogv" type="video/ogg">
	<source src="media/Painting.mp4" type="video/mp4">
	<source src="media/Painting.webm" type="video/webm">
</video>

속성

설명

이전 브라우저를 고려해 여러형식의 파일을 올려도 재생되지 않는 경우가 있다. 이건 웹 서버에서 확장자를 인식하지 못했기 때문이다. MIME유형 추가해야한다. MIME란 서버에서 클라이언트 쪽에 파일을 보낼때 표시법을 알려주기 위해 함께 보내는 파일 형식 정보.

<track> : 비디오 화면에 자막 추가하기

<track kind="자막종류" src="경로" srclang="언어" label="제목" default=""></track>

kind속성 값

속성 값

설명

주로 자막 파일로는 HTML5에서는 srt파일을 사용하지만 모든 브라우저에서 공식적으로 지원하는 자막 파일형식은 WebVTT(.vtt)이다.

WEBVTT

시작시간 --> 종료시간
자막내용

00:00.000 --> 00:02.172
예술이란

00:02.172 --> 00:05.719
자연이 인간에 투영된 것입니다

00:05.719 --> 00:07.716
중요한 것은

00:07.716 --> 00:11.061
깨끗하게 투영될 수 있도록

00:11.061 --> 00:20.879
늘 깨끗하게 거울을 닦는 일입니다

HTML5 Video Caption Maker사이트로 쉽게 비디오에 자막 추가할 수 있다.

멀티미디어 링크 만들기

`<iframe>`

: 다른 HTML 페이지를 현재 페이지에 삽입할 수 있다.

프레임의 일종으로 프레임 중에서 문서 본문에 액자처럼 삽입하는 것이다. 이때 현재 문서는 부모 문서가 되고 iframe에 삽입된 문서는 자식 문서가 된다.
inline element이다.

<!--parent.html-->
<iframe src="child.html" width="600" height="400"></iframe>

<!--target을 _top으로 지정할경우 프레임을 벗어나 브라우저 창 전체에 링크 내용 표시-->
<a href="http://easyspub.co.kr/20_Menu/BookView/65" target="_top">

`<canvas>`

: 그래픽이나 애니메이션 랜더링시 사용한다.

`<map>`, `<area>`, `usemap`

: 이미지 맵 지정하기

이미지 맵? 한 이미지상에서 클릭 위치에 따라 서로 다른 링크가 열린다.(메일에서 사용)

<img src="images/kids.jpg"  alt="" usemap="#favorites">
<map name="favorites">
  <area shape="rect" coords="10,10,160,200" href="http://cafe.naver.com/doithtml5" target="_blank" alt="do it html5 네이버 카페로 가기">
  <area shape="rect" coords="220,10,380,200" href="http://www.facebook.com/do.it.html5" target="_blank" alt="do it html5 페이스북 페이지로 가기">
</map>

속성

설명

참고

Last updated 2 years ago

이미지와 하이퍼링크

비트맵

JPG(JPEG)

PNG

GIF

WEBP

벡터(Vector)

SVG

이미지 관련 태그

<img> : 이미지 삽입

가변 이미지(반응형 웹에서 주로 사용)

CSS 이용하기

<img>태그와 srcset속성

<picture>, <source> : 상황별 다른 이미지 표시하기

<figure>, <figcaption>