[웹표준] 반응형웹 미디어쿼리

Responsive web design

현한가지 웹페이지로 여러 Device (모바일, 태블릿, 데스크탑 등..) 장치로 접근이 가능한 반응형 웹디자인 입니다.

 

화면 너비에 따라 유동적으로 변하는 유동형 레이아웃(fluid layout)과 유연한 이미지(flexible image), 그리고 미디어 쿼리(media queries)가 어우러져서 특정 환경에 '최적화'된 방법이 아니라 환경에 반응하여 스스로 적응하는 방법
 
미디어 쿼리는 css3 속성으로서 지원되는 브라우저는 IE9, 파이어폭스, 오페라, 사파리, 크롬플러스 에서 사용됩니다. 
IE8 이하 버전에서는 사용이 불가능 합니다.

 

 

미디어쿼리가 무엇이며 어떤 역할을 하는가 ?

미디어쿼리는 사용자의 환경을 감지할 수 있는 css 속성,
CSS2 에서는 최초로 스크린의 종류(모니터 or 프린터 등)를 감지 할 수 있게 되었고 CSS3 에서 더 상세하게
변경되어 해상도, Landscape/Portrait (가로/세로) 감지가 가능하게 되었다.

 

 

미디어쿼리를 사용할 수 있는 브라우저

PC용 브라우져 : IE9, Firefox, safari, 크롬, 오페라 등.  (IE6 ~ IE8 은 지원되지 않는다.)
mobile 브랑우져 : ios browser , Android Browser

 

그렇다면 미디어쿼리를 쓰면 PC용/모바일용 페이지를 한벌로 만들 수 있나?

실무에 사용하려면 미디어쿼리 이외에 다른 프로세스도 필요하다.

 

현재 미디어쿼리를 사용하고 있는가?

PC용과 모바일용 페이지를 별도로 기획 / 제작하기 때문에 PC용에서는 사용하지 않고 있으며 모바일 전용으로 만들어진 페이지에서 미디어쿼리를 이용해 가로/세로 감지를 하고 있다.  

 

 

미디어쿼리를 사용할 수 있는 브라우저

사용하는 디바이스에 해상도에 따라서 레이아웃 구조와 사이즈는 변경이 되지만 화면에 표시되는 컨텐츠의 종류와 양은 변하지 않는다. 따라서 하나의 레이아웃만 생각해서 노출될 컨텐츠를 결정하게 되면 환경에 따라서 레이아웃이 변경 되었을 때 그리드가 어긋나는 등의 결과를 초래할 수 있다.

사용자 해상도에 따라서 컨텐츠를 숨기거나 보여줄 수 있는 방법이 없는 것은 아니지만 해상도에 따라서 컨텐츠를 제한하는 것은 사용자가 숨겨진 컨텐츠에 접근할 방법이 전혀 없기 때문에 접근성/사용성 측면에서 매우 좋지 않은 방법이다.

각 디바이스별로 사용자의 니즈가 다르다. 예를 들어 영화 정보를 제공하는 페이지를 만든다면 유선 사용자는 각 영화의 자세한 정보나 박스오피스 순위 등을 보길 원하겠지만 무선 사용자는 자기 주변에서 가장 가까운 극장 정보 같은 것들의 니즈가 더 클 것이다. 따라서 사용자 환경에 따라서 컨텐츠의 우선 순위를 변경하기 위하여 문서의 구조화 및 모듈화가 필요하다.

미디어쿼리는 모든 데이터가 내려 받아진 다음 브라우저가 처리하는 기술이다. 따라서 유무선 구분없이 모든 사용자에게 같은 양의 데이터가 전송된다.

 

1.속성으로 구분
   
스마트폰(가로/세로):
@media only screen and (min-device-width:320px) and (max-device-width : 480px) { /*style*/}
 
스마트폰 (가로):
@media only screen and (max-width : 320px) {/* Styles */}
 

iPad (가로/세로):
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {/* Styles */}
 
iPad (가로):  
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {/*Styles*/}
 
iPad (세로): 
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {/* Styles */}
 
데스크탑 브라우저 (가로):
@media only screen and (min-width : 1224px) {/* Styles */}
 
큰 모니터:
@media only screen and (min-width : 1824px) {/* Styles */}
 

iPhone4와 같은 높은 해상도:
@media only screen and (-webkit-min-device-pixel-ratio : 1.5),only screen and (min-device-pixel-ratio : 1.5) {/* Styles */}

 

 

2.파일로 구분

스마트폰 (가로/세로):
<link rel="stylesheet" href="smartphone.css" media="only screen and (min-device-width : 320px) and (max-device-width : 480px)">

스마트폰 (가로):
<link rel="stylesheet" href="smartphone-landscape.css" media="only screen and (min-width : 321px)">

스마트폰 (세로):
<link rel="stylesheet" href="smartphone-portrait.css" media="only screen and (max-width : 320px)">

iPad (가로/세로):
<link rel="stylesheet" href="ipad.css" media="only screen and (min-device-width : 768px) and (max-device-width : 1024px)">

iPad (가로):
<link rel="stylesheet" href="ipad-landscape.css" media="only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape)">

iPad (세로):

<link rel="stylesheet" href="ipad-portrait.css" media="only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait)">

데스크탑 브라우저 (가로):
<link rel="stylesheet" href="widescreen.css" media="only screen and (min-width : 1224px)">

큰 모니터:

<link rel="stylesheet" href="widescreen.css" media="only screen and (min-width : 1824px)">

iPhone4와 같은 높은 해상도:
<link rel="stylesheet" href="iphone4.css" media="only screen and (-webkit-min-device-pixel-ratio : 1.5), only screen and (min-device-pixel-ratio : 1.5)">