Media Query란?
미디어 쿼리는 화면 해상도, 뷰포트 너비, 단말기의 유형 등에 따라 스타일을 수정할 수 있는 CSS3의 문법 중 하나이다.
오늘날 거의 모든 웹 사이트는 제각각의 크기인 스마트 디바이스들이나 여러 디스플레이에서 같은 콘텐츠를 보고 있어도 무리없이 사이트 이용을 가능케 해주는 반응형(Responsive) 기능을 탑재한 반응형 웹이 대다수이다.
미디어 쿼리는 언제 사용하나
미디어 쿼리는 다음과 같은 상황에 사용할 수 있다.
- CSS @media와 @import 규칙을 사용해 특정 조건에 따라 스타일을 적용할 때
- 특정 HTML 요소에 media 특성을 사용해 특정 매체만 가리키게 할 때
- Window.matchMedia()와 MediaQueryList.addListener() 메서드를 사용해 미디어 상태를 판별하고 관측할 때
미디어 쿼리 구문
미디어 쿼리 구문은 선택 사항인 미디어 유형과 여러 미디어 특성 표현식으로 이루어지며, 논리 연산자를 통해 다수의 쿼리를 결합할 수 있다.
/*
media-type: 미디어 유형
media-feature-rule: 미디어 특성 표현식
*/
@media media-type and|only|not (media-feature-rule){
/* css rules */
}미디어 쿼리는 지정한 미디어 유형이 일치하고 미디어 특성 표현식이 참일 때 작성된 스타일(css rules)이 적용된다.
미디어 유형
미디어 유형은 논리 연산자를 사용할 때를 제외하면 선택 사항이며 지정하지 않으면 기본값인 all을 사용한다.
- all : 모든 미디어 유형
- print : 인쇄 결과물 및 출력 미리보기 화면에 표시되는 문서
- screen : 모든 화면(예: 데스크탑, 모바일, 태블릿 등)
- speech : 음성 합성 장치(예: 스크린 리더)
미디어 특성
미디어 특성은 사용자 에이전트(브라우저), 출력 장치, 환경 등의 특징을 나타낸다. 미디어 특성 표현식은 선택 사항이며 특성의 존재 여부와 값을 판별한다. 각각의 특성 표현식은 괄호로 감싸야 한다.
| 속성 | 설명 |
|---|---|
| any-hover | 입력 방식 중 호버 가능한 것 |
| any-pointer | 입력 방식 중 포인팅 가능한 것 |
| color | 출력 장치의 색상 채널별 비트 수, 흑백일 땐 0 |
| color-gamut | 사용자 에이전트(브라우저)와 출력 장치가 지원하는 색상의 대략적인 범위 |
| color-index | 출력 장치의 색상 검색 테이블 항목 수, 부재 시 0 |
| forced-colors | 사용자 에이전트(브라우저)가 색상 팔레트를 제한하는 지 여부 |
| grid | 장치가 그리드와 비트맵 스크린 중 어느 것을 사용하는 지 |
| inverted-colors | 사용자 에이전트(브라우저)나 운영체제가 색상을 반전 중인가? |
| overflow-block | 콘텐츠가 블록 축 방향으로 뷰포트를 넘어갈 경우 출력 장치가 어떻게 처리할 지 |
| overflow-inline | 위와 동일(블록 -> 인라인) |
| prefers-color-scheme | 흑/백 중 사용자가 더 선호하는 것 |
| prefers-contrast | 사용자가 시스템에 고대비를 요청했는지 |
| prefers-reduced-motion | 사용자가 줄어든 움직임을 선호 |
| resolution | 출력 장치의 픽셀 밀도 |
| scripting | JavaScript등 스크립트 사용 가능 여부 탐지 |
| update | 출력 장치가 콘텐츠 외형을 수정할 수 있는 주기 |
| width | (스크롤 바를 포함한)뷰포트의 너비 |
| height | 뷰포트의 높이 |
| orientation | 뷰포트의 방향 |
| aspect-ratio | 뷰포트의 가로세로비 |
논리 연산자
not, and, only를 사용해 복잡한 쿼리를 조합할 수 있다. 여러 미디어 쿼리를 쉼표로 구분해 하나의 규칙으로 만들 수 있다.
and
and 연산자는 다수의 미디어 특성을 조합해 하나의 미디어 쿼리를 만들 때 사용한다. 쿼리가 참이려면 모든 미디어 특성이 참이어야 한다.
not
not 연산자는 미디어 쿼리를 부정하여, 쿼리가 거짓일 때만 참을 반환한다. 쉼표로 구분한 쿼리에 사용할 경우 전체가 아닌 구분된 부분의 쿼리에만 적용된다. not 연산자를 사용한 경우, 반드시 미디어 유형도 지정해야 한다.
💡 참고로 Level 3 모듈에서는 단일 부정이 안되고 전체 부정만 가능하다.
only
only 연산자는 전체 쿼리가 일치할 때만 스타일을 적용하며 오래된 브라우저가 스타일을 잘못 적용하는 것을 방지할 때 유용하다. only 연산자를 사용할 경우, 반드시 미디어 유형도 지정해야 한다.
,(쉼표)
쉼표는 여러 미디어 쿼리를 하나로 묶을 때 사용한다. 쉼표로 구분된 쿼리 각각 중 하나라도 참일 시, 전체가 참으로 적용된다. (or과 같다)
❕주의할 것
@media not all and (monochrome) { ... } /* 위 구문은 */ /* 다음과 같이 평가된다. */ @media not (all and (monochrome)) { ... } /* 그리고 아래 구문은 */ @media not screen and (color), print and (color) { ... } /* 다음과 같이 평가된다. */ @media (not (screen and (color))), print and (color) { ... }
구형 브라우저와의 호환성 향상시키기
only 키워드는 미디어 기능을 가진 미디어 쿼리를 지원하지 않는 구형 브라우저가 주어진 스타일을 적용하지 못하게 한다. 신형 브라우저에는 아무런 영향을 주지 않는다.
@media only screen and (color) { ... }Level 4의 구문 향상
미디어 쿼리 Level 4 부터는 향상된 기능의 구문을 사용할 수 있다. 대표적으로 3가지를 보자면,
- 범위 설정 ( < 사용 가능 )
- not 으로 기능 부정
- or 사용 가능 (다수의 기능에서)
❕주의
미디어 쿼리 Level 4 사양에는 다수의 최신 브라우저들을 지원하지만, 몇몇 미디어 기능들은 지원되지 않으니 browser compatibility table 참조 필요
출처: https://developer.mozilla.org/ko/docs/Web/CSS/Media_Queries/Using_media_queries
