CSS3 Media Queries 미디어쿼리-반응형페이지만들기

요즘은 PC,태블릿,모바일등 각종기기를 통한 인터넷접속이 일상생활화가 되어가고 있는가운데 아직까지도 PC버전 모바일버전 따로 작업하는 사이트, 쇼핑몰들이 너무나도 많습니다.

물론필요에 의해서 따로 작업하는게 도움이 될 때도 있습니다만. 작업자에게는 너무나도 큰 고통과 두번의 작업을 거쳐야하는 불편함이 많습니다.

그래서 모든 기기에 빠르게 맞춰 대응할 수 있도록 만들어 진것이 미디어쿼리입니다.

물론 미디어쿼리도 반응형을 생각해서 디자인해야하고 CSS도 복잡해 질 수 있다는 단점이 있지만 PC따로 MOBILE따로 작업하는것보단 훨씬 빠르고 간편하다는 것입니다.

먼저 해상도에대해 간단하게 짚고넘어가보겠습니다.

크롬 요소검사쪽으로가면 위와같이 해상도 탭이 있는데요. 다음과 같은 종류를 나타냅니다.

4K-2560px / Laptop L - 1440px / Laptop - 1024px /

Tablet - 768px /

Mobile L - 425px / Mobile M - 375px / Mobile S - 320px /

꼭 정해진 것은 아니고 평균적으로 이정도 인것같습니다.

그래서 반응형이란 이렇습니다. PC버전에 맞춰서 디자인하고 코딩했지만 브라우저 width=가로사이즈에 따라서 CSS 디자인을 변경하여 사용자의 UI들이 각 기기에 맞춰 편리하게 보일 수 있도록 하는것이 반응형의 목적이지요. 반응형에대해 잘못인식하고 계신분들은 다 따로만드는줄 알고계신분들도 많습니다. 요즘 제작되는 사이트들 대부분이 반응형이지만 그렇지 않은 사이트들도 아직은 너무나도 많습니다.

본론으로 들어가봅시다.

CSS3 미디어 타입

ALL - 모든 미디어 또는 기기에 해당됩니다.

PRINT - 프린터사용시 해당됩니다.

SCREEN - 스크린에 사용되는것 PC화면,태블릿화면,모바일화면등

보통 프린트나 스크린을 따로 사용하진 않지만 쓰는경우도 있습니다.

하지만 ALL로 표기해놓는게 더 효과적입니다.

@media all and (max-width: 425px) {
}

위에 소스와 같이 CSS 파일에 추가하여 작업하면 ( ) 에 명시해둔 사이즈에서 부터는 { } 안에 표기된 CSS 가 적용되게 되는것입니다.

한가지 더 말씀드리면 (max-width) , (min-width) 두가지가 있는데요.

max는 0~425px 까지 { } 안에 들어가는 CSS를 적용합니다.

min은 425부터 { } 안에 들어가는 CSS를 적용합니다.

착각하시고 왜 안되지 헤매지 마시고 min,max를 잘 보시길 바랍니다.

미디어쿼리를 사용해보도록 하겠습니다.

보통 아래와 같이 메뉴들이 왼쪽 컨텐츠 부분이 가운데 오게 되어있습니다.

• 니모1
• 니모2
• 니모3

니모 홈페이지에 오신것을 환영합니다.

컨텐츠내용입니다.

width - 480 화면 예제

미디어 쿼리를 사용하여 화면이 480이하에선 아래와 같이 바뀝니다.
 

• 니모1
• 니모2
• 니모3

니모 홈페이지에 오신것을 환영합니다.

컨텐츠내용입니다.

html

<div id="sample_wrap">

 <div id="sample_side">

  <ul>

   <li>니모1</li>

   <li>니모2</li>

   <li>니모3</li>

  </ul>

 </div>

 <div id="sample_contents">

 <h1>니모 홈페이지에 오신것을 환영합니다.</h1>

 <p>컨텐츠내용입니다.</p>

 </div>

</div>

CSS

#sample_wrap {

  overflow: auto;

  border: 1px solid #ccc;

  padding: 5px;

}

#sample_side {

  width: 200px;

   float: left;

}

#sample_side ul li {background: #f9f9f9;

    border: 1px solid #ccc;

    list-style-type: none;

    margin: 5px;

    padding: 5px;

}

@media all and (max-width:480px){

#sample_side {float:none; width:auto;}

}

크게 바꾼건 CSS 한줄밖에 없습니다. 하지만 보기에도 왠지 그 해상도에 맞는 디자인이 된것같습니다. 이런형식으로 기획부터 디자인 구상까지 요즘의 웹트렌드 변화 아닌가 생각합니다.