CSS 3.0 - 미디어 쿼리(반응형 웹 만들기)

  태블릿 PC나 모바일 기기가 늘어남에 따라 모바일 웹에 대한 관심이 높아지고 있습니다. 그에 따라 각 기기별 해상도에 맞춰 레이아웃을 다시 짜야할 필요성이 늘어났습니다. PC로 봤을 때는 깔끔하고 예뻤던 디자인이 모바일 기기로 보면 해상도 차이로 불편한 디자인이 되버렸습니다. 이러한 점을 해결하고자 CSS 3.0부터는 미디어 쿼리를 사용하여 여러 조건 별 디자인을 적용하는 것이 가능해졌습니다. 미디어 쿼리를 적용하는 것에는 4가지 방법이 있습니다. 

 1) Link

<link href = "CSSfile0.css" media = "screen and (max-width:512px)" rel = "stylesheet" />
<link href = "CSSfile1.css" media = "screen and (min-width:513px) and (max-width:768px)" rel = "stylesheet" />
<link href = "CSSfile2.css" media = "screen and (min-width:769px) and (max-width:1024px)" rel = "stylesheet" />
<link href = "CSSfile3.css" media = "screen and (min-width:1025px)" rel = "stylesheet" />

 첫 번째는 link를 이용하는 방법입니다. 조건에 따라 각자 다른 css 파일을 불러오도록 되어 있습니다.

 2)Style

<style type="text/css" media="screen and (min-width: 512px) and (max-width:1024px)">
/* style 작성 */
</style>
 

두 번째는 style 태그 안에 직접 작성해주는 방식입니다.

 3)@import

<style>
    @import url(cssfile.css) screen and (min-width: 512px) and (max-width: 1024px);
</style>
 

 세 번째는 style 태그 안에서 import를 통해 css 파일을 불러오는 방식입니다.

 4)CSS 파일

@media screen and (min-width:512px) and (max-width:1024px) {
    /* style 작성 */
}

 마지막은 CSS파일에 직접 조건을 적어주는 방식입니다. 프로젝트를 하실 때 가장 편한 방식이라고 생각되는 방식을 골라서 사용하시면 될 것 같습니다. 문법에 대해 설명하자면 media에 뒤에 붙는 screen이 미디어 타입을 결정하는 부분입니다. CSS 3.0에서 제공하는 미디어 타입은 다음과 같습니다.

대충 이정도인데, 사실 다 차치하더라도 all이나 screen 정도만 알고 있으면 되겠습니다. screen으로도 모바일까지 다 커버 가능합니다. 그 이유는 조건문이 있기 때문입니다. 위에 작성 된 예시를 보시면 screen and 뒤에 min-width나 max-width를 볼 수 있는데 이 것들이 미디어 쿼리의 조건입니다.  이 외에도 여러가지 조건들(화면 비율, 색상당 비트수 등..)이 있는데 사실 뭐 min-width나 max-width외에 그렇게 필요하다고 생각하지는 않아서 별도로 작성하진 않겠습니다. 작성할까 했는데 감기 때문에 머리가 멍해서 적기가 싫어지네요. 더 많은 조건들이 궁금하신 분들은 밑에 있는 링크로 들어가서 확인하시면 될 것 같습니다. 제가 작성한 것보다 훨씬 상세한 설명이 적혀 있습니다.

http://linuxism.tistory.com/1520