티스토리 뷰

WEB2.0/웹표준

견고한 HTML5 문서 만들기

나를찾는아이 2010. 6. 22. 10:01
728x90
반응형
자 이제까지 HTML5 문서를 만들기 위한 준비과정을 진행해보았습니다.

새로운 엘리먼트들에 대해서도 알아보았고

새로운 엘리먼트들에 대한 기본 CSS정의도 해보았고

IE에서 새로운 엘리먼트를 인식시키는 방법에 대해서도 알아보았습니다.


그럼 이제 좀 더 견고한 HTML5문서를 만들어 봅시다.



<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>HTML5</title>
<link rel="stylesheet" href="css/common.css" type="text/css" />
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!--[if lte IE 7]>
<script src="js/IE8.js"></script>
<![endif]-->
<!--[if lt IE 7]>
<link rel="stylesheet" type="text/css" media="all" href="css/ie6.css" />
<![endif]-->
</head>
<body>
</body>
</html>



conditional comments를 이용하여 HTML5 호환을 위해 IE를 위한 몇가지 조치를 취한 완성된 HTML5 문서구조 입니다.

(conditional comments에 대해서 잘 모르시는 경우 구글링을 통해서 살펴보세요)


1.

<link rel="stylesheet" href="common.css" type="text/css" />

문서와 표현을 분리한 웹사이트에서 가장 근본이 되는 css 정의가 담긴 css 파일입니다.

이 안에 흔히 reset css라 불리는 초기화 css를 넣으세요.

그리고 HTML5의 새로운 엘리먼트를 위한 아래의 css를 추가로 선언합니다.


article,aside,canvas,details,figcaption,figure, footer,header,hgroup,menu,nav,section,summary {
    display:block;
}

HTML5에서 추가된 엘리먼트들을 모두 block엘리먼트로 선언하는 css 입니다.


2.

<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->


html5.js는 IE에서 html5 엘리먼트들을 인식시키기 위한 스크립트가 들어있습니다.

conditional comments를 이용하여 IE9 이하 버전에서만 읽히도록 하였습니다.
(IE9는 HTML5를 지원합니다.)

이 js 파일을 인클루드 하시면 HTML5엘리먼트를 IE에서 잘 인식하게 됩니다.

단, 이 js파일은 반드시 <head>안에 넣으셔야 합니다.

홈페이지 최적화 기술중에서 script파일을 문서의 하단에 넣는 방법을 권유하고 있기에

script 태그를 모두 문서 하단에 넣으시는 분들도 있으실 텐데

html5.js 파일의 경우 HTML5엘리먼트를 IE에서 인식시키는 스크립트가 들어있고

이 스크립트는 반드시 IE가 엘리먼트를 렌더링 하기 전에 실행되어야 합니다.

그렇기 때문에 html5.js는 꼭 <head>안에 넣으셔야 합니다.


http://code.google.com/p/html5shiv/



3.

<!--[if lte IE 7]>
<script src="js/IE8.js" type="text/javascript"></script>
<![endif]-->


IE7을 포함한 그 이하 버전의 브라우저에 IE8.js 파일을 인클루드 합니다.

IE8.js는 IE7 이하 브라우저에서 좀 더 브라우저 웹표준 호환성을 준수하도록 스크립트로 적절한 작업을 수행합니다.

IE6이하버전에서 png의 고질적인 문제도 함께 해결해줍니다.


http://code.google.com/p/ie7-js/




4.

<!--[if lt IE 7]>
<link rel="stylesheet" type="text/css" media="all" href="css/ie6.css" />
<![endif]-->

ie7보다 낮은 버전의 브라우저를 위한 CSS를 별도로 담기 위해

ie6.css 파일을 만들고 이를 링크합니다.

이파일은 굳이 만드시지 않아도 상관없지만

향후 HTML5로 마크업을 하고 스타일링을 하고, 최신의 CSS를 사용할때

발생할수 있는 문제를 효율적으로 처리하고자 함입니다.

최악의 브라우저라 불리는 IE6을 위한 것이지요.





휴 이제 HTML5문서를 만들기 위한 준비가 모두 끝났습니다.

이제 이렇게 만든 문서안에 HTML5의 새로운 엘리먼트들을 활용하여

문서를 채우는 일만 남았네요.

수고하셨습니다~
728x90
반응형

'WEB2.0 > 웹표준' 카테고리의 다른 글

당신은 웹표준 개발자인가?  (17) 2010.07.07
safari에선 select에 text-align:center가 안된다  (0) 2010.06.28
HTML5의 새로운 태그를 IE에서도 사용하는 방법  (0) 2010.06.20
html5 브라우저 호환 준비하기  (0) 2010.06.19
HTML5로 문서의 구조 만들기  (2) 2010.06.18
댓글
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
TAG more
«   2024/11   »
일 월 화 수 목 금 토
1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30
글 보관함