티스토리 뷰
반응형
시맨틱 태그의 브라우저 호환과 사용 방법
- 시맨틱 태그를 이용하면 웹 표준에 맞는 문서를 편리하게 만들 수 있지만 모든 웹 브라우저에서 시맨틱 태그를 사용할 수 있는 건 아닙니다.
IE8 이하에서 시맨틱 태그를 사용하려면?
- 브라우저별 시맨틱 태그 지원 여부를 확인하면 인터넷 익스플로러(IE) 8.0 이하 버전은 지원되지 않음을 알 수 있습니다. 2016년 1월 이후 마이크로소프트에서 IE11을 제외한 다른 인터넷 익스플로러에 대한 지원을 중단했기 때문입니다.
- 하지만 아직 국내에는 IE8 사용자가 꽤 많기 때문에 IE8이하 버전에서 시맨틱 태그 사용법에 대한 방안이 필요합니다.
1. CSS에서 블록 레벨로 정의하기
- 첫 번째 방법은 CSS에서 블록 레벨로 정의하는 방법입니다.
- 브라우저는 자신이 인식하지 못하는 태그를 만나면 인라인 태그로 취급합니다. 이런 태그는 위치값을 가질 수 없으므로 태그를 이용해 레이아웃을 만드는 것은 불가능합니다.
- 그래서 HTML5 시맨틱 태그를 인식하지 못하는 브라우저에서는 오른쪽과 같은 소스를 <style>태그와 </style>태그 사이에 입력해 자신만의 영역을 가질 수 있는 블록 레벨로 바꾸어 주어야 합니다.
예) : header, section, nav, article, footer {display : block;}
2. 시맨틱 태그 직접 정의하기
- 브라우저에서 태그들을 이해할 수 있도록 자바스크립트를 이용해 태그들을 만들어 줄 수 있습니다.
- 아래 예) 의 스크립트를 <head>와 </head> 태그 사이에 넣어 주면 마치 웹 브라우저에서 시맨틱 태그들을 지원하는 것처럼 태그들을 사용할 수 있습니다.
- 하지만 필요한 태그들을 빠뜨리지 않고 처음에 모두 정의하는 것이 쉽지 않다는 단점도 있습니다.
예) :
<script>
document.createElement('aricle');
document.createElement('section');
document.createElement('aside');
document.createElement('nav');
document.createElement('header');
document.createElement('footer');
</script>
<script>
document.createElement('aricle');
document.createElement('section');
document.createElement('aside');
document.createElement('nav');
document.createElement('header');
document.createElement('footer');
</script>
3. HTML5 Shiv 사용하기
- 자바스크립트를 이용해 HTML5 태그를 직접 정의해 사용하는 것은 너무 번거롭습니다. 이 과정을 간단히 만드는 방법이 HTML5 Shiv를 사용하는 것입니다.
- <script> 태그 사이에 태그를 직접 정의하는 과정을 자바스크립트 파일로 만들어 사용할 수 있도록 만든 것이 HTML5 Shiv입니다.
- html5shiv.js 파일은 인터넷에서 다운로드한 후 소스 안에 링크해 사용합니다.
- 파일은 다운로드 하려면 https://github.com/aFarkas/html5shiv 페이지에서 설명 내용 중에 있는 [latest zip package] 링크를 클릭합니다. 다운로드된 파일의 압축을 푼 후 src 폴더 안의 html5shiv.js 파일을 원하는 폴더로 복사해 사용하면 됩니다.
- 예를 들어 'js' 폴더에 html5shiv.js 파일을 저장했다면 <head>와 </head> 사이에 아래와 같은 소스를 추가하면 IE8 이하 버전에서도 시맨틱 태그를 인식할 수 있습니다.
예) :
<!-- [if lt IE 9]
<script src="js/html5shiv.js"></script>
<![endif] -->
<!-- [if lt IE 9]
<script src="js/html5shiv.js"></script>
<![endif] -->
브라우저 사이의 차이를 메꾸어 주는 폴리필(pollyfill)
- 최신 브라우저라도 HTML5 표준 기능들이 어떤 브라우저에서는 되고 어떤 브라우저에서는 안 됩니다. 이것을 브라우저 파편화(browser fragmentation)라고 부르는데 이런 브라우저 파편화를 줄이고 비슷하게라도 같은 결과를 만들기 위한 방법을 통틀어 심(shim) 또는 폴백(fallback)이라고 부릅니다. html5shiv도 shim의 일종입니다.
- 폴리필(polyfill)은 파편화가 생기는 브라우저에 삽입하는 자바스크립트로 브라우저를 스스로 진단해 필요한 shim을 자동으로 끼워 넣어 줍니다. 개발되어 있는 폴리필들은 상당히 많은데 HTML5 Cross Browser Pollyfills https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-Pollyfills 페이지를 참고하면 각 기능별로 폴리필이나 심, 폴백을 한눈에 볼 수 있습니다.
반응형
UP NEXT : 코딩 배우기 - 코딩 첫걸음 - 코딩 기초/HTML
댓글
© 2019 Eun's