[비전공자를 위한 HTML/CSS] (38) 미디어 쿼리

미디어 쿼리(Media Queries)

  : 각 미디어 매체(스크린 매체, 프린트, 스크린 리더 등)에 따라 다른 스타일(css style)을 적용할 수 있게 만드는 것. 미디어 쿼리는 동일한 웹 페이지를 다양한 환경의 사용자들에게 최적화된 경험을 제공할 수 있게 해준다.

 

미디어 쿼리는 미디어 매체의 발달로 반응형 웹이 필요해짐 에따라 W3C 에서는 CSS2의 미디어 타입을 확장한 동적으로 반응하는 CSS3 미디어 쿼리를 발표.

 

Media Queries (w3.org)

Media Queries

 

 

미디어 타입 & 미디어 속성

미디어 쿼리의 선언(@media(at media))

@media mediaqueries {/* style rules */}

@media : 미디어 쿼리를 시작한다는  뜻.

mediaqueries : 미디어 쿼리 구문.

{style rules} : 스타일 규칙 선언.

 

미디어 쿼리 구문은 논리적으로 평가되며, 참이면 뒤에 나오는 스타일 규칙이 적용되고, 거짓이면 무시된다.

미디어 쿼리 구문은 미디어 타입(Media Types)과 미디어 특성(Media Features)으로 이루어짐.

 

 

미디어 타입(Media Types)

 

all, braille, embossed, handheld, print, projection, screen, speech, tty, tv

 

screen : 디스플레이가 있는 미디어들 전부. (즉, 현실적으로 고려해야하는 미디어들이 전부 해당.)

print : 인쇄에 필요한 기능.

all : 모든 미디어에 적용되는 타입. 미디어를 구분하는 용도가 아니므로 유용하게 사용되지 않음.

 

 

 

미디어 특성(Media Features)

 

width, height, device-width, device-height, orientation, aspect-ration, device-aspect-ratio, color, color-index, monochrome, resolution, scan, grid

 

width : 뷰포트의 너비, 즉 브라우저 창의 너비를 말함.(스크린의 크기 X)

orientation : 미디어가 세로모드인지, 가로모드인지를 구분. 미디어 쿼리에서 이 구분을 width와 height 특성의 값 비교                   height >= width : 세로모드, width >= height : 가로모드 로 해석. 
                 세로모드에서는 portrait, 가로모드에서는 landscape 키워드가 매칭됨.

 

 

 

미디어 쿼리 level 4 

미디어 쿼리 level 4가 CR(유력 후보안) 단계. 해당 문서에서 미디어 타입 대부분과 미디어 특성 중 일부 속성이 폐기 예정입니다.

Media Queries Level 4 (w3.org)

Media Queries Level 4

 

Media Queries Level 4 (w3.org)

Media Queries Level 4