HTML5의 새로운 태그를 IE에서도 사용하는 방법
Html5 2011. 3. 30. 11:29지지난 포스팅에서 HTML5의 새 태그를 이용해서 구조화 하는 방법
그리고 지난 포스팅에서 HTML5의 새 태그를 이용해서 구조화한 뒤
새 태그들을 블록엘리먼트화 하는 단계까지 해보았습니다.
그런데 우리는 이렇게 완성된 코드를 실행해보고도 한가지 심각한 문제에 봉착하게 됩니다.
IE에서는 HTML5의 새로운 태그를 새 태그로 인식하지 못합니다.
IE6,7의 developer toolbar나 IE8의 개발자 도구로
작성한 문서의 DOM을 살펴보면
HTML5의 새 태그들이 열기태그는 열기태그대로
닫기태그는 닫기태그대로 따로 노는 꼴(?)을 볼 수 있습니다.
너무 걱정하지 마세요.
IE에서 이 문제를 해결하기 위한 간단한 방법이 있습니다.
아래의 스크립트를 <head>에 삽입하면 IE는 새로운 태그들을 정상적인 엘리먼트로 인식합니다.
IE는 createElement로 새로운 DOM 노드를 생성할때
이렇게 생성된 태그들을 정상적인 엘리먼트로 인식하기 때문입니다.
여러분이 사용할 새 HTML5 태그에 대해서 createElement를 실행해주세요.
<script type="text/javascript">
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>이라고 표현해도 무방합니다.
출처: 나를찾는 아이
http://trend21c.tistory.com/913
그리고 지난 포스팅에서 HTML5의 새 태그를 이용해서 구조화한 뒤
새 태그들을 블록엘리먼트화 하는 단계까지 해보았습니다.
그런데 우리는 이렇게 완성된 코드를 실행해보고도 한가지 심각한 문제에 봉착하게 됩니다.
IE에서는 HTML5의 새로운 태그를 새 태그로 인식하지 못합니다.
IE6,7의 developer toolbar나 IE8의 개발자 도구로
작성한 문서의 DOM을 살펴보면
HTML5의 새 태그들이 열기태그는 열기태그대로
닫기태그는 닫기태그대로 따로 노는 꼴(?)을 볼 수 있습니다.
너무 걱정하지 마세요.
IE에서 이 문제를 해결하기 위한 간단한 방법이 있습니다.
아래의 스크립트를 <head>에 삽입하면 IE는 새로운 태그들을 정상적인 엘리먼트로 인식합니다.
IE는 createElement로 새로운 DOM 노드를 생성할때
이렇게 생성된 태그들을 정상적인 엘리먼트로 인식하기 때문입니다.
여러분이 사용할 새 HTML5 태그에 대해서 createElement를 실행해주세요.
<script type="text/javascript">
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>이라고 표현해도 무방합니다.
출처: 나를찾는 아이
http://trend21c.tistory.com/913
'Html5' 카테고리의 다른 글
| html5 검사시 summary 오류 (0) | 2012.10.08 |
|---|---|
| iframe 사용 (0) | 2011.04.05 |
| html5 브라우저 호환 준비하기 (0) | 2011.03.30 |
| HTML5 문서의 구조 (0) | 2011.03.30 |
| HTML5 시작하기 (0) | 2011.03.30 |