📍 미디어쿼리 소개
미디어퀴리(Media Queries)는 각 미디어 매체에 따라 다른 스타일(css style)을 적용할 수 있게 만드는 것입니다. 미디어 매체는 모니터와 같은 스크린 매체, 프린트, 스크린 리더기와 같은 것들을 이야기 합니다. 미디어쿼리는 동일한 웹 페이지를 다양한 환경의 사용자들에게 최적화된 경험을 제공할 수 있게 해줍니다.
미디어쿼리는 CSS2의 미디어 타입(Media Types)을 확장해서 만들어졌습니다. 미디어타입은 이론적으로는 훌륭했지만, 결과적으로 제대로 활용되지 못했습니다. 이유는 당시에는 미디어 타입을 제대로 지원하는 기기가 없었기 때문입니다. 미디어 쿼리가 등장하기 이전에는 제대로 된 반응형 웹 사이트를 제작할 수는 없었습니다. 하지만 당시에는 사용자들의 환경이 아주 제한적이었기 때문에 제작자 입장에서는 대중적인 미디어 범위에서만 잘 보이도록 사이트를 제작하면 반응형이 아니더라도 충분했습니다.
하지만 웹이 급격이 발전하면서 대응해야 하는 미디어의 폭이 상당히 늘어났습니다. 이런 필요성에 따라 W3C는 CSS2의 미디어 타입을 확장하여, CSS3 미디어쿼리를 발표합니다. 이 미디어 쿼리로 인해 웹 사이트를 제작함에 있어 이전의 정적인 고정 레이아웃 웹 사이트에서 동적으로 반응하는 반응형 웹 사이트로 패러다임이 새롭게 변화하였습니다.
@media(at media)
미디어 쿼리는 CSS2 Media Types을 확장했기 때문에 선언 방법은 동일합니다.
@media mediaqueries { /* style rules */ }
@media 로 시작하며, 이 키워드는 이제부터 미디어 쿼리를 시작한다 라는 뜻입니다. 그 뒤에 미디어 쿼리 구문(위 코드의 mediaqueries) 이 나오고 이어서 중괄호( { } )를 이용해서 스타일 규칙이 들어갑니다. 미디어 쿼리 구문은 논리적으로 평가되며 참이면 뒤에 나오는 스타일 규칙이 적용되고, 거짓이면 무시됩니다.
미디어 쿼리 구문은 미디어 타입(Media Types)과 미디어 특성(Media Features)으로 이루어져 있습니다.
미디어 타입
all, braille, embossed, handheld, print, projection, screen, speech, tty, tv
우리가 알아야 할 타입은 all, print, screen 정도입니다. 그 중에서도 screen이 거의 대부분입니다. 화면을 출력하는 디스플레이가 있는 미디어들은 전부 screen에 속하기 때문에 현실적으로 고려해야하는 미디어들은 전부 여기에 해당이 됩니다.
print 타입도 간혹 사용이 됩니다. 실습할 때 다룹니다.
all 타입은 모든 미디어에 적용되는 타입입니다. 미디어를 구분하는 용도가 아니기 때문에 유용하게 사용되지는 않습니다.
미디어 특성
width, height, device-width, device-height, orientation, aspect-ratio, device-aspect-ratio, color, color-index, monochrome, resolution, scan, grid
미디어 특성 역시 우리가 알아야 할 특성은 width와 orientation 정도입니다.
width는 뷰포트의 너비, 즉 브라우저 창의 너비를 말합니다.(스크린의 크기 x)
orientation은 미디어가 세로모드인지 가로모드인지를 구분합니다. 미디어 쿼리에서는 이 구분을 width와 height 특성의 값을 비교해서 height가 width보다 같거나 크면 세로모드 반대인 경우에는 가로모드라고 해석합니다. 세로모드에서는 portrait, 가로모드에서는 landscape 키워드와 매칭이 됩니다.
📍 미디어 쿼리 Syntax
media_query_list
: S [media_query [ ',' S media_query ] ]?
;
media_query
: [ONLY | NOT]? S media_type S [ AND S expression ]
| expression [ AND S expression ]
;
expression
: '(' S media_feature S [ ':' S expr ]? ')' S*
;
위 코드는 CSS3 미디어 쿼리 표준 명세에 나와 있는 Syntax 부분입니다. 우리가 알아야 할 부분만 적어놓았습니다.
[ a ] : a가 나올 수도 있고 나오지 않을 수도 있습니다. a | b : a 또는 b 둘 중에 하나를 선택합니다. "|"는 파이프 라인 기호로 키보드의 역슬래시() 키를 Shift 키를 누른 채로 누르면 나옵니다.
a? : a가 0번 나오거나 1번만 나올 수 있음
a* : a가 0번 나오거나 그 이상 계속 나올 수 있음
media_type : all, screen, print 등 명세에 정의된 미디어 타입
media_feature : width, orientation 등 명세에 정의된 미디어 특성
위 Syntax를 요약하면
media_query_list: 여러개의 미디어 쿼리로 이루어진 리스트로 작성 가능하며, 쉼표를 이용해서 구분합니다.
media_query
: A 형태 - 미디어 타입에 and 키워드를 이용해서 미디어 표현식을 붙일 수 있습니다. 미디어 타잎 앞에는 only 또는 not 키워드가 올 수 있습니다. 미디어 표현식은 생략 가능하기 때문에 미디어 타입 단독으로 사용될 수 있습니다.
: B 형태 - 미디어 타입 없이 미디어 표현식이 바로 나올 수 있습니다.(미디어 타입이 명시되지 않으면 all로 간주합니다.) 미디어 표현식은 and 키워드를 이용해서 계속해서 나올 수 있습니다.
expression: 미디어 표현식은 괄호로 감싸야 하며, 특성 이름과 해당하는 값으로 이루어집니다. 이름과 값은 : 기호로 연결합니다. 또, 값이 없이 특성 이름만으로도 작성할 수 있다.
min-/max- 접두사
미디어 특성은 이름 앞에 min- 또는 max- 접두사를 붙일 수 있습니다. 실제로 반응형 사이트를 제작할 때는 보통 접두사를 붙여서 사용합니다. 접두사를 붙이지 않고 사용하는 경우 대부분 효율적이지 못하기 때문입니다.
예를 들어 대부분의 반응형 사이트는 width 특성을 이용하는데, 접두사 없이 width: 00px 이라고 하게 선언하면 정확히 뷰포트의 크기가 00px 에서만 적용되기 때문에, 다양한 기기들을 대응하기 힘듭니다. 그래서 접두사를 사용하여 범위를 지정하게 되면 훨씬 간결하게 반응형 사이트를 제작할 수 있습니다.
📍 미디어 쿼리 선언 방법
미디어 쿼리를 선언하는 3가지 방법에 대해 알아보겠습니다.
참고로 @media를 이용한 방법을 가장 많이 사용하며 나머지 2가지 방법은 거의 쓰이지 않습니다.
✔ @media screen and (color)
: CSS 파일 내부에 또는 <style> 태그 내부에 사용가능 합니다. 대부분의 경우 이렇게 사용합니다.
✔ <link rel="stylesheet" media="screen and (color)" href="example.css">
: <link> 태그의 media 속성에 미디어 쿼리를 선언합니다. 미디어 쿼리가 참이면 뒤에 css 파일 규칙이 적용됩니다.
✔ @import url(example.css) screen and (color);
: CSS 파일 내부에 또는 <style> 태그 내부에 사용가능 합니다. @import문 뒤에 미디어 쿼리를 선언하면 됩니다.
