JavaScript 강좌 | Library > html5shiv - IE 8 이하에서 HTML5 태그 지원하게 해주는 라이브러리

HTML5에서 많은 태그가 추가되었습니다. 하지만, 그 태그들을 사용할 때 주의해야 할 점이 있습니다. IE8 이하 등 구버전의 웹브라우저에서는 인식하지 못한다는 것입니다.

웹브라우저가 해당 태그를 인식하지 못하면 인라인 요소처럼 처리를 합니다. 그리고 그 태그를 선택자로 하여 스타일을 작성할 수가 없습니다.

예를 들어 figure는 HTML5에서 추가된 태그입니다.

http://book.cmsfactory.net/JavaScript/library/html5shiv/html5shiv-01.html

<!doctype html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <title>JavaScript | html5shiv</title>
    <style>
      figure {
        border: 1px solid #333333;
      }
    </style>
  </head>
  <body>
    <span>Lorem ipsum dolor</span>
    <figure>Lorem ipsum dolor</figure>
    <span>Lorem ipsum dolor</span>
  </body>
</html>

IE 11에서 보면 다음처럼 블럭으로 나오고 테두리도 나옵니다.

하지만 IE8로 보면 다음처럼 아무런 효과도 없습니다.

이러한 문제를 해결해주는 것이 html5shiv입니다.

https://github.com/aFarkas/html5shiv

스크립트 삽입만으로 HTML5의 새로운 태그를 인식하고 스타일이 가능하게 해줍니다.

http://book.cmsfactory.net/JavaScript/library/html5shiv/html5shiv-02.html

<!doctype html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <title>JavaScript | html5shiv</title>
    <style>
      figure {
        border: 1px solid #333333;
      }
    </style>
    <!--[if lt IE 9]>
      <script src="html5shiv.js"></script>
    <![endif]-->
  </head>
  <body>
    <span>Lorem ipsum dolor</span>
    <figure>Lorem ipsum dolor</figure>
    <span>Lorem ipsum dolor</span>
  </body>
</html>

빨간색 코드를 추가한 후 IE8에서 보면 다음과 같이 줄바꿈이 되고, 테두리도 생깁니다.

하지만 모양이 완전이 같지는 않습니다. 새로이 스타일을 정의해서 모양을 맞춰줘야 한다는 불편은 있습니다.

참고로, 스크립트를 다운로드 받고 업로드하는 게 불편하다면 CDN을 이용할 수도 있습니다.

<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>

Created on 2014-12-26 13:23 | Updated on 2017-07-05 21:21

이 글을 공유하기

Kakao