본문 바로가기
# Work/└ html5&css3

ie에서 html5 & css3 활용하기

by 호정찐 2015. 3. 20.
반응형
html5를 사용하고 싶은데 구버전 IE 때문에 고민인가요?
아래 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]-->
 
 
<ie7.js, ie8.js, ie9.js>
홈페이지: 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]-->
 
IE8 보다 낮은 버전을 위한 라이브러리 (IE8.js)
<!--[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]-->
※ IE9.js을 사용하는 경우 IE7/IE8.js를 포함할 필요가 없음.
 
 
아래 처럼 IE7_PNG_SUFFIX=".png";를 넣으면 IE6에서 투명한 PNG 이미지도 사용가능
 
 
<respond.min.js>
- IE 8이하 브라우저에 미디어쿼리 인식
<![endif]-->
 
<css3pie>
홈페이지: http://css3pie.com/ 
- CSS3 요소를 지원하지 않는 브라우저에서 CSS3 요소를 사용할 수 있게 해주는 라이브러리
- 구버전 IE에서도 둥근 외곽선, 그림자, 그라데이션 등의 CSS3 효과를 사용할 수 있도록 해줌.
- 자세한 사용법은 홈페이지 참고.
 
<ie-css3>
ie8 이하에서 css3를 지원하게 해주는 라이브러리





[출처] http://overcome26.tistory.com/57


반응형
저작자표시 비영리 변경금지

'# Work > └ html5&css3' 카테고리의 다른 글

html5 audio tag  (0) 2015.08.18
모바일웹 아이폰 가로 회전시 폰트가 커지는 문제.  (0) 2015.05.29
youtube 자바스크립트 API 활용 (부트스트랩 모달시 활용)  (0) 2014.11.25
text-rendering: optimizeLegibility;  (0) 2014.11.24
브라우저 크기에 맞게 css 폰트사이즈 유동적으로..  (0) 2014.11.20

관련글

티스토리툴바