skip navigation

HTML5 & CSS3 하위브라우저 사용

01. html5shiv

01_1 소개

  • - 존 레식(John Resig)이 처음 개발하고 레미샤프(Remi Sharp)가 완성한 자바스크립트로서, 새로운 HTML5 섹셔닝 요소를 이전 버전의 IE6~9, Safari 4.x(iPhone 3.x)와 Firefox 3.x 에서도 작동하도록 해주는 라이브러리이다.

  • - 기본적인 createElement() 기술과 IE6~8에서 기술 적용을 위해 document.createElement와 document.createDocumentFragment를 monkeypatches와 함께 포함하고 있다. 또한 IE6-9, Safari 4.x and FF 3.x에 대한 기본적인 스타일링을 제공한다.

01_2 다운로드 경로
01_3 사용방법

  • - 다운로드한 파일의 dist 폴더에서 사용할 파일을 선택한 후 <head>부분에 아래와 같이 적용한다.

    <head>
    <!--[if lt IE 9]> <script src="/경로명/html5shiv.js"></script> <![endif]-->
    </head>

  • - 다운로드 하지 않고 풀경로를 적어 사용도 가능합니다.

    <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
02_1 Respond.js

  • - CSS3의 미디어 쿼리(Media Query)를 이용하면 웹브라우저 가로폭에 따라 다르게 모양을 꾸밀 수 있습니다. 하위 브라우저에서는 구현을 할 수 없는 문제점이 있습니다. respond.js를 통하여 구현이 가능합니다.

  • - https://github.com/scottjehl/Respond/ 에서 다운가능하며 해당 프로젝트 폴더에 업로드 한 뒤 사용하면 됩니다.

    <!--[if lt IE 9]> <script src="/경로명/respond.mion.js"></script> <![endif]-->