[HTML] 이미지/멀티미디어

이미지(Image)

- 이미지(image)란 2차원 평면 위에 그려진 시각적 요소를 의미

- 이미지 종류: JPEG 이미지, GIF 이미지, PNG 이미지

- <img>: 이미지 삽입

<img src="이미지주소" alt="대체문자열">

<img> 속성	설명
src	이미지 파일 경로
alt	이미지 파일이 없을 경우 표시되는 문장
width	이미지의 너비 (CSS에서 지정하는 것이 일반적)
height	이미지의 높이 (CSS에서 지정하는 것이 일반적)

이미지 맵 만들기

- HTML에서는 <map> 태그를 이용하여 이미지 맵을 제작

- 이미지 맵은 이미지의 일부를 클릭할 수 있도록 만들어서 버튼처럼 사용하는 기능을 의미

- <img>태그의 usemap 속성과 <map>태그의 name 속성을 연결하면 이미지와 맵사이의 관계가 설정됨

- <map>태그는 하나 이상의 <area>태그를 가지며 <area>태그가 바로 버튼과 같은 역할을 함

<img src="/image1.png" alt="image1" width="320" height="320">

<!-- 이미지 맵 만들기 -->
<img src="/imagemap.jpg" alt="선택지가 있는 표지판" usemap="#vending" style="width:320px; height:240px" />
<map name="vending">
    <area shape="rect" coords="90,60,180,130" alt="왼쪽" href="https://ko.wikipedia.org/wiki/2">
    <area shape="rect" coords="210,200,70,130" alt="오른쪽" href="https://ko.wikipedia.org/wiki/2">
</map>

멀티미디어 파일 형식

- HTML5 이전까지는 웹 브라우저마다 어떤 종류의 멀티미디어 파일을 지원할지 각자 다른 방식으로 처리

- HTML5에서는 플래시와 같은 외부 플러그인의 도움 없이 멀티미디어 파일을 간단히 사용 가능

- 웹 브라우저는 파일의 타입을 파일의 확장자로 판단

- 비디오나 사운드와 같은 멀티미디어 요소들은 멀티미디어 파일에 저장

비디오 파일 형식

- HTML5 표준이 공식적으로 지원하는 비디오 파일 형식은 MP4, WebM, OGV

파일 형식	파일 확장자	설명
MPEG	.mpg .mpeg	Moving Picture Experts Group에 의해 개발. 변환 코덱을 이용하는 손실 압축 방식을 사용
MP4	.mp4	Moving Picture Experts Group에 의해 개발. 적은 용량으로도 고품질의 영상 및 음성을 구현할 수 있어서 인터넷을 통한 스트리밍에 자주 활용
OGV	.ogg	Xiph 재단에 의해 개발. MP3의 대안으로 개발된 특허권으로 보호되지 않는 개방형 공개 멀티미디어 파일 형식
WebM	.webm	구글의 지원으로 개발된 개방형 공개 멀티미디어 파일 형식. 비디오 코덱으로는 VP8, 오디오 코덱으로는 Vorbis를 사용하는 멀티미디어 파일 형식
AVI	.avi	Microsoft에 의해 개발. PC에서 동영상을 구현하기 위한 파일 형식
WMV	.wmv	Microsoft에 의해 개발. Microsoft windows media player의 주 스트리밍 파일 형식
QuickTime	.mov	Apple에 의해 개발. 매킨토시 컴퓨터에 동영상을 지원하기 위하여 개발된 파일 형식
RealVideo	.rm .ram	Real Networks에 의해 개발. 스트리밍 기술을 이용한 동영상용 플러그 인 파일 형식
Flash	.swf .flv	Macromedia에 의해 개발. 벡터 도형 처리 기반의 애니메이션 제작용 소프트웨어 파일 형식

오디오 파일 형식

- HTML5 표준이 공식적으로 지원하는 오디오 파일 형식은 MP3, WAV, Ogg

