N-Screen을 지원하는 미디어 쿼리에 대하여

HTML4와 CSS2에서는 다양한 미디어 타입에 따라 처리할 수 있는 스타일시트를 지원하고 있습니다. 
스마트폰, 태블릿, 스마트TV 등 다양한 화면의 크기를 가진 기기들이 배포됨에 따라 관심을 받게 된 것 같습니다. 

먼저 미디어 쿼리를 적용한 사이트(http://mediaqueri.es/)를 모아둔 곳을 한번 살펴보시죠.

 
One-Source Multi-Use 측면이나 모바일 웹 개발이 증가하면서 미디어 쿼리를 적절하게 활용하는 것이 필요할 것 같습니다. 
미디어쿼리에 대한 W3C의 문서는 현재 Candidate Recommendation 상태로 거의 현재 상태로 표준이 될 것 같네요.  

미디어쿼리는 CSS에 설정을 통해서 화면 크기 등에 따라 다른 형태로 보여줄 수 있도록 구현하는 것입니다.
이를 위해 media 라는 지시자를 통해서 CSS에 설정하게 됩니다.

이런 미디어 쿼리를 지정하는 방법은 크게 세가지가 있습니다. 

1. CSS 파일을 나누어서 가져오기 
<link rel="stylesheet" media="screen and (max-width:480px)" href="example.css">

2. <style> 태그에 media 속성으로 지정하기 

<style type="text/css" media="screen and (max-width:480px)">

</style>

3. CSS 내에 @media 사용하기 
@media all and (max-width:480px) { } 

이 중에서 일반적으로 CSS 내에 @media 태그를 통해서 적용하는 방법을 많이 사용하는 것 같습니다. 

미디어 쿼리에서는 미디어 타입을 지정해서 구분할 수 있습니다. 
위 예제에서 screen, all 과 같은 것들을 미디어 타입이라고 하는데요. 
여러가지 타입들을 지원하고 있지만 주로 사용하는 것은 다음과 같습니다. 

• all - 모든 미디어 타입
  
• screen - 컴퓨터 스크린을 위한 용도
  
• print - 인쇄 용도
  

미디어 타입과 더불어 다양한 조건들을 지정할 수 있습니다. 일부만 살펴보면 다음과 같습니다.
여러 조건들을 결합해서 활용도 가능합니다. 

• 가로 너비 - width, min-width, max-width
  
• 세로 높이 - height, min-height, max-height
• 단말기의 가로 너비 - device-width, min-device-width, max-device-width
  
• 단말기의 세로 너비 - device-height, min-device-height, max-device-height
  
• 화면 회전 - orientation 
  
• 화면 비율 - aspect-ratio, min-aspect-ratio, max-aspect-ratio
  

단, 미디어 쿼리로는 기능상의 분기는 어렵습니다. 이런 경우 기존의 자바 스크립트나 웹 프로그래밍을 통해서 처리해야 할 것 같습니다. 
또한 모바일 기기와 PC를 CSS 미디어쿼리로 구분하는 것이 아니라 기존처럼 UserAgent와 같은 값을 통해서 자바스크립트로 확인해야 합니다. 
미디어 쿼리는 단지 화면의 크기와 같은 속성을 통해서 처리하게 됩니다.
마찬가지로 orientation과 같은 속성도 모바일 뿐만 아니라 PC에서도 가로와 세로 길이에 따라서 구분하게 됩니다. 

미디어 쿼리의 설정에 대한 보다 자세한 사항은 다음 사이트들을 참조하면 됩니다. 
http://mydeute.com/txp/article/631 
미디어 타입과 조건들을 PC, iPhone, iPad, 스마트폰과 같은 디바이스별로 설정해 놓은 값들은 다음 사이트를 참고하면 도움이 되겠네요.
http://firejune.com/1633