[HTML5이야기] HTML5 지원여부 감지


IT Story/HTML이야기 2011.01.03 16:41




[http://mnworld.co.kr 의 shakej 직접 작성한 글입니다.]
[구글 개발자가 들려주는 HTML5 활용 이라는 서적을 보고 개인적으로 공부한 내용입니다]


이미 시작된 HTML5 세상! 동영상으로 한번 보고 시작해볼까요.




HTML 5 가 어떤 브라우저에서 감지되는지 확실히 알수가 없다구요!?

그건 HTML 4에서 지원하지 않는 엘리멘트를 직접 사용해서 브라우저에서 띄워보는 방법 밖에 없어요.

예를 들어 캔버스나 비디오 같은 개별기능을 사용하여 브라우저가 지원하는 지 알아보는 방법이 있어요.


여기 참고자료가 있습니다. 구글크롬에서 가장 전폭적인 지지를 하고 있습니다.

감지방법은 브라우저는 웹페이지를 렌더링 할 때 객체 집합인 문서 객체 모델을 만듭니다. <p> <div> <span> 같은 모든 엘리먼트는 DOC에서 각기 다른 객체로 표현됩니다.

 한번 알아볼께요

HTML 5 는 따로 text/html 을 사용하지 않고 http://www.modernizr.com Modernizr 의 MIT 라이선스를 가진 오픈소스로 HTML5, CSS3 의 다양한 기능을 지원하는지 확인하는 오픈소스를 제공해줍니다. 다운을 받으신 후 ( 다운로드 누르시면 됩니다. )
같은 폴더에 푸시고

<title> 태그 아래에 <script src="modernizr.min.js"></script> 를 사용해주시면 웹페이지를 불러올 때 헤더부분에 있는 저 자바스크립트 파일을 자동으로 실행하게 됩니다. 그런 후에 

 
if (Modernizr.Canvas) {
 //아무거나 그려보아요

} else {
 //캔버스를 지원하지 않네요 :(

}


라고 만들어 띄우면 HTML 5를 지원하지 않는 곳에선 아래 메서드를 , 지원하는 곳에선 정상적으로 캔버스가 나타나게 되겠습니다.

그럼 하나씩 하나씩 알아볼까요? HTML 5 의 새 기능에 대해서,

1. 캔버스
<canvas> 엘리먼트를 '그래프나 게임그래픽 혹은 비주얼 이미지를 즉각적으로 렌더링하는 데 사용하는 해상도 의존적인 비트맵 캔버스'로 정의해요.
 캔버스는 페이지에 사각형으로 존재하며 자바스크립트를 사용하면 무엇이든 그릴 수 있어요. 모양그리기, 경로 지정, 그라디언트 변형을 지원하기 위한 함수군을 정의 해요. 

2. 비디오
웹페이지의 동영상 삽입을 위한 <video> 엘리먼트를 정의해요
이전까지는 퀵타임, 플래시, 등등의 써드파티 플러그인이 있어야 했지만, html5의 가장 혁신적인 변화라고 할 수 있겠네요
그저 <img src>  처럼 간단한태그만으로 비디오를 표현할 수 있습니다. html5가 지원하는 비디오 포맷중에 하나를 선택하기만 하면 됩니다. 
 
 이부분에 대해서는 다음 포스팅에서 조금 더 자세하고 비중있게 다뤄보도록 하겠습니다.

3. 로컬 저장소
HTML5 의 저장소는 웹사이트 정보를 컴퓨터에 저장하고 나중에 다시 읽을 수 있는 방법을 제공해요
기존의 쿠키와 비슷하지만 그보다 더 크고 많은 양의 정보를 다룰 수 있도록 설계되었어요.

일단 이외에도 많은 기능이 있으나 핵심적으로 사용될 기술을 위와 같이 정리 해놓고 다음 video와 audio 태그에 대해서 알아보는 다음 포스팅으로 넘어가죠!

+오늘의 숙제
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

HTML 의 헤더앞에 들어가는 이건 대체 무엇을 의미할까요!?
저작자 표시 비영리
신고

WRITTEN BY
ShakeJ

0 ,