파일 형식	파일 확장자	설명
WAV	.wav	IBM과 Microsoft에 의해 개발. 개인용 PC에서 오디오를 재생하기 위한 IBM과 Microsoft의 표준 오디오파일 형식
Ogg	.ogg	Xiph 재단에 의해 개발. MP3의 대안으로 개발된 특허권으로 보호되지 않는 개방형 공개 멀티미디어 파일 형식
MP3	.mp3	Moving Picture Experts Group에 의해 개발. MPEG-1의 오디오 규격으로 개발된 손실 압축 파일 형식
MP4	.mp4	Moving Picture Experts Group에 의해 개발. MPEG-4의 일부로 규정된 멀티미디어 컨테이너 파일 형식. MP4는 비디오 파일 형식이기도 하지만 오디오에서도 사용 가능
MIDI	.mid .midi	모든 전자 음악기기의 연주 정보를 상호 전달하기 위해 정해진 데이터 전송 규격
RealAudio	.rm .ram	Real Networks에 의해 개발. 인터넷에서 실시간으로 음악을 들을 수 있는 스트리밍 사운드 기술
WMA	.wma	Microsoft에 의해 개발. Microsoft windows media 기술에서 음악 정보(data)만을 압축하는 기술
AAC	.aac	Apple에 의해 개발. iPhone, iPod, iTunes의 기본 오디오 파일 형식임. 표준적인 손실 압축 방식을 사용

비디오

- HTML5 이전에는 비디오를 보여주기 위한 표준안이 없었기에 flash와 같은 외부 플러그인에 의존

- HTML5에서는 <video>를 이용하여 웹 페이지에 비디오 삽입 표준을 제공

- 웹 브라우저는 여러 개의 <source> 중 위쪽에서부터 순서대로 가장 먼저 인식되는 파일의 타입과 주소 사용

- <video> 태그 사이에 존재하는 텍스트는 웹 브라우저가 <video> 태그를 지원하지 않을 때만 화면에 표시

- <video>: 비디오와 영화 등 비디오 파일을 명시

<video> 속성	설명
src	동영상 파일 경로
poster	동영상 준비 중에 표시될 이미지 파일 경로
preload	재생 전에 동영상 파일을 모두 불러올 것인지 지정
autoplay	동영상 파일을 자동의 재생 개시할 것인지 지정
loop	동영상을 반복할 것인지 지정
controls	동영상 재생 도구를 표시할 것인지 지정
width	동영상의 너비를 지정
height	동영상의 높이를 지정

- <source>: video 요소의 원본 파일에 대한 파일 형식 및 파일 주소를 여러 개 명시. 웹 브라우저는 위쪽에서부터 순서대로 가장 먼저 인식되는 파일 형식과 파일 주소를 사용

    - src: 비디오 파일 경로

    - type: 비디오 파일 형식

- <track>: 비디오가 재싱될 때 보일 자막이나 캡션 파일을 명시

    - kind: 자막 문자열의 타입을 명시

    - srclang: 해당 문자열의 언어 설정 명시

    - label: 사용자가 보게 될 라벨을 명시

<video style="width:720; height:360" controls autoplay loop>
    <source src="/video1.mp4" type="video/mp4">
    <source src="/video2.ogg" type="video/ogg">
    <track kind="subtitles" src="subtitle_en.vtt" srclang="en" label="English">
    <track kind="subtitles" src="subtitle_jp.vtt" srclang="fr" label="Japanese">
    사용자의 웹 브라우저가 video 요소를 지원하지 않습니다.
</video>

 

오디오

- HTML5 이전에는 웹 페이지에서 오디오를 들려주기 위한 표준안이 없었기에 flash와 같은 외부 플러그인에 의존

- HTML5에서는 <audio>를 이용하여 웹 페이지에 오디오를 삽입하는 표준화된 방식을 제공

- 웹 브라우저는 여러 개의 <source> 중 위쪽에서부터 순서대로 가장 먼저 인식되는 파일의 타입과 주소 사용

- <audio> 태그 사이에 존재하는 텍스트는 웹 브라우저가 <audio> 태그를 지원하지 않을 때만 화면에 표시

