현재 HTML5 까지 나왔지만 오래된 브라우저들은 지원하지 않는 경우가 있습니다.
그렇기 때문에 HTML5 로 만들어진 사이트를 옛날 브라우저로 접속할 경우 제작자의 의도와 맞지 않게 사이트가 구성될 수 있기 때문에 HTML5 태그 지원 여부를 확인하고 지원하지 않는 경우 추가적인 설정이 필요합니다.
IE |
Edge |
Firefox |
Chrome |
Safari |
Opera |
IOS Safari |
Opera Mini |
Android Browseer |
Chrome for Android |
|
|
52 |
49 |
|
9.3 |
|
4.4 |
|
|
|
14 |
53 |
58 |
|
45 |
10.2 |
|
4.4.4 |
|
11 |
15 |
54 |
59 |
10.1 |
46 |
10.3 |
all |
56 |
59 |
|
16 |
55 |
60 |
11 |
47 |
11 |
|
|
|
|
56 |
61 |
TP |
48 |
|
|
|
|
|
|
|
57 |
62 |
|
|
|
|
|
|
(html5를 지원 현황)
브라우저는 자신이 인식하지 못하는 태그를 인라인 태그로 취급하기 때문에 html5 태그인 header, section, nav, article, footer 을 쓰기 위해서는
강제로 블록 레벨 태그로 설정해야합니다.
header, section, nav, article, footer{ display:block; } <!-- 태그들을 블록 레벨 태그로 만든다. -->
그리고 IE 8 이하 버전에서는 시맨틱 태그를 지원 하지 않기 때문에 자바스크립트를 이용해야한다.
<script>
document.createElement('article');
document.createElement('section');
document.createElement('aside');
document.createElement('nav');
document.createElement('header');
document.createElement('footer');
</script>
위 태그는 <head>와 </head> 사이에 넣는다.
또는 자바스크립트 파일을 이용 할 수 있는데
https://github.com/aFarkas/html5shiv 페이지 접속 후에 src 폴더를 클릭하고 html5shiv.js 파일을 저장하여 사용할 수 있다.
<!-- [if it IE 9]>
<script src="/html5shiv.js"><script>
<![endif] -->
위 태그는 head 또는 script 또는 body 에 삽입한다.
'Web development > HTML & CSS' 카테고리의 다른 글
| CSS 선택자(selector) 종류 정리 요약 (0) | 2017.07.26 |
|---|---|
| CSS 정의 및 특징 (0) | 2017.07.22 |
| HTML 이미지 맵 만들기(usemap) (0) | 2017.07.18 |
| CSS 초기화 파일(초기화 코드) (0) | 2017.07.15 |
| HTML 기본 구조(기본 틀, 초기설정, 세팅) (0) | 2017.07.15 |
