요약
미디어 쿼리란, CSS3에서 추가된 속성으로 화면 해상도나 기기 방향 등의 조건으로 HTML에 적용하는 스타일을 전환할 수 있는 속성이다.
뷰포트를 기준으로 다른 스타일 지정이 가능하기 때문에 반응형 웹 디자인에서 사용된다.
Media Query
CSS3에 추가된
화면 해상도, 기기 방향 등의 조건으로 HTML에 적용하는 스타일을 전환할 수 있는 CSS3의 속성- 뷰포트의 크기에 따라 서로 다른 스타일을 적용할 수 있기 때문에 반응형 웹 디자인 구현에서 사용된다.
- CSS3 이전에는 미디어 타입이라는 이름으로 미디어의 종류를 감지하는 기술로써 존재했다.
- 사용자가 마우스를 사용하는 것이 아니라, 터치 스크린을 사용하는지와 같은 실행 중인 환경에 대한 여러 내용들을 탐지할 수도 있다.
Media Query 문법
@media [only or not] [media-type] [and or ,] (media-feature-rule) { css 코드 }
@media
CSS의 at-rule로 미디어 쿼리 블록을 선언
at-rule
W3C에서 규정하고 있는 몇몇 규칙을 블록 단위로 사용할 수 있도록 제공하는 기능
- at-rule은 대표적으로 @import, @font-face, @keyframes, @media 등이 있다.
[only or not]
- only 키워드는 미디어 쿼리가 지원되는 브라우저에서만 해당 코드를 적용한다는 의미이다.
- not 키워드는 해당 미디어 유형을 제외한 모든 미디어 유형에만 적용한다는 의미이다. (ex. @media not screen ~~ 인 경우, screen 미디어 유형을 제외한 모든 미디어에 적용)
- 해당 키워드는 생략 가능하다.
[media-type]
적용할 미디어의 유형
- 미디어 유형 종류
기기명 | 설명 |
all | 모든장치 |
print | 인쇄 장치 |
screen | 컴퓨터 화면 장치 또는 스마트 기기의 화면 |
- 미디어 쿼리 3에서 tv, projection 등 다양한 유형들을 정의했으나 미디어 쿼리 4 이후부터는 더이상 사용되지 않기 때문에 사용을 권장하지 않는다.
- 미디어 유형은 생략이 가능하며, 생략 시엔 all 키워드처럼 동작한다.
[and or ,]
- and 키워드는 앞 뒤 조건이 모두 사실일 때 이후 미디어 쿼리 코드가 동작한다는 의미이다.
- ,(comma) 키워드는 앞 뒤 조건 중 하나라도 사실일 때 미디어 쿼리 코드가 동작한다는 의미이다.
- 해당 키워드는 생략 가능하다.
@media (min-width: 30px) and (max-width: 50px){} @media (min-width: 30px), (max-width: 50px){} @media (min-width: 30px){}
(media-feature-rule)
미디어 쿼리 조건문
- 조건문은 미디어 쿼리 실행문이 실행될 조건을 나타낸다.
- and나 , 키워드를 통해 두 가지 이상 작성할 수 있으며 생략도 가능하다.
any-hover | 사용자가 호버링을 지원하는 입력 매커니즘을 가지고 있는지 확인 | none, hover |
any-pointer | 사용자가 포인팅 장치(마우스 등)를 가지고 있는지 확인 | none, coarse, fine |
aspect-ratio | 뷰포트의 가로 세로 비율 | 16/9, 2/1 등 비율 |
color | 디스플레이 색상 표현 비트 수 | <integer>(색상 비트 수) |
color-gamut | 디스플레이 색상 범위 | srgb, p3, rec2020
(디스플레이 색상 범위) |
color-index | 디스플레이 색상 범위의 인덱스 수 | <integer>
(색상 인덱스 엔트리 수) |
display-mode | 웹 애플리케이션이 실행되는 모드(full, 최소화 등) | fullscreen, standalone, minimal-ui, browser |
dynamic-range | 출력 장치의 동적 범위 | standard, high |
forced-colors | 시스템 색상 스킴을 강제하는 경우가 있는지 확인 | none, active |
grid | 그리드 기반인지 확인 | 0(false) or 1(true) |
height | 뷰포트의 세로 너비값
max-height, min-height로 최대 최소 크기 조건 가능 | <integer>
(너비값) |
hover | 호버링으로 입력 되는지 확인 | none, hover |
inverted-colors | 운영체제나 사용자 브라우저에서 색상 반전 모드 여부 | null, inverted |
monochrome | 단색 프레임 버퍼의 비트 당 픽셀 수 | <integer>
(단색 프레임 버퍼의 비트 당 픽셀 수) |
orientation | 뷰포트가 세로 형태 or 가로 형태인지 확인 | portrait(세로), landscape(가로) |
overflow-block | 요소들이 block 방식으로 오버플로우 되는지 확인 | none, scroll, optional-paged |
overflow-inline | 요소들이 inline 방식으로 오버플로우 되는지 확인 | none, scroll |
pointer | 포인팅으로 입력 되는지 확인 | none, coarse, fine |
prefers-color-scheme | 사용자가 선호하는 색상 스킴(밝음, 어두음 등) | light, dark |
prefers-contrast | 사용자가 선호하는 대비 수준 | no-preference, more, less |
prefers-reduced-motion | 사용자가 원치 않는 모션 효과 줄이기를 선호하는지의 여부 | no-preference, reduce |
resolution | 출력 장치 해상도 | <integer>
(출력 장치 해상도) |
scripting | javascript를 읽는 스크립팅 기능 활성화 여부 | none, initial-only, enabled |
update | 출력 장치 출력 속도 | slow, fast, normal, instant |
video-dynamic-range | 비디오 동적 범위 | standard, high |
width | 뷰포트의 가로 너비값
max-width, min-width로 최대 최소 크기 조건 가능 | <integer>
(너비값) |
미디어 쿼리 전략
- 모바일 환경을 우선하여 min-width를 통해 좁은 해상도부터 스타일을 지정하는 전략을
모바일 퍼스트라고 한다. - 이러한 방식으로 코드를 작성할 때엔 반드시 작은 해상도부터 스타일을 지정해야한다.
- min 키워드가 최소 또는 그 이상이라는 뜻을 갖기 때문이다.
@media all and (min-width:320px){실행문} @media all and (min-width:768px){실행문} @media all and (min-width:1024px){실행문}
- 데스크톱 환경을 우선하여 max-width를 통해 넓은 해상도부터 스타일을 지정하는 전략을
데스크톱 퍼스트라고 한다. - 반드시 큰 해상도부터 스타일을 지정해야 한다.
- max 키워드가 최대 또는 그 이하라는 뜻을 갖기 때문이다.
@media all and (max-width:1024px){실행문} @media all and (max-width:768px){실행문} @media all and (max-width:320px){실행문}