멀티미디어 파일 형식
HTML5 이전까지는 웹 브라우저마다 어떤 종류의 멀티미디어 파일을 지원할지 각자 다른 방식으로 처리해 왔습니다. 하지만 HTML5에서는 플래시와 같은 외부 플러그인의 도움 없이도 멀티미디어 파일을 간단히 사용할 수 있게 되었습니다. 웹 브라우저는 파일의 타입(type)을 파일의 확장자로 판단합니다. 만약에 확장자가 .html인 파일을 보면, 웹 브라우저는 이 파일을 HTML 파일로써 다루게 될 것입니다. 비디오(video)나 사운드(sound)와 같은 멀티미디어 요소들은 멀티미디어 파일에 저장됩니다.
HTML5 표준이 공식적으로 지원하는 비디오 파일 형식은 MP4, WebM, OGV 뿐입니다.
오디오(audio) 파일 형식
HTML5 표준이 공식적으로 지원하는 오디오 파일 형식은 MP3, WAV, Ogg 뿐입니다.
비디오(video) 요소
HTML5 이전에는 웹 페이지에서 비디오(video)를 보여주기 위한 표준안이 없었습니다. 따라서 비디오를 삽입하기 위해서는 플래시(flash)와 같은 외부 플러그인(plug-in)에 의존해야만 했습니다. 하지만 HTML5에서는 <video>태그를 이용하여 웹 페이지에 비디오를 삽입하는 표준화된 방식을 제공합니다.
비디오 요소의 속성
<video style="width:576; height:360" controls>
<source src="/examples/media/sample_video_mp4.mp4" type="video/mp4">
<source src="/examples/media/sample_video_ogg.ogg" type="video/ogg">
이 문장은 사용자의 웹 브라우저가 video 요소를 지원하지 않을 때 나타납니다!
</video>
control 속성은 재생, 정지 및 소리의 조절 등 비디오의 기본적인 동작을 조절할 수 있는 패널을 생성합니다. 또한, height와 width 속성을 이용하여 웹 브라우저에 삽입되는 비디오의 크기를 명시할 수 있습니다. 웹 브라우저는 여러 개의 <source>태그 중 위쪽에서부터 순서대로 가장 먼저 인식되는 파일의 타입과 주소를 사용합니다. <video>태그 사이에 존재하는 텍스트는 해당 웹 브라우저가 <video>태그를 지원하지 않을 때만 화면에 표시됩니다.
autoplay 속성은 웹 페이지가 로드(load) 될 때 비디오를 자동으로 재생시켜 줄지 않을지를 설정합니다.
<video style="width:576; height:360" controls autoplay>
<source src="/examples/media/sample_video_mp4.mp4" type="video/mp4">
<source src="/examples/media/sample_video_ogg.ogg" type="video/ogg">
이 문장은 사용자의 웹 브라우저가 video 요소를 지원하지 않을 때 나타납니다!
</video>
loop 속성을 설정하면, 비디오의 재생이 끝나도 계속적으로 반복해서 비디오를 재생합니다.
<video style="width:576; height:360" controls loop>
<source src="/examples/media/sample_video_mp4.mp4" type="video/mp4">
<source src="/examples/media/sample_video_ogg.ogg" type="video/ogg">
이 문장은 사용자의 웹 브라우저가 video 요소를 지원하지 않을 때 나타납니다!
</video>
<track>태그는 비디오가 재생될 때 보일 자막이나 캡션 파일을 명시할 때 사용합니다.
<video style="width:576; height:360" controls>
<source src="/examples/media/sample_video_mp4.mp4" type="video/mp4">
<source src="/examples/media/sample_video_ogg.ogg" type="video/ogg">
<track kind="subtitles" src="sample_subtitle_en.vtt" srclang="en" label="English">
<track kind="subtitles" src="sample_subtitle_fr.vtt" srclang="fr" label="Francais">
이 문장은 사용자의 웹 브라우저가 video 요소를 지원하지 않을 때 나타납니다!
</video>
kind 속성은 자막 문자열의 타입을 명시하며, srclang 속성은 해당 문자열의 언어 설정을 명시합니다.label 속성은 사용자가 보게 될 라벨을 명시합니다.
HTML5 비디오 파일 형식
HTML5 표준이 공식적으로 지원하는 비디오 파일 형식은 MP4, WebM, OGV 뿐입니다.
- MP4 : Moving Picture Experts Group에 의해 개발되었으며, 비디오 코덱으로는 H.268, 오디오 코덱으로는 ACC를 사용합니다. 적은 용량으로도 고품질의 영상 및 음성을 구현할 수 있어 인터넷을 통한 스트리밍에 많이 활용되는 파일 형식입니다.
- WebM : 구글의 지원으로 개발된 개방형 공개 멀티미디어 파일 형식이며, 비디오 코덱으로는 VP8, 오디오 코덱으로는 Vorbis를 사용합니다.
- OGV : Theora Ogg라고도 불리며, Xiph 재단에 의해 MP3의 대안으로 개발된 특허권으로 보호되지 않는 개방형 공개 멀티미디어 파일 형식입니다. 비디오 코덱으로는 Theora, 오디오 코덱으로는 Vorbis를 사용합니다.
오디오(audio) 요소
HTML5 이전에는 웹 페이지에서 오디오(audio)를 들려주기 위한 표준안이 없었습니다. 따라서 비디오를 삽입하기 위해서는 플래시(flash)와 같은 외부 플러그인(plug-in)에 의존해야만 했습니다. 하지만 HTML5에서는 <audio>태그를 이용하여 웹 페이지에 오디오를 삽입하는 표준화된 방식을 제공합니다.
오디오 요소의 속성
<audio controls>
<source src="/examples/media/sample_audio_ogg.ogg" type="audio/ogg">
<source src="/examples/media/sample_audio_mp3.mp3" type="audio/mp3">
이 문장은 사용자의 웹 브라우저가 audio 요소를 지원하지 않을 때 나타납니다!
</audio>
control 속성은 재생, 정지 및 소리의 조절 등 오디오의 기본적인 동작을 조절할 수 있는 패널을 생성합니다. 웹 브라우저는 여러 개의 <source>태그 중 위쪽에서부터 순서대로 가장 먼저 인식되는 파일의 타입과 주소를 사용합니다 <audio>태그 사이에 존재하는 텍스트는 해당 웹 브라우저가 <audio>태그를 지원하지 않을 때만 화면에 표시됩니다.
autoplay 속성은 웹 페이지가 로드(load) 될 때 음악을 자동으로 재생시켜 줄지 않을지를 설정합니다.
<audio controls autoplay>
<source src="/examples/media/sample_audio_ogg.ogg" type="audio/ogg">
<source src="/examples/media/sample_audio_mp3.mp3" type="audio/mp3">
이 문장은 사용자의 웹 브라우저가 audio 요소를 지원하지 않을 때 나타납니다!
</audio>
loop 속성을 설정하면 오디오의 재생이 끝나도 계속적으로 반복해서 오디오를 재생합니다.
<audio controls loop>
<source src="/examples/media/sample_audio_ogg.ogg" type="audio/ogg">
<source src="/examples/media/sample_audio_mp3.mp3" type="audio/mp3">
이 문장은 사용자의 웹 브라우저가 audio 요소를 지원하지 않을 때 나타납니다!
</audio>
HTML5 오디오 파일 형식
HTML5 표준이 공식적으로 지원하는 오디오 파일 형식은 MP3, WAV, Ogg 뿐입니다.
- MP3 : Moving Picture Experts Group에 의해 개발되었으며, MPEG-1의 오디오 규격으로 개발된 손실 압축형 파일 형식입니다.
- WAV : IBM과 Microsoft에 의해 개발되었으며, 개인용 PC에서 오디오를 재생하기 위한 IBM과 Microsoft의 표준 오디오 파일 형식입니다.
- Ogg : Xiph 재단에 의해 개발되었으며, MP3의 대안으로 개발된 특허권으로 보호되지 않는 개방형 공개 멀티미디어 파일 형식입니다.
플러그인(Plug-in)
HTML 플러그인이란 웹 브라우저의 표준 기능을 확장해 주는 프로그램을 의미합니다. 가장 널리 알려진 플러그인으로는 Java Applet, Flash Player, Pdf Reader 등이 있습니다. 이러한 플러그인은 object 요소나 embed 요소를 사용하여 HTML 문서에 추가할 수 있습니다.
object 요소
object 요소는 HTML 문서에 삽입할 객체(object)를 명시하는데 사용합니다.이 요소는 모든 웹 브라우저에서 동작하며, 객체뿐만 아니라 또 다른 HTML 문서를 삽입할 수도 있습니다.
<object data="/examples/media/sample_plugins_pdf.pdf" style="width:100%; height:700px"></object>
또한, object 요소는 이미지를 삽입할 때에도 사용할 수 있습니다.
<object data="/examples/images/img_flower.png"></object>
embed 요소
embed 요소는 HTML 문서에 삽입할 객체(object)를 명시하는데 사용합니다. embed 요소는 오래전부터 사용되어 왔지만, HTML5 이전까지는 HTML 표준이 아니었습니다.이 요소는 모든 웹 브라우저에서 동작하며, 객체뿐만 아니라 HTML 문서를 삽입할 수도 있습니다.
<embed src="/examples/media/sample_plugins_pdf.pdf" style="width:100%; height:700px">
또한, embed 요소는 이미지를 삽입할 때에도 사용할 수 있습니다.
<embed src="/examples/images/img_flower.jpg" style="width:350px; height:263px">
embed 요소는 HTML5 이전까지는 HTML 표준이 아니었으므로, HTML5에서는 유효하지만, HTML4에서는 유효하지 않습니다.
canvas 요소
canvas 요소는 웹 페이지에 그래픽을 그려주는 쉽고 강력한 방법을 제공합니다.이 요소는 그래픽을 위한 컨테이너(container) 역할만을 수행합니다.따라서 실제로 그래픽을 그리기 위해서는 자바스크립트(JavaScript) 등의 스크립트 언어를 이용해야 합니다.
canvas 요소의 속성
canvas 요소는 테두리(border)도 콘텐츠(content)도 없는 웹 페이지 내의 단순한 사각형의 공간입니다. 그러므로 반드시 style 속성을 이용하여 캔버스의 크기를 설정해 주어야 합니다. canvas 요소를 스크립트(script)에서 접근하기 위해서는 해당 요소의 id 속성을 이용하면 됩니다.
<canvas id="drawCanvas" style="width:300px; height:200px; border: 1px solid #993300;">
이 문장은 사용자의 웹 브라우저가 canvas 요소를 지원하지 않을 때 나타납니다!
</canvas>
CSS 좌표 체계
HTML 그래픽 요소에서 사용하는 x, y, z좌표는 다음 그림과 같은 좌표 체계를 따릅니다.CSS 좌표 체계에서 기준점은 브라우저의 왼쪽 상단이 됩니다. 또한, 각 좌표축의 화살표 방향이 양의 방향이며, 반대쪽이 음의 방향을 가리킵니다.
사각형 그리기
캔버스를 정의한 후에는 스크립트를 이용하여 canvas 요소에 그래픽을 그릴 수 있습니다.다음 예제는 스크립트를 이용하여 canvas 요소에 사각형을 그리는 예제입니다.
context.strokeRect(10, 10, 250, 130);
context.fillStyle = "rgba(255,0,0,1)";
context.fillRect(20, 20, 200, 100);
context.clearRect(30, 30, 150, 50);
위의 예제에서 사각형을 그리는 데 사용된 함수들은 다음 순서대로 인수를 전달받습니다.
1. 사각형의 왼쪽 위 꼭짓점의 x좌표
2. 사각형의 왼쪽 위 꼭짓점의 y좌표
3. 사각형의 너비
4. 사각형의 높이
선 그리기
다음 예제는 스크립트를 이용하여 canvas 요소에 선을 그리는 예제입니다.
context.moveTo(0, 0);
context.lineTo(300, 100);
context.lineTo(150, 150);
context.stroke();
이러한 선 그리기를 이용하면 도형을 만들 수도 있으며, 만든 도형에 색을 채울 수도 있습니다.
context.moveTo(0, 0);
context.lineTo(300, 200);
context.lineTo(150, 0);
context.lineTo(0, 0);
context.fillStyle = "#0099FF";
context.fill();
context.stroke();
위의 예제에서는 우선 moveTo() 함수와 lineTo() 함수를 이용하여 선 그리기로 도형을 만듭니다. 그 후 fillStyle() 함수로 원하는 색상을 지정하고나서, fill() 함수를 사용하여 만든 도형에 색상을 칠하게 됩니다.
원 그리기
다음 예제는 스크립트를 이용하여 canvas 요소에 원을 그리는 예제입니다.
context.beginPath();
context.arc(150, 100, 50, 0, 2 * Math.PI);
context.stroke();
위의 예제에서 사용된 arc() 함수는 다음 순서대로 인수를 전달받습니다.1. 원의 중심 x좌표
2. 원의 중심 y좌표
3. 원의 반지름
4. 원호를 그리기 시작할 각도
5. 원호 그리기를 마칠 각도
이러한 원 그리기를 이용하면 원호 또한 간단히 만들 수 있습니다.
context.beginPath();
context.moveTo(100, 100);
context.arc(100, 100, 120, 0, 45 * Math.PI / 180);
context.closePath();
context.stroke();
Math.PI는 원의 원주를 지름으로 나눈 비율(원주율) 값으로 대략 3.14159를 나타냅니다.
텍스트(text) 그리기
다음 예제는 스크립트를 이용하여 canvas 요소에 텍스트를 그리는 예제입니다.
context.font = "40px Arial";
context.fillText("CANVAS", 50, 90);
context.strokeText("HTML5", 80, 150);
위의 예제에서 텍스트를 그리는 데 사용된 함수들은 다음 순서대로 인수를 전달받습니다.1. canvas 요소에 그릴 텍스트의 내용
2. 텍스트의 왼쪽 위 꼭짓점의 x좌표
3. 텍스트의 왼쪽 위 꼭짓점의 y좌표
그래디언트(gradient) 그리기
다음 예제는 스크립트를 이용하여 canvas 요소에 선형 그래디언트를 그리는 예제입니다.
var gradient = context.createLinearGradient(0, 0, 200, 0);
gradient.addColorStop(0, "#FFCC00");
gradient.addColorStop(1, "#FFCCCC");
context.fillStyle = gradient;
context.font = "45px Arial black";
context.fillText("CANVAS", 15, 120);
위의 예제에서 사용된 createLinearGradient() 함수는 다음 순서대로 인수를 전달받습니다.1. 선형 그래디언트가 시작하는 점의 x좌표
2. 선형 그래디언트가 시작하는 점의 y좌표
3. 선형 그래디언트가 끝나는 점의 x좌표
4. 선형 그래디언트가 끝나는 점의 y좌표
이렇게 createLinearGradient() 함수를 사용하여 선형 그래디언트를 생성합니다. 이때 addColorStop() 함수를 사용하여 그래디언트에 사용될 색상을 명시할 수 있습니다. 또한, 이렇게 생성된 그래디언트는 fillStyle이나 strokeStyle 속성을 이용하여 그릴 수 있습니다.
다음 예제는 스크립트를 이용하여 canvas 요소에 원형 그래디언트를 그리는 예제입니다.
var gradient = context.createRadialGradient(100, 100, 200, 150, 150, 30);
gradient.addColorStop(0, "black");
gradient.addColorStop(1, "white");
context.fillStyle = gradient;
context.fillRect(0, 0, 300, 300);
위의 예제에서 사용된 createRadialGradient() 함수는 다음 순서대로 인수를 전달받습니다.1. 원형 그래디언트가 시작하는 원의 중심 x좌표
2. 원형 그래디언트가 시작하는 원의 중심 y좌표
3. 원형 그래디언트가 시작하는 원의 반지름
4. 원형 그래디언트가 끝나는 원의 중심 x좌표
5. 원형 그래디언트가 끝나는 원의 중심 y좌표
6. 원형 그래디언트가 끝나는 원의 반지름
createLinearGradient() 함수와 createRadialGradient() 함수는 익스플로러 8과 그 이전 버전에서 지원하지 않습니다.
이미지 그리기
다음 예제는 스크립트를 이용하여 canvas 요소에 이미지를 그리는 예제입니다.
<p><button onclick="drawImage()">이미지 그리기</button></p>
...
<script>
function drawImage() {
var srcImg = document.getElementById("Monalisa");
context.drawImage(srcImg, 10, 10);
}
</script>
위의 예제에서 사용된 drawImage() 함수는 다음 순서대로 인수를 전달받습니다.1. canvas 요소에 그릴 이미지의 주소
2. 이미지의 왼쪽 위 꼭짓점의 x좌표
3. 이미지의 왼쪽 위 꼭짓점의 y좌표
svg 요소
svg 요소는 Scalable Vector Graphics를 의미하며, XML 기반의 W3C 그래픽 표준 권고안입니다. 기존에 사용해 왔던 canvas 요소로는 벡터(vector) 이미지를 표현할 수 없었습니다. 하지만 svg 요소는 픽셀 기반인 웹 페이지에서 픽셀의 영향을 받지 않는 벡터 이미지를 표현할 수 있게 해줍니다. 따라서 이 요소는 도표나 그래프 등 벡터 기반의 다이어그램(diagram)를 표현하는 데 매우 효과적입니다.
사각형 그리기
다음 예제는 rect 요소를 사용하여 사각형을 그리는 예제입니다.
<svg width="200" height="150">
<rect width="200" height="150" stroke="orange" stroke-width="5" fill="yellow"/>
이 문장은 사용자의 웹 브라우저가 svg 요소를 지원하지 않을 때 나타납니다!
</svg>
위와 같이 각각의 속성을 사용하여 설정할 수도 있으며, 다음 예제와 같이 style 속성을 사용하여 한 번에 설정할 수도 있습니다.
<svg width="200" height="150">
<rect width="200" height="150" style="stroke:orange; stroke-width:5; fill:yellow; opacity:1;"/>
</svg>
rect 요소에 x, y, rx, ry 속성을 추가하여 모서리가 둥근 사각형을 그릴 수 있습니다.
<svg width="250" height="200">
<rect width="200" height="150" x="20" y="20" rx="20" ry="20"
stroke="orange" stroke-width="5" fill="yellow"/>
</svg>
선 그리기
다음 예제는 line 요소를 사용하여 선을 그리는 예제입니다.
<svg width="250" height="200">
<line x1="50" y1="50" x2="200" y2="150" stroke="orange" stroke-width="5"/>
</svg>
원 그리기
다음 예제는 circle 요소를 사용하여 원을 그리는 예제입니다.
<svg width="300" height="300">
<circle cx="150" cy="120" r="100" stroke="orange" stroke-width="5" fill="yellow"/>
</svg>
타원 그리기
다음 예제는 ellipse 요소를 사용하여 타원을 그리는 예제입니다.
<svg width="300" height="300">
<ellipse cx="150" cy="100" rx="120" ry="70" stroke="orange" stroke-width="5" fill="yellow"/>
</svg>
다각형 그리기
다음 예제는 polygon 요소를 사용하여 별모양의 다각형을 그리는 예제입니다.
<svg width="300" height="300">
<polygon points="10,100 190,100 30,200 100,40 170,200"
stroke="orange" stroke-width="5" fill="yellow"/>
</svg>
points 속성은 다각형을 이루는 각 꼭짓점의 x좌표와 y좌표를 명시합니다. 이때 첫 번째 꼭짓점부터 시작하여 마지막 꼭짓점까지 차례대로 선으로 연결되어 다각형을 표현하게 됩니다.
Canvas vs SVG
canvas 요소와 svg 요소는 거의 같은 결과물을 얻을 수 있는 비슷한 동작을 하는 요소입니다.어떤 경우에는 canvas 요소를 사용하는 것이 더 나으며, 어떤 경우에는 svg 요소를 사용하는 것이 더 나은 경우가 있습니다.
렌더링(rendering)이란 프로그램을 사용하여 모델로부터 영상이나 화면을 만들어내는 과정을 가리킵니다. 따라서 렌더링 시간이란 코드를 실행하여 그 결과가 화면에 표시되는 시간을 의미합니다.
- canvas 요소의 성능은 화면이 작거나, 픽셀 수가 많을 경우(>10k)에 좋습니다.- svg 요소의 성능은 화면이 크거나, 픽셀 수가 적을 경우(<10k)에 좋습니다.따라서 각 작업 환경에 맞는 그래픽 요소를 선택하여 사용하는 것이 가장 좋습니다.
작업 종류에 따른 선택의 기준
- canvas 요소는 복잡하고 고성능의 애니메이션(animation) 작업이나 동영상 조작 등의 작업에 잘 어울립니다.- svg 요소는 고품질의 문서 작업이나 정적 이미지의 조작 작업 등에 잘 어울립니다.따라서 각 작업 종류에 맞는 그래픽 요소를 선택하여 사용하는 것이 가장 좋습니다.
geolocation API
geolocation API는 사용자의 현재 위치 정보를 가져올 때 사용하는 자바스크립트 API입니다.
사용자의 위도 및 경도에 관한 정보는 자바스크립트를 이용해 웹 서버로 전송됩니다. 이것을 이용하면 사용자의 위치를 지도에 표시하거나, 사용자 근처의 상점을 찾아주는 등의 위치기반 서비스를 할 수 있습니다. 하지만 이러한 정보는 사용자의 사생활을 침해할 가능성이 높으므로, 사용자의 동의 없이는 사용할 수 없도록 하고 있습니다.
크롬 50.0 버전부터는 https와 같은 보안 프로토콜에서만 geolocation API가 동작하도록 허용하고 있습니다.
getCurrentPosition() 메소드
getCurrentPosition() 메소드를 이용하면 사용자의 위치에 대한 위도와 경도값을 얻을 수 있습니다.이 메소드의 첫 번째 인수로는 가져온 사용자의 위치 정보를 출력하는 함수가 들어갑니다.
function findLocation() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showYourLocation);
} else {
loc.innerHTML = "이 문장은 사용자의 웹 브라우저가 Geolocation API를 지원하지 않을 때 나타납니다!";
}
}
이 메소드의 두 번째 인수로는 위치 정보에 관한 오류를 처리하는 함수가 들어갑니다.
function showErrorMsg(error) {
switch(error.code) {
case error.PERMISSION_DENIED:
loc.innerHTML = "이 문장은 사용자가 Geolocation API의 사용 요청을 거부했을 때 나타납니다!"
break;
case error.POSITION_UNAVAILABLE:
loc.innerHTML = "이 문장은 가져온 위치 정보를 사용할 수 없을 때 나타납니다!"
break;
case error.TIMEOUT:
loc.innerHTML = "이 문장은 위치 정보를 가져오기 위한 요청이 허용 시간을 초과했을 때 나타납니다!"
break;
case error.UNKNOWN_ERROR:
loc.innerHTML = "이 문장은 알 수 없는 오류가 발생했을 때 나타납니다!"
break;
}
}
이처럼 가져온 사용자의 위치 정보를 구글 맵을 통해 표시할 수 있습니다.
function showYourLocation(position) {
var userLat = position.coords.latitude;
var userLng = position.coords.longitude;
var imgUrl = "http://maps.googleapis.com/maps/api/staticmap?center=" + userLat + "," + userLng + "&zoom=15&size=500x400&sensor=false";
document.getElementById("mapLocation").innerHTML = "<img src='"+imgUrl+"'>";
}
위의 예제처럼 단순한 이미지로 표시하는 것이 아닌 구글 맵 스크립트를 이용한 연동도 가능합니다.
function showYourLocation(position) {
var userLat = position.coords.latitude;
var userLng = position.coords.longitude;
var userLocation = new google.maps.LatLng(userLat, userLng);
loc = document.getElementById("mapLocation");
loc.style.width = '500px';
loc.style.height = '400px';
var mapOptions = {
center: userLocation,
zoom: 15,
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControl: false,
navigationControlOptions: {style: google.maps.NavigationControlStyle.SMALL}
}
var map = new google.maps.Map(loc, mapOptions);
var marker = new google.maps.Marker({position:userLocation,map:map,title:"여기가 현재 위치입니다!"});
}
드래그 앤 드롭(drag and drop) API
드래그 앤 드롭 API는 웹 페이지 내의 요소를 사용자가 자유롭게 드래그할 수 있도록 설정해줍니다. HTML5 이전에 이와 같은 기능을 구현하기 위해서는 엄청나게 많고 복잡한 스크립트를 작성해야 했습니다. 하지만 HTML5에서는 드래그 앤 드롭(drag and drop) 기능이 표준 권고안에 포함되어 간단하게 사용할 수 있게 되었습니다. 현재 주요 웹 브라우저들은 모두 이 기능을 지원하며, 따라서 웹 페이지 내의 모든 요소는 드래그될 수 있습니다.
드래그 앤 드롭 이벤트
마우스로 객체(object)를 드래그해서 놓을 때까지 여러 단계의 이벤트가 순차적으로 발생하게 됩니다.
DataTransfer 객체
드래그 앤 드롭 이벤트를 위한 모든 이벤트 리스너 메소드(event listener method)는 DataTransfer 객체를 반환합니다. 이렇게 반환된 DataTransfer 객체는 드래그 앤 드롭 동작에 관한 정보를 가지고 있게 됩니다.
draggable 속성
웹 페이지 내의 모든 요소는 draggable 속성을 사용하여 드래그될 수 있는 객체(draggable object)로 변환될 수 있습니다.
ondragstart 속성
드래그될 수 있는 객체로 만든 후에는 ondragstart 속성을 통해 DataTransfer 객체의 setData() 메소드를 호출합니다. setData() 메소드는 드래그되는 대상 객체의 데이터(data)와 타입(data type)을 설정합니다.
ondragover 속성
ondragover 속성은 드래그되는 대상 객체가 어느 요소 위에 놓일 수 있는지를 설정합니다.
기본적으로 HTML 요소는 다른 요소의 위에 위치할 수 없습니다. 따라서 다른 요소 위에 위치할 수 있도록 만들기 위해서는 놓일 장소에 있는 요소의 기본 동작을 막아야만 합니다. 이 작업을 event.preventDefault() 메소드를 호출하는 것만으로 간단히 설정할 수 있습니다.
ondrop 속성
드래그하던 객체를 놓으면 drop 이벤트가 발생합니다.ondrop 속성을 이용하여 drop 이벤트에 대한 동작을 설정할 수 있습니다.
function dragEnter(ev) { ev.preventDefault(); }
function drag(ev) { ev.dataTransfer.setData("text", ev.target.id); }
function drop(ev) {
ev.preventDefault();
var data = ev.dataTransfer.getData("text");
ev.target.appendChild(document.getElementById(data));
}
웹 스토리지(web storage) API
웹 스토리지 API는 기존 쿠키(cookie)의 문제점을 극복하기 위해 웹 브라우저가 직접 데이터(data)를 저장할 수 있게 해줍니다.HTML5 이전에는 응용 프로그램이 데이터를 서버에게 요청할 때마다 매번 쿠키(cookie)라는 곳에 그 정보를 저장합니다. 하지만 웹 스토리지는 사용자 측에서 좀 더 많은 양의 정보를 안전하게 저장할 수 있도록 해줍니다. 웹 스토리지는 최소 5MB 이상의 많은 공간을 가지고 있으며, 이 정보는 절대 서버로 전송되지 않습니다. 이러한 웹 스토리지는 오리진(origin)마다 단 하나씩만 존재합니다. 오리진(origin)이란 도메인(domain)과 프로토콜(protocol)의 한 쌍으로 이루어진 식별자입니다. 따라서 하나의 오리진에 속하는 모든 웹 페이지는 같은 데이터(data)를 저장하며 또한 같은 데이터에 접근할 수 있습니다.
웹 스토리지 지원 여부 확인
웹 스토리지를 사용하기 전에, 우선 사용자의 웹 브라우저가 이를 지원하는지 안 하는지 확인해야 합니다.
if (typeof(Storage) !== "undefined") {
// web storage를 위한 코드 부분
} else {
// web storage를 지원하지 않는 브라우저를 위한 안내 부분
}
웹 스토리지 객체
웹 스토리지 API는 사용자가 데이터를 저장할 수 있도록 두 가지 객체를 제공합니다.
- sessionStorage 객체 : 하나의 세션(session)만을 위한 데이터를 저장하는 객체
- localStorage 객체 : 보관 기한이 없는 데이터를 저장할 수 있는 객체
sessionStorage 객체
sessionStorage 객체는 하나의 세션(session)만을 위한 데이터를 저장합니다.따라서 사용자가 브라우저 탭이나 창을 닫으면 이 객체에 저장된 데이터는 사라집니다.
function clickCounter() {
if(typeof(Storage) !== "undefined") {
if (sessionStorage.clickcount) {
sessionStorage.clickcount = Number(sessionStorage.clickcount) + 1;
} else {
sessionStorage.clickcount = 1;
}
document.getElementById("counter").innerHTML = "카운터의 현재 횟수는 " + sessionStorage.clickcount + "입니다!";
}
}
localStorage 객체
localStorage 객체는 보관 기한이 없는 데이터를 저장합니다.따라서 브라우저 탭이나 창이 닫히거나, 컴퓨터를 재부팅 해도 저장된 데이터는 없어지지 않습니다.
function clickCounter() {
if(typeof(Storage) !== "undefined") {
if (localStorage.clickcount) {
localStorage.clickcount = Number(localStorage.clickcount) + 1;
} else {
localStorage.clickcount = 1;
}
document.getElementById("counter").innerHTML = "카운터의 현재 횟수는 " + localStorage.clickcount + "입니다!";
}
}
application cache API
application cache API는 웹 응용 프로그램을 캐시(cache) 하여, 인터넷 접속 없이 사용자가 접근할 수 있게 해줍니다. 따라서 application cache를 사용하면 웹 응용 프로그램의 오프라인 버전을 쉽게 만들 수 있습니다.application cache를 사용해서 생기는 장점은 다음과 같습니다.
- 오프라인 접속 : 사용자가 웹 응용 프로그램을 오프라인(off-line)으로도 사용할 수 있습니다.
- 속도 : 캐시(cache)된 자원은 빠르게 로드(load)할 수 있습니다.
- 서버의 부하 감소 : 웹 브라우저는 서버의 자원에 변동이 있을 때만 자원을 갱신하면 됩니다.
cache manifest 파일
application cache를 사용하기 위해서는 먼저 cache manifest 파일을 작성해야 합니다.cache manifest 파일은 웹 브라우저에 캐시(cache) 해야 할 파일과 캐시하지 말아야 할 파일을 알려줍니다.이러한 mainfest 파일은 다음과 같이 세 개의 세션(session)으로 이루어집니다.
- CACHE MANIFEST : 처음 다운로드한 이후에 계속 캐시할 파일들을 기록합니다.
- NETWORK : 서버와의 접속이 필요한 파일들을 기록하며, 이 파일들은 절대로 캐시되지 않습니다.
- FALLBACK : 파일에 접속할 수 없을 때에 대체할 파일들을 기록합니다.
캐시(cache)의 갱신
웹 브라우저는 다음과 같은 경우가 발생하면 캐시(cache)의 정보를 갱신하게 됩니다.- 사용자가 웹 브라우저의 캐시를 강제로 지웠을 경우
- application cache가 프로그램 때문에 갱신됐을 경우
- cache manifest 파일이 수정됐을 경우
CACHE MANIFEST
# 2016-03-22 v1.0.1
test.html
test.css
test.js
NETWORK:
test.jpg
FALLBACK:
/ offline.html
한 번 캐시 되면 서버상의 파일을 수정해도, 웹 브라우저는 사용자 측에 캐시 되어 있는 버전의 파일만을 보여줍니다. 따라서 서버상의 파일을 수정한 후에는 반드시 웹 브라우저가 캐시를 갱신하도록 만들어야 합니다. 이때 가장 많이 사용되는 방법이 cache manifest 파일 내의 주석 부분을 수정하는 것입니다. 일반적으로 갱신 날짜 및 버전 정보를 주석으로 표시하고, 이 부분을 수정하여 웹 브라우저가 캐시를 갱신하도록 유도합니다.
web worker API
웹 페이지에서 스크립트가 실행되면, 해당 웹 페이지는 실행 중인 스크립트가 종료될 때까지 응답 불가 상태가 됩니다. web worker는 스크립트가 웹 페이지의 성능에 영향을 미치지 않도록 백그라운드에서 동작하게 해주는 자바스크립트입니다. 즉, web worker는 스크립트의 다중 스레드(multi-thread)를 지원합니다. 따라서 사용자가 웹 페이지를 이용하면서도, 동시에 시간이 오래 걸리는 자바스크립트 작업도 병행할 수 있도록 해줍니다.
web worker 지원 여부 확인
web worker를 사용하기 전에, 우선 사용자의 웹 브라우저가 이를 지원하는지 안 하는지 확인해야 합니다.
if (typeof(Worker) !== "undefined") {
// web worker를 위한 코드 부분 }
else {
// web worker를 지원하지 않는 브라우저를 위한 안내 부분
}
web worker 파일 생성
web worker의 동작을 확인하기 위해 소수를 찾는 외부 자바스크립트 파일을 만듭니다.
var n = 1;
search: while (true) {
n += 1;
for (var i = 2; i <= Math.sqrt(n); i += 1)
if (n % i == 0)
continue search;
postMessage(n);
}
위의 예제에서 postMessage() 메소드는 HTML 문서에 결과를 전달하기 위해 사용합니다.web worker 객체 생성
위에서 만든 web worker 파일을 불러올 HTML 파일을 만듭니다.
if(typeof(webworker) == "undefined") {
webworker = new Worker("/examples/web_worker.js");
}
위의 예제는 web worker 파일이 존재하지 않으면, 새로운 web worker 객체를 만들어 줍니다.
worker 객체와의 연결
onmessage 이벤트 리스너(event listener)를 통해 web worker 파일과 메시지를 주고받을 수 있습니다.
webworker.onmessage = function(event) {
document.getElementById("result").innerHTML = event.data;
};
위의 예제에서 web worker 파일이 메시지를 보내면 해당 이벤트 리스너(event listener)가 실행됩니다. 이 때 web worker 파일이 보낸 정보는 event.data에 저장됩니다.
web worker 객체의 실행 종료
web worker 객체는 생성되고 나서 종료될 때까지 계속해서 메시지를 받을 준비를 합니다. 따라서 웹 브라우저나 컴퓨터의 자원을 돌려주기 위해서는 terminate() 메소드를 사용하여 web worker를 반드시 종료해줘야 합니다.
webworker.terminate();
web worker 객체의 재사용
web worker 객체가 종료된 후에는 web worker의 값을 undefined로 설정해야만 web worker 객체를 재사용할 수 있습니다.
webworker = undefined;
web worker 예제
다음 예제는 앞에서 살펴본 web worker의 동작을 하나의 예제로 보여주는 예제입니다.
var webworker;
function startWorker() {
if(typeof(Worker) !== "undefined") {
if(typeof(webworker) == "undefined") { webworker = new Worker("/examples/web_worker.js"); }
webworker.onmessage = function(event) { document.getElementById("result").innerHTML = event.data; };
}
}
function stopWorker() {
webworker.terminate();
webworker = undefined;
}
Server Sent Events API
server sent events API는 웹 페이지가 서버로부터 갱신된 정보를 자동으로 받을 수 있도록 설정합니다.
server sent events 지원 여부 확인
server sent events를 사용하기 전에, 우선 사용자의 웹 브라우저가 이를 지원하는지 안 하는지 확인해야 합니다.
if (typeof(EventSource) !== "undefined") {
// server sent events를 위한 코드 부분
} else {
// server sent events를 지원하지 않는 브라우저를 위한 안내 부분
}
다음 예제는 server sent events를 이용해 5초마다 웹 페이지를 갱신하는 예제입니다.
if(typeof(EventSource) !== "undefined") {
var source = new EventSource("/examples/media/sse.php");
source.onmessage = function(event) {
document.getElementById("result").innerHTML += event.data + "<br>";
};
}
위의 예제에서 사용한 서버 측 PHP 파일인 sse.php 파일은 다음과 같습니다.
<?php
header('Content-Type: text/event-stream');
header('Cache-Control: no-cache');
$time = date('r');
echo "data: The server time is: {$time}\n\n";
flush();
?>