ie에서는 html5의 요소를 제대로 표현하지 못하기때문에 createElement메서드를 통해서 활성화 과정이
필요한데 이러한 요소들을 ie에서 사용할 수 있도록 미리 제작되어신 스크립트를 사용하면 가능합니다.
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
스크립프파일을 연결하고 IE에서는 HTML5의 새로운 태그를 새 태그로 인식하지 못합니다.
IE6,7의 developer toolbar나 IE8의 개발자 도구로 작성한 문서의 DOM을 살펴보면
HTML5의 새 태그들이 열기태그는 열기태그대로 닫기태그는 닫기태그대로 따로 노는 꼴(?)을
볼 수 있습니다.
너무 걱정하지 마세요. IE에서 이 문제를 해결하기 위한 간단한 방법이 있습니다.
아래의 스크립트를 <head>에 삽입하면 IE는 새로운 태그들을 정상적인 엘리먼트로 인식합니다.
IE는 createElement로 새로운 DOM 노드를 생성할때 이렇게 생성된 태그들을 정상적인 엘리먼트로
인식하기 때문입니다. 여러분이 사용할 새 HTML5 태그에 대해서 createElement를 실행해주세요.
<script>
document.createElement('header');
document.createElement('footer');
document.createElement('section');
document.createElement('aside');
document.createElement('nav');
document.createElement('article');
</script>
이 스크립트를 삽입한 후 문서의 DOM을 확인하시면
이렇게 구조화가 잘 된 것을 볼 수 있습니다.
여기서 한가지 팁을 더 알려드리자면 우리가 자바스크립트를 사용할때 흔히 쓰는 태그 <script>의
속성인 type="text/javascript"가 HTML5에서는 optional 속성과 기본 값이 되었습니다.
그렇기 때문에
<script type="text/javascript">을 <script>로 간단히 표현하셔도 무방합니다.
그렇다면 우리가 CSS를 넣을 때 쓰는 <style> 태그의 속성인 type="text/css"는 어떻게 되었을까요?
네 정답입니다.
HTML5에서는 style 태그의 type속성 역시 optional속성과 기본값으로 text/css를 취하기 때문에
<style type="text/css">를 <style>이라고 표현해도 무방합니다.
'Web Programing! > HTML / CSS' 카테고리의 다른 글
| [CSS] input박스 한/영 변환시키기 (0) | 2011.09.10 |
|---|---|
| [CSS] 테이블 크기 강제 고정 (0) | 2011.09.10 |
| [HTML] 이미지 파일첨부시 업로드 이미지 미리보기 (IE8, Firefox 3) (0) | 2011.09.10 |
| [CSS] ie6에서 img 태그 사용시 하단에 공백이 생길 경우 (0) | 2011.09.06 |
| [CSS] div사용시 공백제거 (0) | 2011.09.06 |
| [CSS] div안에서의 수직정렬 (0) | 2011.09.06 |
| [CSS] background:url()로 된 이미지 링크걸기 (0) | 2011.09.06 |
