티스토리 뷰
728x90
반응형
지지난 포스팅에서 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>이라고 표현해도 무방합니다.
그리고 지난 포스팅에서 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>이라고 표현해도 무방합니다.
728x90
반응형
'WEB2.0 > 웹표준' 카테고리의 다른 글
| safari에선 select에 text-align:center가 안된다 (0) | 2010.06.28 |
|---|---|
| 견고한 HTML5 문서 만들기 (2) | 2010.06.22 |
| html5 브라우저 호환 준비하기 (0) | 2010.06.19 |
| HTML5로 문서의 구조 만들기 (2) | 2010.06.18 |
| HTML5 시작하기 (0) | 2010.06.17 |
댓글
공지사항
최근에 올라온 글
최근에 달린 댓글
- Total
- Today
- Yesterday
링크
TAG
- CSS
- 어플리케이션
- 공모전
- 자바스크립트
- 앱스토어
- android
- JavaScript
- 아이디어
- 창업
- 네이버
- 트위터
- 아이폰
- 모바일
- 게임
- 애플
- 스마트폰
- 경진대회
- 앱
- AWS
- 안드로이드
- Apple
- php
- 벤처
- 웹표준
- 소프트웨어
- iPhone
- 구글
- 대학생
| 일 | 월 | 화 | 수 | 목 | 금 | 토 |
|---|---|---|---|---|---|---|
| 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 |
글 보관함