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) 대응
이미지 관련 태그
<img>
: 이미지 삽입
<img>
: 이미지 삽입width, height 중 한개만 입력하면 이미지 비율이 유지되면서 크기만 줄어든다.
가변 이미지(반응형 웹에서 주로 사용)
CSS 이용하기
max-width
를 100%로 지정하면 된다.
<img>
태그와 srcset
속성
<img>
태그와 srcset
속성srcset
속성은 ','로 구분된 사용할 이미지들의 경로와 해당 이미지의 원본 크기를 지정하고,sizes
속성은 미디어 조건(선택적)과 그에 따라 출력될 이미지 크기를 지정한다.src
는srcset
에서 활용되지 못한 이미지가 있으면 활용된다!일반적으로
w
단위를 사용하는 것을 권장한다.일반 출력(
width
)은 일반적으로 크기만 변경하고, 최적화 출력은 srcset에서 최적화 출력에 맞는 이미지를 사용한다.width
와srcset
두 개다 선언된 경우,width
가 우선순위를 갖는다.
<picture>
, <source>
: 상황별 다른 이미지 표시하기
<picture>
, <source>
: 상황별 다른 이미지 표시하기<picture>
태그와 <source>
태그를 함께 사용해 화면 해상도뿐만 아니라 화면 너비에 따라 다른 이미지를 표시할 수 있다.
<figure>
, <figcaption>
<figure>
, <figcaption>
<figure>
: 설명 글을 붙일 대상 지정설명 글을 붙여야 할 대상을 지정하거나 웹 문서에서 오디오,비디오(멀티미디어)파일을 비롯해 사진,표,소스코드 등 한 단위가 되는 요소를 묶을 때 사용
<figcaption>
: 설명 글 붙이기
웹과 멀티미디어
웹 사이트에서 플러그인을 이용해 멀티미디어를 재생하는 것은 문제점이 많다. 미디어 파일 형식에 따라 사용하는 플러그인 프로그램이 달라진다는 점이 가장 큰 문제다. ActiveX는 개발자가 원하는 대로 수정이 가능해 원래 의도한 목적 외에도 여러파일을 자동 설치할 수 있다. 심지어 바이러스가 포함 될 수도 있다.
HTML5웹 표준이 지정되면서 플러그인 프로그램들이 사라지고 있다. 이제는 대부분 HTML5 플레이어를 사용한다.
플러그인(plug-in) : 웹 브라우저에서 처리할 수 없는 작업을 위해 웹 문서 안에 포함시킨 외부 프로그램 기능
<object>
: 외부 파일 삽입하기자바 애플릿, PDF 파일, 플래시 무비 같은 콘텐츠를 웹 문서안에 포함시키기 위해 사용.
<embed>
: 외부 파일 삽입하기
인코딩 : 원본 비디오를 최대한 압축해 컴퓨터에서 사용할 수 있는 비디오 파일로 변환
디코딩 : 비디오 파일에 저장되어 있는 비디오 정보를 가져와 비디오 플레이어에 보여주는 과정
비디오 코덱 : 인코딩과 디코딩을 수행하는 것
오디오 코덱
HTML5 비디오 변환 하기
오디오 & 비디오 재생하기
<audio>
: 오디오 파일 삽입
<audio>
: 오디오 파일 삽입자세한 부분은 js로 제어할 수 있다.
<video>
: 비디오 파일 삽입
<video>
: 비디오 파일 삽입<source>
: 여러 미디어 파일 한꺼번에 지정
이전 브라우저를 고려해 여러형식의 파일을 올려도 재생되지 않는 경우가 있다. 이건 웹 서버에서 확장자를 인식하지 못했기 때문이다. MIME유형 추가해야한다. MIME란 서버에서 클라이언트 쪽에 파일을 보낼때 표시법을 알려주기 위해 함께 보내는 파일 형식 정보.
<track>
: 비디오 화면에 자막 추가하기
kind속성 값
주로 자막 파일로는 HTML5에서는 srt파일을 사용하지만 모든 브라우저에서 공식적으로 지원하는 자막 파일형식은 WebVTT(.vtt
)이다.
HTML5 Video Caption Maker사이트로 쉽게 비디오에 자막 추가할 수 있다.
멀티미디어 링크 만들기
<iframe>
<iframe>
: 다른 HTML 페이지를 현재 페이지에 삽입할 수 있다.
프레임의 일종으로 프레임 중에서 문서 본문에 액자처럼 삽입하는 것이다. 이때 현재 문서는 부모 문서가 되고
iframe
에 삽입된 문서는 자식 문서가 된다.inline element이다.
<canvas>
<canvas>
: 그래픽이나 애니메이션 랜더링시 사용한다.
<map>
, <area>
, usemap
<map>
, <area>
, usemap
: 이미지 맵 지정하기
이미지 맵? 한 이미지상에서 클릭 위치에 따라 서로 다른 링크가 열린다.(메일에서 사용)
참고
Last updated