반응형 웹 디자인을 위해 MediaQuerie를 사용하려고 합니다. 하지만 미디어 쿼리는 HTML5와 CSS3를 이용한다고 하네요. 그럼 IE9이하 브라우저에서는 실행이 안된다는 말입니다.
▩ html5 shim을 이용한 코드 추가
자바스크립트를 추가하여 새로운 HTML5와 CSS3를 인식하게 만들어줘야 합니다. 아래 코드를 <head></head>안에 작성하면 됩니다.
<head>
<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
▩ CSS Reset위한 코드 추가
추가된 HTML5 요소들이 잘 인식되기 위해서 아래 코드를 스크립트 또는 .CSS파일에 작성합니다. 하위 브라우저들이 추가된 요소들을 inline로 인식하기 때문에 block로 정의해줘야 한다고 합니다.
header, footer, section, article, aside, nav, hgroup, details, menu, figure, figcaption{display:block}
▩ Media Querie 위한 자바스크립트 다운
미디어쿼리를 하위 브라우저가 인식할 수 있도록 해주는 자바스크립트를 받아야합니다,.
이름은 Respond.js
다운 경로는 https://github.com/scottjehl/Respond
다운받고 코딩할 때 아래 코드 작성하여 연결합니다.
<script src="경로/respond.mion.js></script>
▩ Media Querie 미리보기(간단코드)
head안에 아래 같이 미디어쿼리를 작성하면 화면 크기에 따라 별도의 css를 불러와 적용합니다.
<link rel="Stylesheet" media="screen and (min-width:768px)" type="text/css" href="Styles/default768.css" />
<link rel="Stylesheet" media="screen and (min-width:1024px)" type="text/css" href="Styles/default1024.css" />
<link rel="Stylesheet" media="screen and (min-width:1024px)" type="text/css" href="Styles/default1024.css" />
'프로그램개발 > HTML5(웹앱,모바일웹,하이브리드웹)' 카테고리의 다른 글
| 부트스트랩 말고 또 다른 웹프론트앤드UI들... (0) | 2013.06.04 |
|---|---|
| 무료 이미지맵 프로그램 (0) | 2013.03.17 |
| 모바일 웹사이트 프레임워크 3종 비교 (0) | 2013.02.21 |
| 폰갭+디비연동 자료 참고 (0) | 2013.02.06 |
| 폰갭+안드로이드+이클립스 셋팅시 (0) | 2012.11.26 |