미디어쿼리와 반응형 웹

미디어쿼리 소개

미디어퀴리(Media Queries)는 각 미디어 매체에 따라 다른 스타일(css style)을 적용할 수 있게 만드는 것이다. 

미디어쿼리는 동일한 웹 페이지를 다양한 환경의 사용자들에게 최적화된 경험을 제공할 수 있게 해준다.

 

@media(at media)

미디어 쿼리는 CSS2 Media Types을 확장했기 때문에 선언 방법은 동일하다.

 

@media mediaqueries { /* style rules  */ }

@media 로 시작하며, 이 키워드는 이제부터 미디어 쿼리를 시작한다 라는 뜻이다.

그 뒤에 미디어 쿼리 구문(위 코드의 mediaqueries) 이 나오고 이어서 중괄호( { } )를 이용해서 스타일 규칙이 들어간다.

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

미디어 쿼리 구문은 미디어 타입(Media Types)과 미디어 특성(Media Features)으로 이루어져 있습니다.

 

---

미디어 타입

• all, print, screen

 

화면을 출력하는 디스플레이가 있는 미디어들은 전부 screen에 속하기 때문에 현실적으로 고려해야하는 미디어들은

전부 여기에 해당이 된다. print 타입도 간혹 사용이 됩니다. 

all 타입은 모든 미디어에 적용되는 타입이지만, 미디어를 구분하는 용도가 아니기 때문에 유용하게 사용되지는 않는다.

 

미디어 특성

• 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*
 ;

 

 

참고로 Syntax는 전부 이해할 필요는 없지만 일부 기호는 알아두자.

• [ a ] : a가 나올 수도 있고 나오지 않을 수도 있다.
• a | b : a 또는 b 둘 중에 하나를 선택한다.
  "|"는 파이프 라인 기호로 키보드의 역슬래시(\) 키를 Shift 키를 누른 채로 누르면 나온다.
• a? :  a가 0번 나오거나 1번만 나올 수 있음
• a* : a가 0번 나오거나 그 이상 계속 나올 수 있음
• media_type : all, screen, print 등 명세에 정의된 미디어 타입
• media_feature : width, orientation 등 명세에 정의된 미디어 특성
• S하고 *(별표)는 공백에 관련된 표시이기 때문에 그냥 없다고 보면 된다. 

 

위 Syntax를 요약하면

media_query_list
    : 여러개의 미디어 쿼리로 이루어진 리스트로 작성 가능하며, 쉼표를 이용해서 구분한다.

media_query
    : A 형태 - 미디어 타입에 and 키워드를 이용해서 미디어 표현식을 붙일 수 있다.
                    미디어 타잎 앞에는 only 또는 not 키워드가 올 수 있다.(표현식 앞에는 사용불가)
                    미디어 표현식은 생략 가능하기 때문에 미디어 타입 단독으로 사용될 수 있다.

    : B 형태 - 미디어 타입 없이 미디어 표현식이 바로 나올 수 있다.(미디어 타입이 명시되지 않으면 all로 간주한다.)
                   미디어 표현식은 and 키워드를 이용해서 계속해서 나올 수 있다.

expression
    : 미디어 표현식은 괄호로 감싸야 하며, 특성 이름과 해당하는 값으로 이루어진다. 이름과 값은 : 기호로 연결한다.
      또, 값이 없이 특성 이름만으로도 작성할 수 있다.

 

 

특징 1. 여러개의 미디어 쿼리로 이루어진 리스트로 작성할 수 있다. 

특징 2. 미디어 타입 또는 표현식 단독으로도 작성할 수 있다. 

특징 3. 표현식은 값이 없이 특성 이름만으로 작성할 수 있다. 

 

 

---

 

min-/max- 접두사 /프리픽스/

미디어 특성은 이름 앞에 min- 또는 max- 접두사를 붙일 수 있다.

실제로 반응형 사이트를 제작할 때는 보통 접두사를 붙여서 사용한다. (접두사를 붙이지 않고 사용하는 경우 대부분 효율적이지 못하니까)

예를 들어 대부분의 반응형 사이트는 width 특성을 이용하는데, 접두사 없이 width: 00px 이라고 하게 선언하면

정확히 뷰포트의 크기가 00px 에서만 적용되기 때문에, 다양한 기기들을 대응하기 힘들다.

 

그래서 접두사를 사용하여 범위를 지정하게 되면 훨씬 간결하게 반응형 사이트를 제작할 수 있다.

 

**참고**

orientation, grid, scan 에는 프리픽스를 붙일 수 없다. orientation은 키워드가 들어간다.

뷰포트의 크기가 세로로 긴 형태이면 Portrait라는 키워드가 들어가고, 가로로 긴 형태이면 landscape 키워드가 적용된다. 

 

 

 

media_query
 : [ONLY | NOT]? S* media_type S* [ AND S* expression ]*
 | expression [ AND S* expression ]*

 

예제 코드

 

@media screen { ... }
    : 미디어 타입이 screen이면 적용

@media screen and (min-width: 768px) { ... }
    : 미디어 타입이 screen이고 width가 768px 이상이면 적용됩니다. 두 개 중 하나라도 만족하지 않으면 거짓.

@media (min-width: 768px) and (max-width: 1024px) { ... }
    : and는 연결된 모든 표현식이 참이면 적용됩니다.(and 키워드는 연결된 부분이 모두 참이어야 적용된다.)

(⬆️위처럼 미디어 타입이 명시되지 않으면 all이라고 해석한다. )

@media (color-index)
    : 미디어 장치가 color-index를 지원하면 적용

@media screen and (min-width: 768px), screen and (orientation: portrait), ...
    : 쉼표로 연결된 미디어 쿼리 중 하나라도 참이면 적용.( and 키워드와 반대라고 생각하자.)

@media not screen and (min-width: 768px)
    : not 키워드는 하나의 media_query 전체를 부정.
    : (not screen) and (min-width: 768px) 잘못된 해석!
    : not (screen and (min-width: 768px)) 올바른 해석! /전체를 묶자!!/
    : @media not screen and (min-width: 768px), print
       첫 번째 미디어 쿼리에만 not 키워드가 적용되며, 두 번째 미디어 쿼리(print)에는 영향이 없다.

 

**참고 only 키워드를 쓰나 안쓰나 아무런 변화없다. (이전 기술)

 

---

 

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

 

참고로 @media를 이용한 방법을 가장 많이 사용하며 나머지 2가지 방법은 거의 쓰이지 않는다.

@media screen and (color)
    : CSS 파일 내부에 또는 HTML의 <style> 태그 내부에 사용가능 합니다. 대부분의 경우 이렇게 사용.

 

<link rel="stylesheet" media="screen and (color)" href="example.css">
   : <link> 태그의 media 속성에 미디어 쿼리를 선언. 미디어 쿼리가 참이면 뒤에 css 파일 규칙이 적용. (잘 사용은 안된다.)

@import url(example.css) screen and (color);
    : CSS 파일 내부에 또는 <style> 태그 내부에 사용가능. @import문 뒤에 미디어 쿼리를 선언. (잘 사용은 안된다.)

 

 

---

 

 

https://www.w3.org/TR/mediaqueries-4/#mq-min-max

Media Queries Level 4