[CSS] 반응형웹페이지의 필수 - 미디어쿼리 활용

 

반응형웹페이지에서 제일처음 고려해야할건 역시나 익스플로러 7과 익스플로러8 인것 같습니다. 왜냐하면 웹표준을 따르지도 않을 뿐더러 플러그인을 통한 반응형지원이 완벽하지가 않아서 디자이너/퍼블리셔분들이 항상 고생하고 계십니다.

 

반응형 웹페이지 사용은 간단합니다. 각각 디바이스 기기의 해상도에 맞춰서 화면 크기를 잡아주는 것이죠.

 

반응형 웹페이지는 크게 3가지 정도로 나눌수 있겠네요.

디바이스 해상도 기준을 320px, 1024px 로 잡고 320px 이하면 모바일, 1024px 이하면 타블렛, 이상이면 데스크탑 이렇게 말이죠.

크게 개념을 잡으면 간단하게 나뉘어지지만. 스마트폰도 레피나 해상도 지원되는것도 있고, 타블렛도 일반 피씨 해상도 넘어선지 오래입니다. 게다가 모바일은 가로세로 전환이 있죠. 그래서 모바일기기의 가로세로버전까지 생각해서 작업을 해야되기 때문에 세부적으로는 참 힘들죠.

더 파고들면 아이콘이 미세하게 어긋나거나, 폼버튼이 작동을 안하거나 파이어폭스에서는 보이는데 익스플로러에 안보인다던지... 고려할게 너무 많습니다.

 

반응영 디자인을 쉽게 하고 싶으시면 CSS 프레임워크 부트스트랩도 있습니다. 이미 디바이스 기기의 해상도 별로 최적화가 되어 있어서 따로 설정할 필요도 없죠.

 

하지만 기본 개념을 익히기 위해서 미디어 쿼리에 대해서 설명해보겠습니다.

반응형을 염두해 두고 개발진행을 하려면 미디어 쿼리 지원에 대해서 생각해 보아야 합니다.

 

익스 8이하 버전은 미디어 쿼리를 공식적으로 지원을 안합니다. 익스플로러 8 이하 혹은 그이상버전일지라도 8호환성으로 브라우저를 사용하면 미디어 쿼리가 동작을 안합니다.

 

IE TESTER 같은 브라우저 호환성 툴도 있지만 직접 설치해서 사용해보면 또 보이는게 달라보이니 크로스브라우징을 하신다면 수고스럽더라도 브라우저마다 꼼꼼히 테스팅을 해야합니다.

아래는 반응형 CSS 참고 소스입니다.

당연히 익스8 이하는 동작을 안하며 구동해야 할 필요가 있으면 동작을 할수 있게 하는 스크립트 파일(respond.js)을 로드해주셔야 합니다. 참고로 로컬상태에서는 동작안하니 적용이안된다고 실망하지 마시고 서버환경을 구축하셔서 테스트 하셔야 됩니다.

 

참고로 respond.js는 @import 를 지원하지 않습니다. 따라서  layout.css 파일은 다른 css에서 임포트하면 작동을 안합니다.

 

아래소스는 미디어쿼리로 각각의 디바이스 해상도를 강제로 맞춰둔 코드입니다. layout.css 외 default.css 파일을 하나 만드셔서 기본 디바이스 기본 크기를 정하시고, 반응형에 따라 각각의 디바이스크기를 layout.css에 지정하는 방식으로 사용하시면 됩니다.

 

소스는 아주 노가다성(디바이스 WIDTH크기를 기기해상도마다 지정해주어야합니다.)이며, 미디어쿼리의 동작여부를 테스트하기에 좋으실겁니다.

 

미디어쿼리 참고예제 layout.css

 

@charset "utf-8";
@charset "euc-kr";

 

/*==============================
반응형 레이아웃 구성 by 파미유
================================*/

/* divice 해상도에 따른 이미지 크기 조정 - 필요할 경우 사용 */
@media screen and (-webkit-min-device-pixel-ratio:1.5){} /* 안드로이드 */

/*==================
스마트폰 기본 세팅
====================*/
/*smartphones ( portrait )*/
@media all and (max-width:320px){}

/*smartphones ( landscape )*/
@media all and (min-width:321px) and (max-width:360px){}

/*smartphones ( landscape )*/
@media all and (min-width:361px) and (max-width:375px){}

/*smartphones ( landscape )*/
@media all and (min-width:376px) and (max-width:414px){}

/*smartphones ( landscape )*/
@media all and (min-width:415px) and (max-width:480px){}

/*tablet( portrait )*/
@media all and (min-width:481px) and (max-width:533px){}

/*tablet ( portrait )*/
@media all and (min-width:534px) and (max-width:640px){}

/*tablet ( portrait )*/
@media all and (min-width:641px) and (max-width:768px){}

/*tablet ( landscape )*/
@media all and (min-width:769px) and (max-width:1024px){}

 

/*=================
데스크탑 기본 세팅
===================*/
@media all and (min-width:1025px){}

 

첨부파일 다운 :layout.css