- <audio>: 오디오와 음악 등 오디오 파일을 명시

<audio> 속성	설명
src	음악 파일 경로
preload	재생 전에 음악 파일을 모두 불러올 것인지 지정
autoplay	음악 파일을 자동의 재생 개시할 것인지 지정
loop	음악을 반복할 것인지 지정
controls	음악 재생 도구를 표시할 것인지 지정

- <source>: audio 요소의 원본 파일에 대한 파일 형식 및 파일 주소를 여러 개 명시. 웹 브라우저는 위쪽에서부터 순서대로 가장 먼저 인식되는 파일 형식과 파일 주소를 사용

    - src: 비디오 파일 경로

    - type: 비디오 파일 형식

<audio controls loop>
    <source src="/audio1.ogg" type="audio/ogg">
    <source src="/audio2.mp3" type="audio/mp3">
    이 문장은 사용자의 웹 브라우저가 audio 요소를 지원하지 않을 때 나타납니다!
</audio>

 

플러그인

- 플러그인은 웹 브라우저의 표준 기능을 확장해주는 프로그램

- 주요 플러그인: Java Appplet, Flash Player, Pdf Reader

- object 요소나 embed 요소를 사용하여 HTML 문서에 플러그인 추가

object 요소

- HTML 문서에 삽입할 객체를 명시

- 객체뿐만이 아닌 HTML 문서 삽입 가능

- 이미지 삽입 가능

<object data="/sample.pdf" style="width:100%; height:700px"></object>

embed 요소

- HTML 문서에 삽입할 객체를 명시

- HTML5부터 표준. HTML4 이전 사용 불가

- 객체뿐만이 아닌 HTML 문서 삽입 가능

- 이미지 삽입 가능

<embed src="/sample1.pdf" style="width:100%; height:700px">

iframe 요소

- iframe은 inline frame으로 웹 페이지 안에서 어떠한 제한 없이 또 다른 웹 페이지를 삽입

    - style: border(none)으로 테두리 제거

<iframe src="삽입할페이지주소" style="width:100%; height:300px"></iframe>

- iframe 요소의 페이지 변경: <a>를 이용하여 iframe 요소의 최초 페이지를 중간에 변경. <a>의 target 속성과 <iframe>의 name 속성을 연결하면 <a>로 iframe 요소의 페이지 변경 가능

<iframe src="/web1" name="frame_target" style="width:100%; height:700px;"></iframe>
<p>
    <a href="/web2" target="frame_target">페이지 이동하기</a>
</p>

frameset 요소

- HTML5 표준에서 frameset, frame, noframes 요소는 지원하지 않음 ->iframe 또는 CSS를 사용

 

- frameset을 이용하면 하나의 브라우저 창에 둘 이상의 페이지를 표시

- iframe과 달리 하나 이상의 페이지를 동시에 가질 수 있음

- noresize 속성이 명시되지 않았다면 자유롭게 페이지 크기 조절 가능

- 각각의 페이지는 frame 요소로 표현. frame 요소는 종료 태그를 가지지 않음

- noframes 요소는 브라우저가 frame 요소를 지원하지 않을 때 보여지는 문자열을 저장

- 수직 프레임셋: 하나의 브라우저 창을 세로 방향으로 분리하여 표현

<frameset cols="25%,*,25%">
  <frame name="left" src="/web1" />
  <frame name="center" src="/web2" />
  <frame name="right" src="/web3 "/>
  <noframes>
      <body>frame 태그 미지원!</body>
  </noframes>
</frameset>

- 수평 프레임셋: 하나의 브라우저 창을 가로 방향으로 분리하여 표현

<frameset rows="20%,60%,20%">
  <frame name="top" src="/web1" noresize="noresize" />
  <frame name="center" src="/web2" noresize="noresize" />
  <frame name="bottom" src="/web3" noresize="noresize" />
  <noframes>
    <body>frame태그 미지원</body>
  </noframes>
</frameset>