JavaScript 강좌 | Library > Respond.js - IE8 이하에서 미디어 쿼리(Media Query)를 사용하게 해주는 라이브러리

CSS3의 미디어 쿼리(Media Query)를 이용하면 웹브라우저 가로폭에 따라 다르게 모양을 꾸밀 수 있습니다.

웹사이트에 접속하는 기기에 따라 적절하게 모양을 만들어주는 반응형 웹디자인에 필수적인 기술입니다.

하지만 문제가 있습니다. IE8 이하에서는 CSS3를 사용할 수 없다는 것이죠.

이를 해결해주는 것이 Respond.js입니다. 구버전의 인터넷 익스플로러에서 미디어 쿼리를 사용할 수 있게 해줍니다.

스크립트 파일을 다운로드 받아 사용할 수도 있고, 다음의 코드를 HTML 문서에 넣어 사용할 수도 있습니다.

<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>

간단한 예제는 다음과 같습니다.

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

HTML

<!doctype html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <title>JavaScript | respond</title>
    <link rel="stylesheet" href="style.css">
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <h1>Lorem ipsum dolor</h1>
  </body>
</html>

CSS

@media (min-width: 300px) {
  h1 {color: red;}
}

Respond.js를 사용하지 않을 때는 글자가 검정색이지만, 스크립트를 사용하면 미디어쿼리를 해석하여 300px 이상에서 빨간색으로 나옵니다.

주의할 점은 CSS 파일을 HTML 파일과 분리해야 적용된다는 것입니다. 다시말해서 HTML 문서 안에

<style>
  ...
</style>

태그로 스타일링하면 제대로 작동하지 않습니다.

또한 HTML 파일과 CSS 파일이 다른 도메인에 속해있으면 작동하지 않습니다. 이 때는 좀 다른 방법으로 연결을 시켜야 합니다.

이러한 크로스 도메인 문제를 해결하는 방법은 Respond.js 홈페이지에 설명되어 있습니다.

Created on 2015-01-31 01:19 | Updated on 2017-04-21 10:15

이 글을 공유하기

Kakao

기초 강좌