@media
Baseline | Widely available *
Chrome, Edge, Firefox, Safari에서 지원돼요.
이 기능은 잘 확립되어 있고 많은 기기와 브라우저 버전에서 작동해요. 2015년 7월부터 모든 브라우저에서 사용 가능했어요.
* 이 기능의 일부 부분은 지원 수준이 다를 수 있어요.
@media CSS at-rule은 하나 이상의 미디어 쿼리 결과에 따라 스타일 시트의 일부를 적용하는 데 사용할 수 있어요. 이를 통해 미디어 쿼리와 CSS 블록을 지정하고, 미디어 쿼리가 콘텐츠가 사용되는 기기와 일치할 때만 문서에 적용할 수 있어요.
참고:
JavaScript에서@media를 사용해서 만든 규칙은CSSMediaRuleCSS 객체 모델 인터페이스를 통해 접근할 수 있어요.
사용자가 모바일로 보는지, 데스크톱으로 보는지, 아니면 종이로 인쇄를 하는지에 따라 스타일을 다르게 줄 수 있게 해주는 정말 고마운 기능이죠.
직접 해보세요 (Try it)
이 데모에서는 @media를 사용해서 기기가 마우스 호버(hover)를 지원하는지에 따라 스타일을 어떻게 다르게 주는지 보여줍니다.
CSS
abbr {
color: #860304;
font-weight: bold;
transition: color 0.5s ease;
}
/* 사용자가 요소 위에 마우스를 올릴 수 있는 기기일 때만 적용돼요 */
@media (hover: hover) {
abbr:hover {
color: #001ca8;
transition-duration: 0.5s;
}
}
/* 마우스 호버를 지원하지 않는 기기일 때만 적용돼요 */
@media not all and (hover: hover) {
abbr::after {
content: " (" attr(title) ")";
}
}HTML
<p>
<abbr title="National Aeronautics and Space Administration">NASA</abbr>는
항공 및 우주와 관련된 과학 기술을 담당하는 미국 정부 기관입니다.
</p>구문 (Syntax)
@media 앳 규칙은 코드의 최상단에 둘 수도 있고, 다른 조건부 앳 규칙 안에 중첩해서 넣을 수도 있어요.
/* 코드의 최상위 레벨에서 사용하는 경우 */
@media screen and (width >= 900px) {
article {
padding: 1rem 3rem;
}
}
/* 다른 조건부 앳 규칙 안에 중첩해서 사용하는 경우 */
@supports (display: flex) {
@media screen and (width >= 900px) {
article {
display: flex;
}
}
}미디어 쿼리 구문에 대한 더 자세한 논의는 미디어 쿼리 사용하기 구문 페이지를 참고해 보세요.
설명 (Description)
미디어 쿼리의 <media-query-list>는 미디어 타입(media types), 미디어 특징(media features), 그리고 논리 연산자(logical operators)로 구성됩니다.
미디어 타입 (Media types)
<media-type>은 기기의 일반적인 범주를 설명해요. only 논리 연산자를 사용할 때를 제외하고는 미디어 타입은 선택 사항이며, 생략하면 all 타입이 암시적으로 적용됩니다.
all
모든 기기에 적합합니다.
print
인쇄물이나 프린트 미리보기 모드에서 화면으로 보는 문서를 위한 타입이에요. (이 포맷들에 특화된 서식 관련 정보는 페이지 미디어 가이드를 확인해 보세요.)
screen
주로 화면(스크린)이 있는 기기를 위한 타입입니다.
참고: CSS2.1과 Media Queries 3에서는 몇 가지 미디어 타입(
tty,tv,projection,handheld,braille,embossed,aural)을 더 정의했었지만, Media Queries 4에서 폐기(deprecated)되었으니 더 이상 사용하지 않는 것이 좋습니다.
미디어 특징 (Media features)
<media feature>는 브라우저(사용자 에이전트), 출력 기기, 또는 환경의 구체적인 특성을 설명합니다. 미디어 특징 표현식은 특정 특성이 있는지, 어떤 값인지, 혹은 값의 범위가 어떠한지를 테스트하며, 완전히 선택 사항입니다. 각 미디어 특징 표현식은 반드시 괄호로 감싸야 해요.
any-hover
사용 가능한 입력 메커니즘 중에 요소 위로 호버(마우스 올리기)를 할 수 있는 게 있나요?
any-pointer
사용 가능한 입력 메커니즘 중에 포인팅 장치(마우스 등)가 있나요? 있다면 얼마나 정교한가요?
aspect-ratio
뷰포트의 너비 대비 높이 비율(종횡비)입니다.
color
출력 기기의 색상 성분당 비트 수입니다. 기기가 색상을 지원하지 않으면 0입니다.
color-gamut
브라우저와 출력 기기가 지원하는 대략적인 색 영역의 범위입니다.
color-index
출력 기기의 색상 조회 테이블(color lookup table)에 있는 항목 수입니다. 테이블을 사용하지 않으면 0입니다.
device-aspect-ratio
출력 기기의 너비 대비 높이 비율입니다. (Media Queries Level 4에서 폐기됨)
device-height
출력 기기 렌더링 표면의 높이입니다. (Media Queries Level 4에서 폐기됨)
device-posture
기기의 현재 자세(posture), 즉 뷰포트가 평평한 상태인지 접힌 상태인지를 감지합니다. Device Posture API에 정의되어 있습니다.
device-width
출력 기기 렌더링 표면의 너비입니다. (Media Queries Level 4에서 폐기됨)
display-mode
애플리케이션이 표시되는 모드입니다. 예를 들어 전체 화면이나 PIP(picture-in-picture) 모드 같은 것들이죠. (Media Queries Level 5에서 추가)
dynamic-range
브라우저와 출력 기기가 지원하는 밝기, 대비비(contrast ratio), 색 깊이의 조합입니다. (Media Queries Level 5에서 추가)
forced-colors
브라우저가 색상 팔레트를 제한하고 있는지 감지합니다. (Media Queries Level 5에서 추가)
grid
기기가 그리드 방식(텍스트 기반 터미널 등)을 쓰나요, 아니면 비트맵 화면을 쓰나요?
height
뷰포트의 높이입니다.
horizontal-viewport-segments
기기에 수평으로 배치된 뷰포트 세그먼트가 특정 개수만큼 있는지 감지합니다.
hover
주요 입력 메커니즘(마우스 등)으로 요소 위로 호버를 할 수 있나요?
inverted-colors
브라우저나 운영체제에서 색상을 반전시키고 있나요? (Media Queries Level 5에서 추가)
monochrome
출력 기기의 흑백 프레임 버퍼의 픽셀당 비트 수입니다. 흑백 기기가 아니면 0입니다.
orientation
뷰포트의 방향(가로/세로)입니다.
overflow-block
출력 기기가 블록 축을 따라 뷰포트를 벗어나는 콘텐츠를 어떻게 처리하나요?
overflow-inline
인라인 축을 따라 뷰포트를 벗어나는 콘텐츠를 스크롤할 수 있나요?
pointer
주요 입력 메커니즘이 포인팅 장치인가요? 그렇다면 얼마나 정교한가요?
prefers-color-scheme
사용자가 라이트 모드나 다크 모드 중 어떤 것을 선호하는지 감지합니다. (Media Queries Level 5에서 추가)
prefers-contrast
사용자가 인접한 색상 간의 대비를 높이거나 낮춰달라고 시스템에 요청했는지 감지합니다. (Media Queries Level 5에서 추가)
prefers-reduced-data
사용자가 데이터 사용량을 줄여달라고 웹 콘텐츠에 요청했는지 감지합니다.
prefers-reduced-motion
사용자가 페이지에서 움직임(애니메이션 등)을 최소화하는 것을 선호하는지 감지합니다. (Media Queries Level 5에서 추가)
prefers-reduced-transparency
사용자가 기기에서 투명하거나 반투명한 레이어 효과를 줄이는 설정을 켰는지 감지합니다.
resolution
출력 기기의 픽셀 밀도입니다.
scan
디스플레이 출력이 프로그레시브(progressive) 방식인지 인터레이스(interlaced) 방식인지 확인합니다.
scripting
스크립트(즉, JavaScript)를 사용할 수 있는지 감지합니다. (Media Queries Level 5에서 추가)
shape
기기의 모양을 감지하여 사각형 디스플레이와 원형 디스플레이를 구분합니다.
update
출력 기기가 콘텐츠의 외형을 얼마나 자주 수정할 수 있는지 확인합니다.
vertical-viewport-segments
기기에 수직으로 배치된 뷰포트 세그먼트가 특정 개수만큼 있는지 감지합니다. (Media Queries Level 5에서 추가)
video-dynamic-range
기기의 비디오 평면에서 지원하는 밝기, 대비비, 색 깊이의 조합입니다. (Media Queries Level 5에서 추가)
width
스크롤바 너비를 포함한 뷰포트의 너비입니다.
-moz-device-pixel-ratio
CSS 픽셀당 기기 픽셀 수입니다. 대신 dppx 단위를 사용하는 resolution 특징을 쓰세요.
-webkit-animation
브라우저가 -webkit 접두사가 붙은 애니메이션을 지원하는지 확인합니다. 대신 @supports (animation)을 쓰세요.
-webkit-device-pixel-ratio
CSS 픽셀당 기기 픽셀 수입니다. 대신 dppx 단위를 사용하는 resolution 특징을 쓰세요.
-webkit-transform-2d
브라우저가 -webkit 접두사가 붙은 2D 트랜스폼을 지원하는지 확인합니다. 대신 @supports (transform)을 쓰세요.
-webkit-transform-3d
브라우저가 -webkit 접두사가 붙은 3D 트랜스폼을 지원하는지 확인합니다. 대신 @supports (transform)을 쓰세요.
-webkit-transition
브라우저가 -webkit 접두사가 붙은 트랜지션을 지원하는지 확인합니다. 대신 @supports (transition)을 쓰세요.
논리 연산자 (Logical operators)
논리 연산자인 not, and, only, or를 사용해서 복잡한 미디어 쿼리를 구성할 수 있습니다. 또한 여러 개의 미디어 쿼리를 쉼표(,)로 구분하여 하나의 규칙으로 결합할 수도 있어요.
and
여러 미디어 특징들을 하나의 쿼리로 결합할 때 쓰여요. 연결된 모든 특징이 true여야 전체 쿼리가 true가 됩니다. 미디어 특징을 미디어 타입과 결합할 때도 사용합니다.
not
미디어 쿼리를 부정합니다. 쿼리 결과가 false여야 true를 반환하죠. 쉼표로 구분된 목록에서 사용하면, 해당 연산자가 적용된 특정 쿼리만 부정합니다.
참고: Level 3에서는 not 키워드를 개별 미디어 특징 표현식에 쓸 수 없었고, 전체 미디어 쿼리에만 쓸 수 있었어요.
only
전체 쿼리가 일치할 때만 스타일을 적용합니다. 오래된 브라우저가 스타일을 잘못 적용하는 것을 막는 데 유용해요. 이 연산자를 쓰려면 반드시 미디어 타입을 함께 명시해야 합니다.
, (쉼표)
여러 미디어 쿼리를 하나의 규칙으로 합칠 때 써요. 목록에 있는 각 쿼리는 서로 독립적으로 처리됩니다. 즉, 목록 중 하나라도 true면 전체 미디어 문이 true가 돼요. 논리적으로는 or 연산자처럼 동작하는 셈이죠.
or
, 연산자와 동일합니다. (Media Queries Level 4에서 추가)
사용자 에이전트 클라이언트 힌트 (User agent client hints)
일부 미디어 쿼리는 대응하는 사용자 에이전트 클라이언트 힌트가 있어요. 이는 특정 미디어 요구 사항에 미리 최적화된 콘텐츠를 요청하는 HTTP 헤더입니다. Sec-CH-Prefers-Color-Scheme이나 Sec-CH-Prefers-Reduced-Motion 등이 여기에 포함되죠.
형식적인 구문 (Formal syntax)
@media =
@media <media-query-list> { <rule-list> } 이 구문은 CSS Conditional Rules Module Level 3의 최신 표준을 반영합니다.
접근성 (Accessibility)
사이트의 글자 크기를 조절하는 사용자들을 배려한다면, 미디어 쿼리에서 길이를 지정할 때 px 대신 em을 사용하는 것이 가장 좋습니다.
em과 px 모두 유효한 단위지만, 사용자가 브라우저의 텍스트 크기를 변경했을 때 em이 훨씬 더 유연하고 조화롭게 작동하거든요.
또한, 미디어 쿼리나 HTTP 클라이언트 힌트를 사용해서 사용자 경험을 개선하는 것도 고려해 보세요. 예를 들어 prefers-reduced-motion 미디어 쿼리를 쓰면, 애니메이션을 싫어하거나 어려워하는 사용자들을 위해 움직임을 최소화할 수 있답니다.
보안 (Security)
미디어 쿼리는 사용자가 쓰고 있는 기기의 능력이나 디자인적 특징에 대한 정보를 제공하기 때문에, 이를 악용해서 기기를 식별하는 지문(fingerprint)을 만드는 데 쓰일 위험이 있습니다.
이런 잠재적 위험 때문에, 브라우저는 기기를 정확히 식별하지 못하도록 반환값을 살짝 조작(fudge)하기도 합니다. 예를 들어 파이어폭스의 "지문 생성 방지(Resist Fingerprinting)" 설정을 켜면, 많은 미디어 쿼리가 실제 기기 상태 대신 기본값만 보고하게 된답니다.
예제 (Examples)
인쇄용(print)과 화면용(screen) 미디어 타입 테스트
/* 종이로 인쇄할 때 적용되는 스타일 */
@media print {
body {
font-size: 10pt;
}
}
/* 화면으로 볼 때 적용되는 스타일 */
@media screen {
body {
font-size: 13px;
}
}
/* 화면이나 인쇄 모두에 적용되는 스타일 (쉼표 사용) */
@media screen, print {
body {
line-height: 1.2;
}
}범위 구문 (Range syntax)
범위 구문을 사용하면 범위를 허용하는 특징들을 훨씬 간결하게 작성할 수 있어요.
/* 높이가 600px보다 클 때 */
@media (height > 600px) {
body {
line-height: 1.4;
}
}
/* 너비가 400px 이상, 700px 이하일 때 */
@media (400px <= width <= 700px) {
body {
line-height: 1.4;
}
}미디어 쿼리에 대한 더 많은 예제는 미디어 쿼리 사용하기 페이지에서 확인하실 수 있습니다.
