Server Sent Events Server Sent Events API server sent events API는 웹 페이지가 서버로부터 갱신된 정보를 자동으로 받을 수 있도록 설정한다. server sent events를 지원하는 주요 웹 브라우저의 버전은 다음과 같다. API server sent events 지원안함 6.0 6.0 5.0 11.5 Server Snet Events 지원 여부 확인 server sent events를 사용하기 전에, 우선 사용자의 웹 브라우저가 이를 지원하는지 안 하는지 확인해야 한다. 문법 if (typeof(EventSource) !== "undefined") { // server sent events를 위한 코드 부분 } else { // server sent..
Web Worker web worker API 웹 페이지에서 스크립트가 실행되면, 해당 웹 페이지는 실행 중인 스크립트가 종료될 때까지 응답 불가 상태가 된다.web worker는 스크립트가 웹 페이지의 성능에 영향을 미치지 않도록 백그라운드에서 동작하게 해주는 자바스크립트이다. 즉, web worker는 스크립트의 다중 스레드(multi-thread)를 지원한다.따라서 사용자가 웹 페이지를 이용하면서도, 동시에 시간이 오래 걸리는 자바스크립트 작업도 병행할 수 있도록 해준다. web worker를 지원하는 주요 웹 브라우저의 버전은 다음과 같다. API web worker 10.0 4.0 3.5 4.0 11.5 web worker 지원 여부 확인 web worker를 사용하기 전에, 우선 사용자의 웹 ..
Application Cache application cache API application cache API는 웹 응용 프로그램을 캐시(cache) 하여, 인터넷 접속 없이 사용자가 접근할 수 있게 해준다.따라서 application cache를 사용하면 웹 응용 프로그램의 오프라인 버전을 쉽게 만들 수 있다. application cache를 사용해서 생기는 장점은 다음과 같다. - 오프라인 접속 : 사용자가 웹 응용 프로그램을 오프라인(off-line)으로도 사용할 수 있다.- 속도 : 캐시(cache)된 자원은 빠르게 로드(load)할 수 있다.- 서버의 부하 감소 : 웹 브라우저는 서버의 자원에 변동이 있을 때만 자원을 갱신하면 된다. application cache를 지원하는 주요 웹 브라우저..
Web Storage 웹 스토리지(web storage) API 웹 스토리지 API는 기존 쿠키(cookie)의 문제점을 극복하기 위해 웹 브라우저가 직접 데이터(data)를 저장할 수 있게 해준다. HTML5이전에는 응용 프로그램이 데이터를 서버에게 요청할 때마다 매번 쿠키(cookie)라는 곳에 그 정보를 저장한다.하지만 웹 스토리지는 사용자 측에서 좀 더 많은 양의 정보를 안전하게 저장할 수 있도록 해준다.웹 스토리지는 최소 5MB이상의 많은 공간을 가지고 있으며, 이 정보는 절대 서버로 전송되지 않는다. 이러한 웹 스토리지는 오리진(origin)마다 단 하나씩만 존재한다.오리진(origin)이란 도메인(domain)과 프로토콜(protocol)의 한 쌍으로 이루어진 식별자이다.따라서 하나의 오리진..
Drag and Drop 드래그 앤 드롭(drag and drop) API 드래그 앤 드롭 API는 웹 페이지 내의 요소를 사용자가 자유롭게 드래그할 수 있도록 설정해준다. HTML5 이전에 이와 같은 기능을 구현하기 위해서는 엄청나게 많고 복잡한 스크립트를 작성해야 했다.하지만 HTML5에서는 드래그 앤 드롭(drag and drop) 기능이 표준 권고안에 포함되어 간단하게 사용할 수 있게 되었다.현재 주요 웹 브라우저들은 모두 이 기능을 지원하며, 따라서 웹 페이지 내의 모든 요소는 드래그될 수 있다. 드래그 앤 드롭 API를 지원하는 주요 웹 브라우저의 버전은 다음과 같다. 요소 드래그 앤 드롭 9.0 4.0 3.5 6.0 12.0 드래그 앤 드롭 이벤트 마우스로 객체(object)를 드래그 해서 ..
Geolocation geolocation API HTML5 API에서 새롭게 추가된 API는 모두 자바스크립트로 구현되어 있다. geolocation API는 사용자의 현재 위치 정보를 가져올 때 사용하는 자바스크립트 API이다.사용자의 위도 및 경도에 관한 정보는 자바스크립트를 이용해 웹 서버로 전송된다. 이것을 이용하면 사용자의 위치를 지도에 표시하거나, 사용자 근처의 상점을 찾아주는 등의 위치기반 서비스를 할 수 있다.하지만 이러한 정보는 사용자의 사생활을 침해할 가능성이 높으므로, 사용자의 동의 없이는 사용할 수 없도록 하고 있다. geolocation API를 지원하는 주요 웹 브라우저의 버전은 다음과 같다. 요소 geolocation 9.0 5.0~49.0(http)50.0(https) 3...
SVG svg 요소 svg 요소는 Scalable Vector Graphics를 의미하며, XML 기반의 W3C 그래픽 표준 권고안이다. 기존에 사용해 왔던 canvas 요소로는 벡터(vector) 이미지를 표현할 수 없었다. 하지만 svg 요소는 픽셀 기반인 웹 페이지에서 픽셀의 영향을 받지 않는 벡터 이미지를 표현할 수 있게 해준다.따라서 이 요소는 도표나 그래프 등 벡터 기반의 다이어그램(diagram)를 표현하는 데 매우 효과적이다. svg요소를 지원하는 주요 웹 브라우저의 버전은 다음과 같다. 요소 svg 9.0 4.0 3.0 3.2 10.1 사각형 그리기 다음 예제는 rect 요소를 사용하여 사각형을 그리는 예제이다. 예제12345678910111213141516171819 HTML5 Mult..
Canvas canvas 요소 canvas 요소는 웹 페이지에 그래픽을 그려주는 쉽고 강력한 방법을 제공한다.이 요소는 그래픽을 위한 컨테이너(container) 역할만을 수행한다.따라서 실제로 그래픽을 그리기 위해서는 자바스크립트(JavaScript) 등의 스크립트 언어를 이용해야 한다. canvas 요소를 지원하는 주요 웹 브라우저의 버전은 다음과 같다. 요소 canvas 9.0 4.0 2.0 3.1 9.0 canvas 요소의 속성 canvas 요소는 테두리(border)도 콘텐츠(content)도 없는 웹 페이지 내의 단순한 사각형의 공간이다. 그러므로 반드시 style 속성을 이용하여 캔버스의 크기를 설정해 주어야 한다. canvas 요소를 스크립트(script)에서 접근하기 위해서는 해당 요소의..