[미디어 쿼리] Syntax와 예제 코드

목차

1. 미디어 쿼리 Syntax

2. min-/max- 접두사

3. 예제 코드

4. 미디어 쿼리 선언 방법

---

미디어 쿼리 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 부분이다. 우리가 알아야 할 부분만 가져왔다.

일부 기호를 알아둬야 코드 읽기가 편하다.

• S*는 공백이라고 생각하면 된다.
• '기호'는 구문에 실제로 홑따옴표 안에 있는 기호가 들어가야 한다는 뜻이다.
• [a] : a가 나올 수도 있고 나오지 않을 수도 있다.
• a|b : a 또는 b 둘 중에 하나를 선택한다.
• a? : a가 0번 나오거나 1번만 나올 수 있다.
• a* : a가 0번 나오거나 그 이상 계속 나올 수 있다.
• media_type : all, print, screen 등 명세에 정의된 미디어 타입
• media_feature : width, orientation 등 명세에 정의된 미디어 특성

 

위 Syntax를 요약하면 아래와 같다.

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

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

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

 

 

 

---

 

 

 

min-/max- 접두사

미디어 특성은 이름 앞에 min- 또는 max- 접두사를 붙일 수 있다. 특성의 값이 숫자일 때만 사용가능하다.

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

예를 들어 대부분의 사이트는 width 특성을 이용하는데, 접두사 없이 width: 00px 이라고 선언하게 되면 정확히 뷰포트의 가로 길이가 00px 일 때만 스타일이 적용되기 때문에 다양한 기기들에 대응하기 힘들다.

 

 

 

 

 

---

 

 

 

예제 코드

 

@media screen {...}

미디어 타입이 screen이면 스타일이 적용된다.

 

 

@media screen and (min-width: 768px) {...}

미디어 타입이 screen이면서 width가 768px 이상일 때 스타일이 적용된다. 두 개 중 하나라도 만족하지 않으면 적용되지 않는다.

 

 

@media (min-width: 768px) and (max-width: 1024px) {...}

and로 연결된 표현식들이 모두 참이어야 스타일이 적용된다.  이렇게 미디어 타입이 생략되는 경우에는 미디어 타입이 all로 해석된다.

 

 

@media (color-index) {...}

미디어가 color-index를 지원하면 스타일이 적용된다.

 

 

@media screen and (min-width: 768px), screen and (orientation: portrait), ... {...}

쉼표로 연결된 미디어 쿼리 중 하나라도 참이면 적용된다. (쉼표는 or이라고 생각하면 된다)

 

 

@media not screen and (min-width: 768px)

not 키워드는 하나의 미디어 쿼리 전체를 부정한다. 위 코드에서는 미디어 타입이 screen이면서 뷰포트의 width가 768px 이상일 때를 제외하고 모두 참이된다.

not을 사용할 때 주의해야 하는 점은 하나의 미디어 쿼리를 부정한다는 것이다.

@media not screen and (min-width: 768px), print ...에서 not은 screen and (min-width: 768px)만 부정하지 print를 부정하지 않는다.

 

only는 예전에 미디어 쿼리를 지원하지 못하는 브라우저들 때문에 있는 하위 호환을 위한 키워드이기 때문에 지금은 사용한 것과 사용하지 않는 것과 차이가 없다.

 

 

 

---

 

 

 

미디어 쿼리 선언 방법

미디어 쿼리를 선언하는 방법은 세가지가 있다. 참고로 @media를 이용한 방법을 가장 많이 사용하며 나머지 2가지 방법은 잘 사용하지 않는다.

 

@media screen and (color)

css 파일 내부에 또는 <style>태그 내부에 사용가능하다. 대부분의 경우 이렇게 사용한다.

 

 

<link rel='stylesheet' media='screen and (color)' href='example.css'>

<link> 태그의 media 속성에 미디어 쿼리를 선언한다. 미디어 쿼리가 참이면 뒤에 css 파일 규칙이 적용된다.

참고로 미디어 쿼리가 거짓이라도 css 파일을 다운받는다(규칙이 적용되지는 않음).

 

 

@import url(example.css) screen and (color)

css 파일 내부에 또는 <style>태그 내부에 사용가능하다. 애초에 @import를 잘 사용하지 않아서 이 방법도 잘 사용하지 않는다.

 

 

 

---

부스트코스의 강의 내용을 정리한 포스트입니다.

https://www.boostcourse.org/cs120

비전공자를 위한 HTML/CSS