[HTML+CSS][HTML5와 시맨틱태그] 03 - IE8 이하 버전에서 시맨틱태그 사용하기

[HTML+CSS][HTML5와 시맨틱태그] 02 - 시맨틱 태그의 종류

[HTML+CSS][HTML5와 시맨틱태그] 01 - HTML5 문서 [HTML+CSS][CSS 레이아웃] 03 - 표 스타일 [HTML+CSS][CSS 레이아웃] 02 - 다단으로 편집하기 [HTML+CSS][CSS 레이아웃] 01 - CSS 포지셔닝과 주요 속성들 [HTML+..

onelight-stay.tistory.com

우리가 배우고 있는 시맨틱 태그는

대부분의 웹 브라우저에서 사용이 가능하기는 하지만

인터넷 익스플로러(IE) 8 이하 버전에서는

사용이 어렵다고 한다.

그러면 IE8 이하 버전에서도

시맨틱 태그를 사용할 수 있는 방법에 대해서 알아보자.

새로운 시맨틱 태그 지원 상황

시맨틱 태그를 이용하면

웹 표준에 맞는 문서를 편리하게 사용할 수 있지만
인터넷 익스플로러(IE) 8에서는 지원하지 않으며,

모바일용 브라우저 오페라 미니에서는 일부만 지원된다.

그래서 시맨틱 태그의 지원 항목이

어느 정도까지인지를 확인하고 싶다면,

caniuse 사이트에 접속해 [Index of features]를 클릭하면

HTML5 관련 기능들이 모던 브라우저에서 얼마나 지원하는지를 확인할 수 있다.

Can I use... Support tables for HTML5, CSS3, etc

About "Can I use" provides up-to-date browser support tables for support of front-end web technologies on desktop and mobile web browsers. The site was built and is maintained by Alexis Deveria, with occasional updates provided by the web development commu

caniuse.com

또한 [HTML5 sematic elements]를 클릭하면

HTML5의 시맨틱 태그 지원 여부를 확인할 수 있다.

IE8 이하에서 시맨틱 태그 사용

브라우저별로 시맨틱 태그 지원 여부를 확인하면

인터넷 익스플로러(IE) 8.0 이하 버전은 지원이 되지 않는다.

이를 사용하기 위해 할 수 있는 방법들에 대해서 알아보자.

- CSS에서 블록 레벨로 정의 -

브라우저는 자신이 인식하지 못하는 태그를 만날 경우

인라인 태그로 취급하게 되는데
이런 경우는 위치 값을 가질 수 없어

해당 태그로 레이아웃을 만드는 것이 불가능하다.

그러므로 HTML5 시맨틱 태그를 인식하지 못하는 브라우저 같은 경우

블록 레벨로 정의해 주어야 한다.

- 시맨틱 태그 직접 정의 -

브라우저에서 태그들을 이해할 수 있도록

자바스크립트를 이용해 태그를 만들어 주는 것으로
<head>와 </head> 사이에 입력하면 웹 브라우저들이

시맨틱 태그들을 지원하는 것처럼 태그들을 사용할 수 있다.

하지만 필요한 태그들을 빠뜨리지 않고 입력해야 하므로

처음에 모드 정의하는 것이 쉽지 않다.

- HTML5 Shiv -

가장 일반적인 방법으로

html5shiv.js 파일을 인터넷에서 다운로드를 한 후

소스 안에 링크해 사용해 주면 된다.

파일은 해당 사이트에서 [latest zip package] 링크를 클릭해

다운로드와 압축 풀기를 진행한 후

src 폴더 안의 html5shiv.js 파일을

원하는 폴더로 복사해 사용하면 된다.

aFarkas/html5shiv

This script is the defacto way to enable use of HTML5 sectioning elements in legacy Internet Explorer. - aFarkas/html5shiv

github.com

<head> </head> 태그 사이에 입력해 주면

IE8 이하 버전에서도 시맨틱 태그를 인식할 수 있다.

해당 소스는

' IE9 보다 이전 버전이라면, 실행하라'

라는 의미이다.

브라우저 사이의 차이를 메꾸어 주는 폴리필(pollyfill)

최신 브라우저임에도 불구하고

HTML5 표준 기능들이 어떤 브라우저에서는 되고
어떤 브라우저에서는 안될 수 있는데

이러한 현상을 파편화(browser fragmentation)이라고 한다.

이를 해결하기 브라우저 파편화를 줄이고

비슷하게라도 같은 결과를 만들기 위한 방법을 통틀어

심(shim)
또는
폴백(fallback)이라고 한다.

폴리필은 파편화가 생기는 브라우저에 삽입하는 자바스크립트로

브라우저를 스스로 진단해 필요한 shim을 자동으로 끼워 넣어 준다.

HTML5 Cross Browser Pollyfills 페이지를 참고하면

각 기능별로 폴리필이나 심, 폴백을 한눈에 볼 수 있다.

Modernizr/Modernizr

Modernizr is a JavaScript library that detects HTML5 and CSS3 features in the user’s browser. - Modernizr/Modernizr

github.com

( 해당 사이트 말고도 개발되어 있는 폴리필은 상당히 많으니 참고 바람)

시맨틱 태그는 단순히 입력만 하면 실행되는 줄 알았는데

8 버전 이하로는 실행이 안되고

실행시키기 위해 다양한 방법을 이용해야 한다는 것이

조금 복잡하지만 실전에서는 꼭 필요한

과정인 것 같다.

그러니까 방법을 아는 것도 매우 중요하지만

8 버전 이하로는 시맨틱 태그가 실행되지 않을 수 있다는 것을

명심해야겠다.

< 참고 >

Do it! HTML5+CSS3 웹 표준의 정석

※ 해당 글은 습득 목적으로 작성된 글입니다 ※

저작자표시

'개인공부 > HTML5 + CSS3' 카테고리의 다른 글

[HTML+CSS][HTML5와 멀티미디어] 02 - 오디오 & 비디오 재생하기 (0)	2020.07.16
[HTML+CSS][HTML5와 멀티미디어] 01 - 웹과 멀티미디어 (0)	2020.07.15
[HTML+CSS][HTML5와 시맨틱태그] 02 - 시맨틱 태그의 종류 (0)	2020.07.13
[HTML+CSS][HTML5와 시맨틱태그] 01 - HTML5 문서 (0)	2020.07.12
[HTML+CSS][CSS 레이아웃] 04 - 연습문제 (0)	2020.07.11

IT Information Notebook

[HTML+CSS][HTML5와 시맨틱태그] 03 - IE8 이하 버전에서 시맨틱태그 사용하기

새로운 시맨틱 태그 지원 상황