미디어 쿼리 사용하기

You’re reading the English version of this content since no translation exists yet for this locale. Help us translate this article!

미디어 쿼리는 단말기의 유형(출력물 vs. 화면)과, 어떤 특성이나 수치(화면 해상도, 뷰포트 너비 등)에 따라 웹사이트나 앱의 스타일을 수정할 때 유용합니다.

미디어 쿼리는 다음과 같은 상황에 사용할 수 있습니다.

참고: 이 페이지의 CSS는 시연용으로 @media를 사용했지만, 기본적인 구문은 모든 미디어 쿼리가 동일합니다.

구문

미디어 쿼리는 선택사항인 미디어 유형과, 자유로운 수의 미디어 특성 표현식으로 이루어집니다. 다수의 쿼리는 논리 연산자를 통해 다양한 방법으로 서로 결합할 수 있습니다. 미디어 쿼리는 대소문자를 구분하지 않습니다.

미디어 쿼리는 (유형을 지정했다면) 문서를 보여주는 미디어의 유형이 일치하고, 모든 미디어 특성 표현식의 계산값이 참일 때, 참으로 계산됩니다.

참고: <link>의 미디어 쿼리가 거짓을 반환하더라도 스타일시트는 다운로드됩니다. 그렇지만 그 안의 내용은 쿼리의 값이 참이 되어야 적용됩니다.

미디어 유형

미디어 유형은 장치의 일반적인 범주를 나타냅니다. 미디어 유형은 not이나 only 논리연산자를 사용할 때를 제외하면 선택사항이며 지정하지 않으면 all을 사용합니다.

all
모든 장치에 적합.
print
인쇄 결과물 및 출력 미리보기 화면에 표시 중인 문서.
(인쇄 미디어 문서에서, 가능한 서식 문제에 관한 자세한 정보를 확인해주세요.)
screen
주로 화면 대상.
speech
음성 합성장치 대상.

사용하지 않는 미디어 유형: CSS2.1과 Media Queries 3 모듈은 여러가지 추가 유형(tty, tv, projection, handheld, braille, embossed, aural)을 정의했으나 Media Queries 4에서 제거됐으므로 사용해선 안됩니다. aural은 유사한 유형인 speech로 대체됐습니다.

미디어 특성

미디어 특성은 사용자 에이전트, 출력 장치, 환경 등의 특징을 나타냅니다. 미디어 특성 표현식은 선택사항이며 특성의 존재 여부와 값을 판별합니다. 각각의 미디어 특성 표현식은 괄호로 감싸져야 합니다.

이름 요약 참고
width 뷰포트 너비.  
height 뷰포트 높이.  
aspect-ratio 뷰포트 가로세로비.  
orientation 뷰포트 방향.  
resolution 출력 장치의 해상도.  
scan 출력 장치의 스캔 방법.  
grid 격자와 비트맵 중 출력 장치가 사용하는 화면.  
update 출력 장치가 화면을 업데이트하는 주기. Media Queries Level 4에서 추가
overflow-block 블록 축의 내용이 넘쳤을 때 출력 장치가 처리하는 방법. Media Queries Level 4에서 추가
overflow-inline 인라인 축의 내용이 넘쳤을 때 스크롤의 가능 여부. Media Queries Level 4에서 추가
color 출력 장치의 색상 채널별 비트 수, 흑백일 땐 0.  
color-gamut 사용자 에이전트와 출력 장치가 지원하는 색상의 대략적인 범위. Media Queries Level 4에서 추가
color-index 출력 장치의 색상 룩업 테이블(LUT) 항목 수, 존재하지 않을 땐 0.  
display-mode 웹 앱 매니페스트의 display 항목이 정의한 애플리케이션의 표시 모드. Web App Manifest 명세에서 정의
monochrome 출력 장치의, 모노크롬 프레임 버퍼의 픽셀 당 비트 수. 단색을 사용하지 않으면 0.  
inverted-colors 사용자 에이전트나 운영체제가 색을 반전 중인지 여부. Media Queries Level 5에서 추가
pointer 포인팅 장치가 주요 입력 수단인지 여부와, 그렇다면 그 정확도. Media Queries Level 4에서 추가
hover 주요 입력 수단으로 요소 위에 호버할 수 있는지 여부. Media Queries Level 4에서 추가
any-pointer 입력 수단 중 포인팅 장치의 존재 여부와, 존재한다면 그 정확도. Media Queries Level 4에서 추가
any-hover 어떤 입력 수단으로 요소 위에 호버할 수 있는지 여부. Media Queries Level 4에서 추가
light-level 환경의 광도. Media Queries Level 5에서 추가
prefers-reduced-motion 사용자가 줄어든 움직임을 선호함. Media Queries Level 5에서 추가
prefers-reduced-transparency 사용자가 줄어든 투명도를 선호함. Media Queries Level 5에서 추가
prefers-contrast 사용자가 시스템에 고대비/저대비를 요청했는지 여부. Media Queries Level 5에서 추가
prefers-color-scheme 사용자가 밝은 테마나 어두운 테마를 선호하는지 여부. Media Queries Level 5에서 추가
scripting 스크립트(JavaScript 등)를 사용할 수 있는지 여부. Media Queries Level 5에서 추가
device-width 출력 장치의 렌더링 표면 너비. Media Queries Level 4에서 제거
device-height 출력 장치의 렌더링 표면 높이. Media Queries Level 4에서 제거
device-aspect-ratio 출력 장치의 가로세로비. Media Queries Level 4에서 제거

