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...
Canvas vs SVG Canvas vs SVG canvas 요소와 svg 요소는 거의 같은 결과물을 얻을 수 있는 비슷한 동작을 하는 요소이다.어떤 경우에는 canvas 요소를 사용하는 것이 더 나으며, 어떤 경우에는 svg 요소를 사용하는 것이 더 나은 경우가 있다. 작업 환경에 따른 선택의 기준 다음 그림은 화면 크기 및 픽셀 수에 따른 렌더링 시간(rendering time)을 보여준다. 렌더링(rendering)이란 프로그램을 사용하여 모델로부터 영상이나 화면을 만들어내는 과정을 가리킨다.따라서 렌더링 시간이란 코드를 실행하여 그 결과가 화면에 표시되는 시간을 의미한다. - canvas 요소의 성능은 화면이 작거나, 픽셀 수가 많을 경우(>10k)에 좋다. - svg 요소의 성능은 화면이 크거..
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)에서 접근하기 위해서는 해당 요소의..
플러그인 플러그인(Plug-in) HTML 플러그인이란 웹 브라우저의 표준 기능을 확장해 주는 프로그램을 의미한다. 가장 널리 알려진 플러그인으로는 Java Applet, Flash Player, Pdf Reader 등이 있다.이러한 플러그인은 object 요소나 embed 요소를 사용하여 HTML 문서에 추가할 수 있다. object 요소 object 요소는 HTML 문서에 삽입할 객체(object)를 명시하는데 사용한다. 이 요소는 모든 웹 브라우저에서 동작하며, 객체뿐만 아니라 또 다른 HTML 문서를 삽입할 수도 있다. 예제12345678910111213141516 HTML5 Multimedia Plugins object 요소를 이용한 pdf 파일 삽입 Colored by Color Scripte..
멀티미디어 파일 형식/비디오(video)/오디오(audio) 멀티미디어 파일 형식 HTML5 이전까지는 웹 브라우저마다 어떤 종류의 멀티미디어 파일을 지원할지 각자 다른 방식으로 처리해 왔다. 하지만 HTML5에서는 플래시와 같은 외부 플러그인의 도움 없이도 멀티미디어 파일을 간단히 사용할 수 있게 되었다. 웹 브라우저는 파일의 타입(type) 을 파일의 확장자로 판단한다. 만약에 확장자가 .html인 파일을 보면, 웹 브라우저는 이 파일을 HTML 파일로써 다루게 될 것이다. 비디오(video)나 사운드(sound)와 같은 멀티미디어 요소들은 멀티미디어 파일에 저장된다. 이와 같은 멀티미디어 파일도 다음과 같이 다양한 파일 형식으로 저장될 수 있다. 비디오(video) 파일 형싱 대표적인 비디오 파일 ..