미디어 쿼리

미디어 쿼리(media queries)는 화면 해상도(예: 모바일 및 데스크톱 화면 크기)와 같은 다양한 조건에 따라 콘텐츠 렌더링을 적응시키는 CSS 3의 기능이다. 2012년 6월에 W3C 권고 표준이 되었으며,Media Queries Publication History 19 June 2012 반응형 웹 디자인(RWD)의 핵심 기술이다.

 역사 
미디어 쿼리는 1994년 호콘 비움 리의 초기 CSS 제안서에서 처음 스케치되었으나, CSS 1의 일부가 되지는 못했다. 1997년의 HTML4 권고안에는 향후 미디어 쿼리가 어떻게 추가될 수 있는지에 대한 예시가 나와 있다. 2000년, W3C는 미디어 쿼리와 다양한 장치를 지원하기 위한 또 다른 체계인 CC/PP에 대한 작업을 시작했다. 두 가지 모두 동일한 문제를 다루지만, CC/PP는 서버 중심인 반면 미디어 쿼리는 브라우저 중심이다. 미디어 쿼리에 대한 첫 번째 공개 초안은 2001년에 발표되었다. 2010년 7월 27일에 후보 권고안으로 발표된 미디어 쿼리 레벨 3은 2012년 6월 19일에 W3C 권고안이 되었다. 제안된 수정안은 2022년 4월 5일에 발표되었다.Media Queries Level 3

2017년 5월 9일에 작업 초안으로 발표된 미디어 쿼리 레벨 4는 2021년 12월 25일 기준으로 W3C 후보 권고안 초안 상태이다.Media Queries Level 4

 사용법 
미디어 쿼리는 미디어 타입과 미디어 기능을 포함하는 하나 이상의 표현식으로 구성되며, 이는 참(true) 또는 거짓(false)으로 해석된다. 미디어 쿼리에 지정된 미디어 타입이 문서가 표시되는 장치 유형과 일치하고 미디어 쿼리의 모든 표현식이 참이면 쿼리 결과는 참이 된다. 미디어 쿼리가 참일 때, 일반적인 계층화(cascading) 규칙에 따라 해당 스타일 시트나 스타일 규칙이 적용된다.
미디어 쿼리는 CSS의 "at-규칙"인 @media를 사용한다.

 예시 
다음은 CSS 미디어 쿼리의 예시이다.

@media screen and (display-mode: fullscreen) {
  /* 여기에 있는 코드는 전체 화면 모드의 스크린에만 적용됨 */
}
@media all and (orientation: landscape) {
  /* 여기에 있는 코드는 가로 방향 모드에만 적용됨 */
}
@media screen and (min-device-width: 500px) {
  /* 여기에 있는 코드는 너비가 500픽셀 이상인 스크린에만 적용됨 */
}

 미디어 타입 
미디어 타입은 <link> 요소 내부의 "media" 속성을 사용하여 HTML 문서의 헤드(head)에서 선언할 수 있다. "media" 속성의 값은 연결된 문서가 어떤 장치에 표시될지를 지정한다. 미디어 타입은 XML 처리 지침, @import at-규칙, 그리고 @media at-규칙 내에서도 선언될 수 있다. CSS 2는 다음을 미디어 타입으로 정의한다.
 all (모든 장치에 적합)
 braille
 embossed (점자 인쇄기)
 handheld (휴대용 장치)
 print (인쇄물)
 projection (투영물)
 screen (컴퓨터 화면)
 speech (음성 합성기)
 tty (텔레타이프)
 TV (텔레비전)

미디어 타입 "all"은 스타일 시트가 모든 미디어 타입에 적용됨을 나타내는 데에도 사용될 수 있다.

 미디어 기능 
다음 표는 2007년 6월 6일자 최신 W3C 미디어 쿼리 권고안에 나열된 미디어 기능을 포함한다.
 기능  값  최소/최대  설명 color  정수    색상 구성 요소당 비트 수 color-index  정수    색상 조회 테이블의 항목 수 device-aspect-ratio  정수/정수    가로세로비 device-height  길이    출력 장치의 높이 device-width  길이    출력 장치의 너비 grid  정수    그리드 기반 장치인 경우 참 height  길이    렌더링 표면의 높이 monochrome  정수    흑백 프레임 버퍼의 픽셀당 비트 수 orientation  "portrait" 또는 "landscape"    화면의 방향 resolution  해상도 ("dpi", "dpcm" 또는 "dppx")    해상도 scan  "progressive" 또는 "interlaced"    "tv" 미디어 타입의 스캐닝 과정 width  길이    렌더링 표면의 너비

 각주 

 외부 링크 
 W3C – Media Queries 권고안 2012년 6월 19일
 W3C – CSS 사양 > Media Queries
 CodeSpot – CSS Media Queries

분류:CSS
분류:반응형 웹 디자인