논리 연산자

not, and, only와 같은 논리 연산자를 사용해 조합하여 복잡한 쿼리를 만들 수 있습니다. 여러 미디어 쿼리를 쉼표로 구분해서 하나의 규칙으로 만들 수도 있습니다.

and

and 연산자는 다수의 미디어 특성을 조합하여 하나의 미디어 쿼리를 만들 때 사용합니다. 전체 쿼리가 참이려면 모든 구성 쿼리가 참을 반환해야 합니다. 미디어 특성과 미디어 유형을 같이 사용할 때도 쓰입니다.

not

어떤 미디어 쿼리의 결과가 거짓인 경우 (컬러 디스플레이의 경우 monochrome이나 min-width: 700px 의 미디어 특성에 대응하는 폭이 600px인 스크린) , 이 쿼리 전체에 not 연산자가 적용된 결과는 참이 됩니다. 컴마 구분 미디어쿼리에 not 연산자를 적용한 경우 일련의 미디어 쿼리 전체에 반대되는 결과를 반환합니다. 각각의 쿼리에 not 연산자를 부여하는 행위로 착각하는 경우가 많이 있으니 주의해야 합니다. not 연산자는 개별의 미디어 쿼리를 역으로 바꾸는것이 불가능하며, 항상 미디어쿼리 전체를 대상으로 적용됩니다. 예를 들어 이하의 쿼리의 not 연산자 또한 제일 마지막에 처리됩니다.

only

only 연산자를 사용하면 미디어 특성을 지정하는 미디어쿼리를 서포트하지 않는 낡은 브라우저에 대응하여 특정 스타일을 적용하는것이 가능합니다.

, (쉼표)

미디어 쿼리에 포함된 콤마구분 리스트는 or 연산자와 같은 동작을 합니다. 콤마구분 리스트를 사용하는 경우 하나의 미디어 쿼리가 참이면 스타일 (시트)가 적용됩니다. 리스트 내에 미디어쿼리는 독립된 쿼리로 사용되어 한 미디어쿼리에 대응하는 연산자는 각 쿼리에 영향을 끼치지 않습니다. 결국 컴마로 구분된 리스트의 미디어 쿼리를 사용할 경우 다른 미디어 특성, 미디어 타입, 그리고 미디어상태에 대해 똑같은 스타일을 적용하는것이 가능합니다.

Targeting media features

Media features describe the specific characteristics of a given user agent, output device, or environment. For instance, you can apply specific styles to widescreen monitors, computers that use mice, or to devices that are being used in low-light conditions. This example applies styles when the user's primary input mechanism (such as a mouse) can hover over elements:

