IE8 이하에서 HTML5, CSS3 사용하기 (html5shiv, IE9.js, css3pie)
본문
html5를 사용하고 싶은데 구버전 IE 때문에 고민인가요?
<html5shiv>
홈페이지: http://code.google.com/p/html5shiv/
- HTML5 요소를 지원하지 않는 브라우저(IE8 이하)에서 해당 요소를 지원할 수 있게 해주는 라이브러리.
- 구버전 IE가 <header>, <nav>, <article> 등 HTML5 태그를 알아듣도록 해줌.
아래 javascript 라이브러리를 사용하면 고민이 해결됩니다.
IE8 이하 에서 HTML5, CSS3 사용하는 방법입니다.
<html5shiv>
홈페이지: http://code.google.com/p/html5shiv/
- HTML5 요소를 지원하지 않는 브라우저(IE8 이하)에서 해당 요소를 지원할 수 있게 해주는 라이브러리.
- 구버전 IE가 <header>, <nav>, <article> 등 HTML5 태그를 알아듣도록 해줌.
- 그누보드5에 기본으로 적용되어 있음
- 소스를 웹페이지의 <head></head> 부분에 넣음
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<ie7.js, ie8.js, ie9.js>
홈페이지: http://code.google.com/p/ie7-js/
- IE6, IE7, IE8이 제대로 알아듣지 못하는 CSS도 사용가능
홈페이지: http://code.google.com/p/ie7-js/
- IE6, IE7, IE8이 제대로 알아듣지 못하는 CSS도 사용가능
예) :hover, :first-child, :last-child, min-height, max-width, position:
fixed, margin:0 auto, opacity (투명도) 등
- 아래 소스를 웹페이지의 <head></head> 부분에 넣음
IE7 보다 낮은 버전을 위한 라이브러리 (IE7.js)
<!--[if lt IE 7]>
<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE7.js"></script>
<![endif]-->
<!--[if lt IE 7]>
<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE7.js"></script>
<![endif]-->
IE8 보다 낮은 버전을 위한 라이브러리 (IE8.js)
<!--[if lt IE 8]>
<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE8.js"></script>
<![endif]-->
<!--[if lt IE 8]>
<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE8.js"></script>
<![endif]-->
IE9 보다 낮은 버전을 위한 라이브러리 (IE9.js)
<!--[if lt IE 9]>
<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script>
<![endif]-->
<!--[if lt IE 9]>
<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script>
<![endif]-->
※ IE9.js을 사용하는 경우 IE7/IE8.js를 포함할 필요가 없음.
아래 처럼 IE7_PNG_SUFFIX=".png";를 넣으면 IE6에서
투명한 PNG 이미지도 사용가능
<!--[if lt IE 9]>
<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js">IE7_PNG_SUFFIX=".png";</script>
<![endif]-->
<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js">IE7_PNG_SUFFIX=".png";</script>
<![endif]-->
<respond.min.js>
- IE 8이하 브라우저에 미디어쿼리 인식
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->
<css3pie>
홈페이지: http://css3pie.com/
- CSS3 요소를 지원하지 않는 브라우저에서 CSS3 요소를 사용할 수 있게 해주는 라이브러리
- 구버전 IE에서도 둥근 외곽선, 그림자, 그라데이션 등의 CSS3 효과를 사용할 수 있도록 해줌.
- CSS3 요소를 지원하지 않는 브라우저에서 CSS3 요소를 사용할 수 있게 해주는 라이브러리
- 구버전 IE에서도 둥근 외곽선, 그림자, 그라데이션 등의 CSS3 효과를 사용할 수 있도록 해줌.
- 자세한 사용법은 홈페이지 참고.
<ie-css3>
ie8 이하에서 css3를 지원하게 해주는 라이브러리
댓글목록
등록된 댓글이 없습니다.
