[HTML] IE8 이하 브라우저에서 시맨틱 태그 사용하기
시맨틱 태그(semantic tag)란 HTML5부터 사용가능한 레이아웃 관련 태그로 <header> <section> <article> <aside> <footer> 등이 있다.
시맨틱 태그는 HTML4에서 <div>태그를 이용하여 만들던 웹의 레이아웃을 보다 쉽게하기 위한 표준이라고 생각하면 된다.
레이아웃을 구성하기에 굉장히 편리하지만 IE8 이하 브라우저에서는 HTML5를 지원하지 않아 시맨틱 태그를 사용할 수 없다는 문제가 있다.
아직 우리나라에는 IE8 이하 브라우저를 사용하는 경우가 많기 때문에 시맨틱 태그로 웹의 레이아웃을 구성했을 경우 태그를 인식하지 못하게 되는 문제가 있다.
그렇다면 시맨틱 태그로 레이아웃을 구성한 웹은 IE8 이하 브라우저에서는 제대로 표현할 수 없을까?
IE8 이하 브라우저에서 시맨틱 태그를 사용하기 위한 방법은 여러 방법이 있는데 그중 하나로는 HTML5shiv를 이용한 방법이 있다.
첫 번째 방법 CSS에서 블록 레벨로 정의
낮은 버전에 IE에서 시맨틱 블럭을 사용하는 첫 번째 방법으로는 CSS에서 태그의 레벨을 블럭 레벨로 정의하는 방법이다.
브라우저는 자신이 해석할 수 없는 태그를 만나면 인라인 태그로 취급한다.
그런데 인라인 레벨의 태그는 위치 값을 가질 수 없다. 즉, 레이아웃을 구성할 수 없다는 것이다.
하지만 CSS에서 인라인 레벨의 태그를 블럭 레벨의 태그로 바꾸는 방법이 있다.
바로 display: block; 속성을 이용하는 것이다.
display: block; 속성은 인라인 레벨의 태그를 블럭 레벨의 태그로 바꾸어주는 속성이다.
<style>
header, section, nav, article, footer {
display: block;
}
</style>버전이 낮아 태그를 인식할 수 없어 인라인 레벨로 바뀌어 위치 값을 가질 수 없다면 블럭 레벨의 태그로 바꾸어주면 된다.
두 번째 방법 시맨틱 태그 직접 정의하기
두 번째 방법으로는 자바스크립트를 이용하여 시맨틱 태그를 직접 정의하는 방법이다.
<script>
document.createElement('article');
document.createElement('section');
document.createElement('aside');
document.createElement('nav');
document.createElement('header');
document.createElement('footer');
</script>자바스크립트를 이용하여 직접 태그를 정의하면 처음부터 브라우저에서 직접 정의한 태그들을 지원하는 것처럼 태그를 사용할 수 있지만, 태그를 일일히 정의하는게 쉽지 않다는 단점이 있다.
세 번째 방법 HTML5 Shiv 사용하기
IE 이하 버전까지 고려해야 하는 경우 보통 이 방법을 사용한다.
html5shiv.js라는 자바스크립트 파일을 임포트하는 방법이다.
<script src="js/html5shiv.js"></script> https://github.com/aFarkas/html5shiv 해당 깃 허브에서 html5shiv.js를 다운 받을 수 있다.
혹은 필자가 올려둔 js파일을 다운받아 사용하면 된다.
브라우저들 마다 지원하는 기능의 차이를 브라우저 파편화라고 한다.
이렇게 브라우저 사이의 차이를 메꾸는 방법을 shim 또는 fallback이라 하며 html5shiv도 shim의 일종이다.
pollyfill은 파편화가 생기는 브라우저에 삽입하여 파편화를 해결해주는 자바스크립트로써 필요한 shim을 자동으로 끼워넣어주는 기능을 담당한다.
https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Brower-Polyfills 페이지에 자세한 내용이 나와있다.
본 포스팅은 필자가 공부한 내용을 정리한 것으로 오류가 존재할 수 있습니다.
참고 : Do it! HTML5 + CSS3 웹 표준의 정석 개정판