@media (hover: hover) { ... }

Many media features are range features, which means they can be prefixed with "min-" or "max-" to express "minimum condition" or "maximum condition" constraints. For example, this CSS will apply styles only if your browser's viewport width is equal to or narrower than 12450px:

@media (max-width: 12450px) { ... }

If you create a media feature query without specifying a value, the nested styles will be used as long as the feature's value is not zero (or none, in Level 4). For example, this CSS will apply to any device with a color screen:

@media (color) { ... }

If a feature doesn't apply to the device on which the browser is running, expressions involving that media feature are always false. For example, the styles nested inside the following query will never be used, because no speech-only device has a screen aspect ratio:

@media speech and (aspect-ratio: 11/5) { ... }

For more media feature examples, please see the reference page for each specific feature.

Creating complex media queries

Sometimes you may want to create a media query that depends on multiple conditions. This is where the logical operators come in: not, and, and only. Furthermore, you can combine multiple media queries into a comma-separated list; this allows you to apply the same styles in different situations.

In the previous example, we've already seen the and operator used to group a media type with a media feature. The and operator can also combine multiple media features into a single media query. The not operator, meanwhile, negates a media query, basically reversing its normal meaning. The only operator prevents older browsers from applying the styles.

Note: In most cases, the all media type is used by default when no other type is specified. However, if you use the not or only operators, you must explicitly specify a media type.

Combining multiple types or features

The and keyword combines a media feature with a media type or other media features. This example combines two media features to restrict styles to landscape-oriented devices with a width of at least 30 ems:

@media (min-width: 30em) and (orientation: landscape) { ... }

To limit the styles to devices with a screen, you can chain the media features to the screenmedia type:

@media screen and (min-width: 30em) and (orientation: landscape) { ... }

Testing for multiple queries

You can use a comma-separated list to apply styles when the user's device matches any one of various media types, features, or states. For instance, the following rule will apply its styles if the user's device has either a minimum height of 680px or is a screen device in portrait mode:

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

Taking the above example, if the user had a printer with a page height of 800px, the media statement would return true because the first query would apply. Likewise, if the user were on a smartphone in portrait mode with a viewport height of 480px, the second query would apply and the media statement would still return true.

Inverting a query's meaning

The not keyword inverts the meaning of an entire media query. It will only negate the specific media query it is applied to. (Thus, it will not apply to every media query in a comma-separated list of media queries.) The not keyword can't be used to negate an individual feature query, only an entire media query. The not is evaluated last in the following query:

@media not all and (monochrome) { ... }

... so that the above query is evaluated like this:

@media not (all and (monochrome)) { ... }

... rather than like this:

@media (not all) and (monochrome) { ... }

As another example, the following media query:

@media not screen and (color), print and (color) { ... }

... is evaluated like this:

@media (not (screen and (color))), print and (color) { ... }

Improving compatibility with older browsers

The only keyword prevents older browsers that do not support media queries with media features from applying the given styles. It has no effect on modern browsers.

@media only screen and (color) { ... }

Syntax improvements in Level 4

The Media Queries Level 4 specification includes some syntax improvements to make media queries using features that have a "range" type, for example width or height, less verbose. Level 4 adds a range context for writing such queries. For example, using the max-functionality for width we might write the following:

@media (max-width: 30em) { ... }

In Media Queries Level 4 this can be written as:

@media (width <= 30em) { ... }

Using min- and max- we might test for a width between two values like so:

@media (min-width: 30em) and (max-width: 50em) { ... }

This would convert to the Level 4 syntax as:

@media (30em <= width <= 50em ) { ... }

Media Queries Level 4 also adds ways to combine media queries using full boolean algebra with and, not, and or.

Negating a feature with not

Using not() around a media feature negates that feature in the query. For example, not(hover) would match if the device had no hover capability:

@media (not(hover)) { ... }

Testing for multiple features with or

You can use or to test for a match among more than one feature, resolving to true if any of the features are true. For example, the following query tests for devices that have a monochrome display or hover capability:

@media (not (color)) or (hover) { ... }

같이 보기