미디어 쿼리 사용하기

번역이 완료되지 않았습니다. Please help translate this article from English

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

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

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

구문

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

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

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

미디어 유형

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

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

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

미디어 특성

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

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

논리 연산자

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

and

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

not

not 연산자는 미디어 쿼리를 부정하여, 쿼리가 거짓일 때만 참을 반환합니다. 쉼표로 구분한 쿼리 목록 중 하나에서 사용한 경우 전체 쿼리가 아닌 해당하는 하나의 쿼리에만 적용됩니다. not 연산자를 사용할 경우 반드시 미디어 유형도 지정해야 합니다.

참고: Level 3 모듈에서는 not 키워드를 사용해 단일 미디어 기능을 부정할 수 없으며 전체 쿼리만 부정 가능합니다.

only

only 연산자는 전체 쿼리가 일치할 때만 스타일을 적용할 때 사용하며 오래 된 브라우저가 스타일을 잘못 적용하지 못하도록 방지할 때 유용합니다. only를 사용하지 않은 screen and (max-width: 500px) 쿼리를 가정했을 때, 구형 브라우저는 쿼리를 단순히 screen으로만 읽고 뒷부분은 무시한 채 스타일을 적용해버립니다. only 연산자를 사용할 경우 반드시 미디어 유형도 지정해야 합니다.

, (쉼표)

쉼표는 다수의 미디어 쿼리를 하나의 규칙으로 조합할 때 사용합니다. 쉼표 목록 내의 쿼리 각각은 나머지와 별개로 취급하므로, 단 하나의 쿼리만 참을 반환해도 규칙 전체가 참이 됩니다. 즉 쉼표는 논리 or 연산자처럼 동작합니다.

미디어 유형 특정하기

미디어 유형은 주어진 장치의 일반적인 분류를 설명합니다. 비록 웹사이트는 보통 스크린을 염두에 놓고 디자인하지만, 프린터나 오디오 기반 스크린 리더처럼 특정 장치를 대상으로 하는 스타일을 만들고 싶을 때가 있을지도 모릅니다. 예를 들어 다음의 CSS는 프린터를 특정합니다.

@media print { ... }

다수의 장치를 특정할 수도 있습니다. 예컨대 아래 @media 규칙은 두 개의 미디어 쿼리를 사용해 스크린과 인쇄 장치 모두 특정합니다.

@media screen, print { ... }

미디어 유형 구획으로 올라가서 가능한 미디어 유형의 목록을 확인해보세요. 미디어 유형은 굉장히 넓은 범위에서 장치를 설명하기 때문에 적은 수만 존재합니다. 더 세부적인 특성을 특정하려면 미디어 기능을 사용하세요.

미디어 기능 특정하기

미디어 기능은 주어진 사용자 에이전트, 출력 장치, 주변 환경의 특징을 설명합니다. 예를 들어 어떤 스타일을 와이드스크린 모니터에만, 마우스를 사용하는 컴퓨터에만, 저광도 환경에서 사용 중인 장치에서만 적용할 수 있습니다. 다음의 예제는 사용자의 주 입력 방식(마우스 등)이 요소 위에 호버할 수 있으면 스타일을 적용합니다.

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

많은 미디어 기능은 범위 기능으로, "min-" 또는 "max-"를 앞에 붙여 각각 "최소 조건"과 "최대 조건" 제약을 나타낼 수 있습니다. 다음의 CSS는 브라우저의 뷰포트 너비가 12450px 이하인 경우에만 스타일을 적용합니다.

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

미디어 기능 쿼리를 값 없이 생성할 경우 주어진 기능의 값이 0이 아닐 때 (Level 4부터는 0none이 아닐 때) 중첩 스타일을 적용합니다. 그러므로 다음 CSS는 흑백이 아닌 모든 장치에 해당합니다.

@media (color) { ... }

어떤 기능이 현재 브라우저가 가동 중인 장치에 적용되지 않으면, 해당 미디어 기능을 포함한 표현식은 항상 거짓입니다. 예를 들어, 음성 출력 전용 장치에 화면 가로세로비는 존재하지 않으므로 다음 쿼리에 중첩된 스타일은 절대 적용되지 않습니다.

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

미디어 특성 각각의 참고서 문서를 방문해 더 많은 예제를 확인하세요.

복잡한 미디어 쿼리 생성

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.

다수의 유형과 기능 조합하기

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 screen media type:

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

다수의 쿼리 판별

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.

쿼리의 뜻 반전하기

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) { ... }

구형 브라우저와의 호환성 향상하기

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) { ... }

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:

Note: The Media Queries Level 4 specification has reasonable support in modern browsers, but some media features are not well supported. See the @media browser compatibility table for more details.

@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.

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)) { ... }

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) { ... }

같이 보기