미디어 쿼리

반응형 웹 사이트를 제작하기 위해 반드시 필요한 내용이다.

소개

각 미디어 매체(스크린, 프린트, 스크린 리더기 등)에 따라 다른 스타일 시트를 적용할 수 있게 만드는 것으로, 미디어 쿼리는 CSS3에서 처음 소개되었지만, 그 전에 잘 사용되진 않았지만 CSS2에 미디어 타입이라는 기술이 있었다. 미디어 타입이 사용되지 않았던 이유는 하나의 미디어 타입에서 광범위하게 적용된다는 문제가 있었기 때문이다.

예를 들면 handled라는 타입이 있는데, handled는 손에 들고 다닐 정도의 소형 스크린 브라우저를 얘기하고, 모바일, 태블릿 기기가 여기에 해당되며, handled라는 하나의 스타일로 모든 소형 기기를 대응해야 했다. 이처럼 디테일한 구분을 할 수 없었다는 문제점이 있었다.
또한 그 당시 웹 환경을 지원하는 기기가 데스크탑 컴퓨터나 노트북을 제외하고는 없었기 때문에 미디어 타입을 지원하는 기기가 없어서 적용될 수 없었다.

구문

@media media queries{...}

@media

미디어 쿼리를 선언한다는 뜻이다. (@를 at(앳)이라고 부른다.)
뒤에 미디어 쿼리문이 나오고, 중괄호를 이용해 스타일 규칙을 작성한다.
미디어 쿼리문은 참 또는 거짓으로 평가되는데, 참이면 뒤에 나오는 스타일 규칙들이 적용되고, 거짓이면 스타일 규칙이 무시된다.

<미디어 쿼리 구문은 미디어 타입, 미디어 특성으로 나뉜다>

미디어 타입

all, print, screen
미디어 매체인 스크린, 프린트, TV 등

미디어 특성

width, orientation(미디어가 세로로 길게 나와있는 미디어인지, 가로로 되어 있는지 구분하는 특성) 등

[ ] : 있을 수도 있고, 없을 수도 있다는 뜻
? : 앞의 내용이 0번 나오거나 1번만 나와야 된다는 의미
* : 앞의 내용이 0번 나오거나 1번 나오거나 그 이상 연속적으로 나올 수 있다는 의미

예제)

• @media screen{...}
  미디어 타입이 스크린인 경우 미디어 쿼리가 참으로 평가되면서 뒤에 나오는 스타일 규칙이 적용된다.
  
  
• @media screen and (min-width:768px){...}
  미디어 타입이 스크린이면서 width가 768px 이상이면 쿼리문이 참으로 평가된다.
  orientation, grid, scan 이 세 가지 특성은 값으로 특정 키워드가 들어가기 때문에 프리픽스를 붙일 수 없다.
  orientation은 뷰포트의 크기가 세로로 긴 형태이면 portrait라는 키워드가 들어가고, 가로로 긴 형태이면 landscape 키워드가 적용된다.
  
  
• @media (color-index)
  미디어 장치가 color-index를 지원하면 참이된다.
  
  
• @media screen and (min-width:768px), screen and (orientation:portrait),...
  쉼표로 연결된 미디어 쿼리 중 하나라도 참이면 적용
  
  
• @media not screen and (min-width:768px)
  not 키워드는 하나의 media-query 전체를 부정한다. not 키워드는 가장 마지막에 해석이 되기 때문에, (스크린이면서 768px이)아닌 경우 적용된다.

미디어 쿼리를 선언하는 3가지 방법

1. @media

@media 블록을 CSS 파일 안에 선언 하거나 html 내부의 <style>태그 안쪽에 선언 할 수 있다.

2. <link media="">

스타일 시트 파일을 연결하는 <link>태그의 미디어 속성 안에 미디어 쿼리를 넣으면 된다. 미디어 쿼리가 참이면 CSS가 적용된다.

3. @import

실제 CSS 파일을 import 시키는 기능이다.
import 구문 뒤에 CSS 파일 경로를 적어주고, 한칸 띄우고 미디어 쿼리문을 적게 되는데, 참이면 CSS를 적용한다.