![[HTML5이야기] HTML5 지원여부 감지](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Ft1.daumcdn.net%2Fcfile%2Ftistory%2F164B7B4D4D21236A0E)
[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> 를 사용해주시면 웹페이지를 불러올 때 헤더부분에 있는 저 자바스크립트 파일을 자동으로 실행하게 됩니다. 그런 후에
라고 만들어 띄우면 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 의 헤더앞에 들어가는 이건 대체 무엇을 의미할까요!?
같은 폴더에 푸시고
<title> 태그 아래에 <script src="modernizr.min.js"></script> 를 사용해주시면 웹페이지를 불러올 때 헤더부분에 있는 저 자바스크립트 파일을 자동으로 실행하게 됩니다. 그런 후에
if (Modernizr.Canvas) {
//아무거나 그려보아요
} else {
//캔버스를 지원하지 않네요 :(
}
//아무거나 그려보아요
} 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 의 헤더앞에 들어가는 이건 대체 무엇을 의미할까요!?
'옛글 > 프론트 이야기' 카테고리의 다른 글
| [HTML5이야기] 시맨틱 엘리먼트!? (0) | 2011.01.04 |
|---|---|
| [HTML5이야기] Video & Audio 태그 집중 분석 (4) | 2011.01.03 |
| [쉬운HTML] 두번째 시간 - 티스토리 블로그 HTML/CSS를 파헤쳐보자 (3) | 2011.01.03 |
| [쉬운HTML] 첫번째 시간 - HTML 맛보기 (2) | 2011.01.03 |
| [HTML5이야기] HTML은 무엇이고 어떻게 발전했을까 (0) | 2010.12.31 |
![[HTML5이야기] Video & Audio 태그 집중 분석](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Ft1.daumcdn.net%2Fcfile%2Ftistory%2F1149EB584D217EC111)