참조 : http://html5boilerplate.com/
HTML5 스타터킷
여러가지 옵션 들이 보입니다. 붉은색 박스안에 원하는 형태의 파일을 선택하여 다운 받습니다.
- html5boilerplate
index 파일을 많이 부족하지만 분석해 봤습니다.
===========================================================================================
===========================================================================================헤더 본문
제가 헷갈렸던 부분만 캐치 해서 이해한 부분까지 정리해 보겠습니다.
참조
http://html5boilerplate.com/
http://www.jonathanfielding.com/2011/02/html5-boilerplate-experimenting-with-html5-tags/
http://blog.naver.com/PostView.nhn?blogId=knight50&logNo=80130500816
---------------------------------------------------------------------------------------------------
---------------------------------------------------------------------------------------------------
<!doctype html>
- HTML5 선언
---------------------------------------------------------------------------------------------------
<!--[if lt IE 7 ]> <html class="no-js ie6" lang="en"> <![endif]-->
<!--[if IE 7 ]> <html class="no-js ie7" lang="en"> <![endif]-->
<!--[if IE 8 ]> <html class="no-js ie8" lang="en"> <![endif]-->
<!--[if (gte IE 9)|!(IE)]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
Internet Explorer Conditionals
설명 원문
From Microsoft’s many releases of the modern day web browser Internet Explorer includes some fantastic bits of code. These conditional comments added below are just a few examples of the many choices you can have when coding an HTML5 document. If you’d like to apply specific CSS styles to a document based on the vesion of IE these conditional comments allow for the extremes. Customization is huge in web development, and when it comes to Internet Explorer the ideology is no different.
별로 의미 없는것같다 큰의미가 있을 꺼 같았는데 원래 목적과 같다 지원하려는 익스플로러 버전별 로 구분하기 위해 쓰인것.
---------------------------------------------------------------------------------------------------
---------------------------------------------------------------------------------------------------
2011-10-18 추가사항
ie 주석문을 이용해 각 버전별로 css를 다룰수 있다.
브라우저 버전 별로 class명이 다르게 되있어 따로 css를 줄수가 있다.
예)
ie 주석문을 이용해 각 버전별로 css를 다룰수 있다.
브라우저 버전 별로 class명이 다르게 되있어 따로 css를 줄수가 있다.
예)
.ie6 body{background:#ff0;}
.ie7 body{background:#666;}
.ie8 body{background:orange;}
---------------------------------------------------------------------------------------------------
참조
참조
1. http://fivewind.tistory.com/217
2. http://www.jonathanfielding.com/2011/02/html5-boilerplate-what-we-can-learn-from-it/
---------------------------------------------------------------------------------------------------
<HTML lang=en class=" ie8 js no-flexbox no-canvas no-canvastext no-webgl no-touch no-geolocation postmessage no-websqldatabase no-indexeddb hashchange no-history draganddrop no-websockets no-rgba no-hsla no-multiplebgs no-backgroundsize no-borderimage no-borderradius no-boxshadow no-textshadow no-opacity no-cssanimations no-csscolumns no-cssgradients no-cssreflections no-csstransforms no-csstransforms3d no-csstransitions fontface no-video no-audio no-localstorage no-sessionstorage no-webworkers no-applicationcache no-svg no-inlinesvg no-smil no-svgclippaths">
클래스에도 지원안되는 것은 나타나듯 앞에 "no-" 가 붙어있다.
modernizr.js 는 그외에도 기능이 많은거 같은데 아직 제대로 사용은 못하는것 같습니다. 좀더 연구해봐야 겠습니다.
---------------------------------------------------------------------------------------------------
온라인으로 제이쿼리 로딩에 실패하면 오프라인 경로로 대체 합니다.
---------------------------------------------------------------------------------------------------
저 글 못쓰네요 ㅎㅎㅎㅎ 노력해야 겠습니다.
---------------------------------------------------------------------------------------------------
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
X-UA-Compatible
The biggest problem with Internet Explorer comes with how choppy the rendering engine performs. In fact, for many versions of the browser there are multiple engines built-in! It’s an incredible confusing circumstance. This short meta tag will force IE to use the most recent version of its rendering engine.
IE 렌더링 엔진의 최신 버전을 사용하도록합니다.
참조
1. http://mdoli.com/tatter?page=4
2. http://ji80903.tistory.com/335
3. http://www.chromium.org/developers/how-tos/chrome-frame-getting-started
<meta http-equiv="X-UA-Compatible" content="IE=edge">
edge => 무조건 최신 으로 사용한다
Google Chrome Frame
internet Explorer 용 무료 플러그인
http://www.google.com/chromeframe/?hl=ko
크롬 프레임 플러그인 을 설치된 컴퓨터에 익스 엔진을 크롬으로 사용합니다.
---------------------------------------------------------------------------------------------------
참조
1. http://www.modernizr.com/
2. http://o5o5o.dyndns.org/wp/?p=830
3. http://mytory.co.kr/archives/1213
Modernizr를 이용한 브라우저 호환성 테스트 html5 이용 가능한지 알아볼수 있습니다.
크롬 에서 구동시 나타나는 태그
<html class=" js flexbox canvas canvastext no-webgl no-touch geolocation postmessage websqldatabase indexeddb hashchange history draganddrop websockets rgba hsla multiplebgs backgroundsize borderimage borderradius boxshadow textshadow opacity cssanimations csscolumns cssgradients cssreflections csstransforms no-csstransforms3d csstransitions fontface generatedcontent video audio localstorage sessionstorage webworkers applicationcache svg inlinesvg smil svgclippaths" lang="en"><!--<![endif]--><head>
IE8 에나타나는 태그<script src="js/libs/modernizr-1.7.min.js"></script>
참조
1. http://www.modernizr.com/
2. http://o5o5o.dyndns.org/wp/?p=830
3. http://mytory.co.kr/archives/1213
Modernizr를 이용한 브라우저 호환성 테스트 html5 이용 가능한지 알아볼수 있습니다.
크롬 에서 구동시 나타나는 태그
<html class=" js flexbox canvas canvastext no-webgl no-touch geolocation postmessage websqldatabase indexeddb hashchange history draganddrop websockets rgba hsla multiplebgs backgroundsize borderimage borderradius boxshadow textshadow opacity cssanimations csscolumns cssgradients cssreflections csstransforms no-csstransforms3d csstransitions fontface generatedcontent video audio localstorage sessionstorage webworkers applicationcache svg inlinesvg smil svgclippaths" lang="en"><!--<![endif]--><head>
<HTML lang=en class=" ie8 js no-flexbox no-canvas no-canvastext no-webgl no-touch no-geolocation postmessage no-websqldatabase no-indexeddb hashchange no-history draganddrop no-websockets no-rgba no-hsla no-multiplebgs no-backgroundsize no-borderimage no-borderradius no-boxshadow no-textshadow no-opacity no-cssanimations no-csscolumns no-cssgradients no-cssreflections no-csstransforms no-csstransforms3d no-csstransitions fontface no-video no-audio no-localstorage no-sessionstorage no-webworkers no-applicationcache no-svg no-inlinesvg no-smil no-svgclippaths">
클래스에도 지원안되는 것은 나타나듯 앞에 "no-" 가 붙어있다.
modernizr.js 는 그외에도 기능이 많은거 같은데 아직 제대로 사용은 못하는것 같습니다. 좀더 연구해봐야 겠습니다.
---------------------------------------------------------------------------------------------------
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.js"></script>
<script>window.jQuery || document.write("<script src='js/libs/jquery-1.5.1.min.js'>\x3C/script>")</script>
온라인으로 제이쿼리 로딩에 실패하면 오프라인 경로로 대체 합니다.
---------------------------------------------------------------------------------------------------
저 글 못쓰네요 ㅎㅎㅎㅎ 노력해야 겠습니다.
위 내용에 잘못된점이 있으면 질타 부탁드립니다. 잘못알고 있다는것은 무서운것 이니깐요
반응형
'WEB > HTML' 카테고리의 다른 글
| flash object markup (0) | 2011.08.11 |
|---|---|
| HTML5 브라우저 테스트 (0) | 2011.02.06 |
| [Default] JS HTML5.js ie9.js (0) | 2011.01.17 |