ShakeJ
MNWorld
ShakeJ
전체 방문자
4,237,605
오늘
9
어제
63
  • 카테고리
    • Contact
    • 🤔그냥이야기
    • 📷사진이야기
    • 제주도에서 한달을 살아보았다
    • 옛글
      • 👇Blog
      • 공지사항
      • 이슈
      • 생각들
      • 👇취미
      • 건프라
      • 👇Review
      • 노래리뷰
      • 영화리뷰
      • 👇Travel Story
      • 2011 도쿄여행기
      • 2013 Google IO
      • 2013 Jeju
      • 2014 HONGKONG
      • 2014 Jeju
      • 2014 Sanfransis..
      • 2015 Lombok
      • 2016 HONGKONG
      • 2017 Saigon
      • 국내여행기
      • Photo Story
      • Growth
      • 👇Server
      • Ruby on the Rai..
      • Frontend
      • FullStack (MEAN..
      • Ubuntu
      • 👇Android
      • 안드로이드 프로그래밍
      • 번역본
      • 내어플이야기
      • 코드창고
      • 👇iOS
      • 아이폰 프로그래밍
      • 맥북 이야기
      • 👇Microsoft
      • ASP.NET
      • Silverlight
      • 윈도우 이야기
      • 👇IT Story
      • 모바일 이야기
      • 하드웨어 이야기
      • 네트워크 이야기
      • 프로그래밍이야기
      • Database이야기
      • 클라우드이야기
      • 프론트 이야기
      • 마케팅이야기
      • 그래픽 작업
      • 블로그 팁

블로그 메뉴

  • GuestBook

공지사항

인기 글

  • 컴퓨터 팬 소음이 많이 날 때 고치는 방법 2가지
    2010.12.15
    컴퓨터 팬 소음이 많이 날 때 고치는 방법 2가지
  • Opacity 컬러코드 투명도 Hex값
    2015.07.13
  • 식은땀난 NO.2003 can't connet 'mysql⋯
    2011.02.23
  • iframe 가로스크롤만 없애기!(세로스크롤도 가능)
    2010.10.28
  • [안드로이드앱추천] 일어나 친구야 - 문자로 알람켜기
    2014.04.29
    [안드로이드앱추천] 일어나 친구야 - 문자로 알람켜기

태그

  • 블로그 이야기
  • 블로그 운영
  • iOS 프로그래밍
  • 블로그 관련
  • 블로그 만들기
  • asp.net
  • 블로그 운영하기
  • 티스토리 팁
  • 블로그 초보
  • 배너제작
  • D40 사진
  • 풍경사진
  • 블로그 팁
  • 초대장
  • 블로그 잡담
  • 배너교환
  • 윈도우폰7
  • 블로그 시작하기
  • shakej
  • 블로그 처음
  • 안드로이드 어플 추천
  • 블로그 운영하면서
  • 블로그 꾸미기
  • 티스토리 초대장
  • MNWorld
  • 무료배너제작
  • 랩
  • 서울 출사지
  • 티스토리
  • 배너무료제작

최근 댓글

  • 감사합니다~!
    ShakeJ
  • 포스팅 잘봤습니다 공감 누르고 가요~
    hellorly
  • 감사합니다 😄
    ShakeJ
  • 포스팅 잘봐서 좋아요 눌렀어요~~🤍 오늘하루도 힘차게 이겨⋯
    D
  • 앗 옛날에 쓴 그 게임 디스크 말씀이시군요.. 거진 10년⋯
    ShakeJ

최근 글

  • [제주도에서 한달을 살아보았다(1)] 한달살이를 시작하며 ⋯
    2022.06.14
    [제주도에서 한달을 살아보았다(1)] 한달살이를 시작하며 ⋯
  • [📷사진이야기] 붉은 호치민의 노을
    2022.02.10
    [📷사진이야기] 붉은 호치민의 노을
  • 13년간의 블로그, 오랫만의 글을 쓰며
    2022.02.09
    13년간의 블로그, 오랫만의 글을 쓰며
  • DB의 index와 rails가 기억하는 index가 틀려⋯
    2020.10.22
  • 건프라 삼국창걸전 SD를 세울 디오라마를 만들어보자!
    2020.09.29
    건프라 삼국창걸전 SD를 세울 디오라마를 만들어보자!

티스토리

hELLO · Designed By 정상우.
ShakeJ

MNWorld

[HTML5이야기] HTML5 지원여부 감지
옛글/프론트 이야기

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

2011. 1. 3. 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 의 헤더앞에 들어가는 이건 대체 무엇을 의미할까요!?
저작자표시 비영리
  • 카카오스토리
  • 트위터
  • 페이스북

'옛글 > 프론트 이야기' 카테고리의 다른 글

[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 HTML4 차이점, hTML5 video, HTML5 video audio, html5 발전, HTML5 추가 태그, HTML5 특징
    ShakeJ
    ShakeJ
    댓글쓰기
    [HTML5이야기] Video & Audio 태그 집중 분석
    다음 글
    [HTML5이야기] Video & Audio 태그 집중 분석
    이전 글
    [쉬운HTML] 두번째 시간 - 티스토리 블로그 HTML/CSS를 파헤쳐보자

    티스토리툴바