CSS @media 규칙

정의와 사용법

다른 미디어 타입/장치에 대해 다른 스타일을 적용하는 데 사용되는 @media 규칙이 미디어 쿼리에 있습니다.

미디어 쿼리는 다양한 것을 확인할 수 있습니다. 예를 들어:

  • 비주얼 포트의 너비와 높이
  • 디바이스의 너비와 높이
  • 디바이스의 방향(폰이나 태블릿이 가로 모드인지 세로 모드인지)
  • 해상도

미디어 쿼리는 데스크톱, 노트북, 태블릿, 스마트폰에 맞춤형 스타일 시트를 제공하는 데 사용되는 인기 있는 기술입니다. (응답형 웹 디자인).

문서나 스크린리더에 대해서만 적용되는 스타일을 정의할 수 있는 미디어 쿼리를 사용할 수 있습니다. (mediatype: print, screen 또는 speech).

미디어 타입 외에도 미디어 특성이 있습니다. 미디어 특성은 사용자代理나 디스플레이 장치의 특정 특성을 테스트할 수 있게 하여 미디어 쿼리에 더 많은 특정한 세부 사항을 제공합니다. 예를 들어, 특정 너비보다 크거나 작은 스크린에만 스타일을 적용할 수 있습니다.

또한 참조:

CSS 강의:CSS 미디어 쿼리

CSS 강의:CSS 미디어 쿼리 예제

RWD 강의:미디어 쿼리를 통해 반응형 웹 디자인을 구현합니다

JavaScript 참조 매뉴얼:window.matchMedia() 메서드

실례

예제 1

브라우저 창의 너비가 600px 또는 더 작을 때, <body> 요소의 배경색을 "라벤더색"으로 변경합니다:

@media only screen and (max-width: 600px) {
  body {
    background-color: lightblue;
  }
}

직접 시도해 보세요

TIY 예제를 페이지 하단에서 찾을 수 있습니다.

CSS 문법

@media not|only mediatype and (mediafeature and|or|not mediafeature) {
  CSS-Code;
}

not, only, and 키워드의 의미:

not: not 키워드는 전체 미디어 쿼리의 의미를 반대합니다.

only: only 키워드는 지정된 스타일을 적용하는 고대 버전 브라우저에 영향을 미치지 않습니다. 그들은 현재 브라우저에 영향을 미치지 않습니다.

and: and 키워드는 미디어 특성과 미디어 타입 또는 다른 미디어 특성을 조합합니다.

그들은 모두 선택 사항입니다. 그러나 not 또는 only를 사용할 때는 미디어 타입도 지정해야 합니다.

또한 다른 미디어에 대해 다른 스타일 시트를 사용할 수 있습니다. 예를 들어:

<link rel="stylesheet" media="screen and (min-width: 900px)" href="widescreen.css">
<link rel="stylesheet" media="screen and (max-width: 600px)" href="smallscreen.css">
....

미디어 타입

값 설명
all 기본. 모든 미디어 타입 장치에 사용됩니다.
print 프린터에 사용됩니다.
screen 컴퓨터 스크린, 태블릿, 스마트폰 등에 사용됩니다.
speech 페이지를 읽는 스크린 레이더.

미디어 특성

값 설명
any-hover

사용자가 (마우스와 같은) 요소 위에 멈추도록 허용하는 어떤 사용 가능한 입력 메커니즘은 있습니까?

Media Queries Level 4에서 추가됨
any-pointer

사용 가능한 입력 메커니즘 중 지시 장치가 있습니까? 그렇다면, 그 정확도는 어떻습니까?

Media Queries Level 4에서 추가됨
aspect-ratio 视口（viewport）的宽高比。
color

color

뷰포트(viewport)의 너비와 높이 비율.
color

장치가 색상을 출력하지 않는다면 이 값은 0입니다.

Media Queries Level 4에서 추가됨
color-gamut

사용자代理와 출력 장치가 약간의 정도로 지원하는 색상 영역.

color-index
출력 장치의 색상 쿼리 테이블(color lookup table)의 항목 수.

장치가 색상 쿼리 테이블을 사용하지 않으면 이 값은 0입니다.

device-width
device-aspect-ratio

출력 장치가 렌더링하는 표면(예: 화면)의 높이.

device-width
device-height

출력 장치가 렌더링하는 표면(예: 화면)의 너비.

device-width
Media Queries Level 4에서 폐지됨.

display-mode

애플리케이션의 표시 모드, 예를 들어 웹 애플리케이션의 manifest의 display 멤버에 지정.
Web App Manifest spec에서 정의됨.

forced-colors

Media Queries Level 5에서 추가됨
사용자代理가 팔레트를 제한하는지 검사. grid
출력 장치가 그리드 스크린인지 점맵 스크린인지 사용하는가? height
뷰포트(viewport)의 높이.

hover

Media Queries Level 4에서 추가됨
주 입력 메커니즘에서 사용자가 요소에 마우스를 올리는 것을 허용하는가?

inverted-colors

Media Queries Level 5에서 추가됨
브라우저나 하위 운영 체제가 색상을 반전한가?

light-level

Media Queries Level 5에서 추가됨
현재 환경 빛 수준. max-aspect-ratio
표시 구역의 너비와 높이 간의 최대 비율. max-color
출력 장치의 각 색상 성분의 최대 비트 수. max-color-index
장치가 표시할 수 있는 최대 색상 수. 표시 구역의 최대 높이, 예를 들어 브라우저 창.
max-monochrome 단색(회색) 장치에서 각 "색"의 최대 비트 수.
max-resolution 장치의 최대 해상도, dpi 또는 dpcm을 사용.
max-width 표시 구역의 최대 너비, 예를 들어 브라우저 창.
min-aspect-ratio 표시 구역의 너비와 높이 간의 최소 비율.
min-color 출력 장치의 각 색상 성분의 최소 비트 수.
min-color-index 장치가 표시할 수 있는 최소 색상 수.
min-height 표시 구역의 최소 높이, 예를 들어 브라우저 창.
min-monochrome 단색(회색) 장치에서 각 "색"의 최소 비트 수.
min-resolution 장치의 최저 해상도, dpi 또는 dpcm을 사용
min-width 표시 구역의 최소 너비, 예를 들어 브라우저 창
monochrome

단색 프레임 버퍼의 각 픽셀의 비트 깊이

장치가 검은색 화면이 아니면 이 값은 0입니다
orientation 비윈트(viewport)의 회전 방향(가로 모드 또는 세로 모드)
overflow-block

출력 장치가 블록 축에서 비윈트(viewport)을 벗어나는 내용을 어떻게 처리하는지

Media Queries Level 4에서 추가됨
overflow-inline

인라인 축에서 비윈트(viewport)을 벗어나는 내용이 스크롤 가능한지

Media Queries Level 4에서 추가됨
pointer

주요 입력 장치가 포인터 장치이며, 그 정확도는 어떻게 되나요?

Media Queries Level 4에서 추가됨
prefers-color-scheme

사용자가 밝은 색상 Scheme 또는 어두운 색상 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 출력 장치의 해상도, dpi 또는 dpcm을 사용
scan 출력 장치의 스캔 과정(텔레비전 등에 적용)
scripting

스크립트(예: JavaScript)가 사용 가능한지探测

Media Queries Level 5에서 추가됨
update

출력 장치가 내용을 렌더링하는 빈도

Media Queries Level 4에서 추가됨
width 비윈트(viewport)의 너비

더 많은 예제

예제 2

브라우저의 너비가 600픽셀 이하이면 요소를 숨기십시오：

@media screen and (max-width: 600px) {
  div.example {
    display: none;
  }
}

직접 시도해 보세요

예제 3

화면 너비가 800픽셀 이상이면, 배경색을 연보라색으로 설정하는 미디어 쿼리를 사용하십시오；화면 너비가 400픽셀에서 799픽셀 사이이면, 배경색을 연绿色发展하는 미디어 쿼리를 사용하십시오. 화면 너비가 400픽셀보다 작으면 배경색은 연파란색입니다：

body {
  background-color: lightblue;
}
@media screen and (min-width: 400px) {
  body {
    background-color: lightgreen;
  }
}
@media screen and (min-width: 800px) {
  body {
    background-color: lavender;
  }
}

직접 시도해 보세요

예제 4

대화면에서 수평으로, 소화면에서 수직으로 표시되는 반응형 네비게이션 메뉴를 만듭니다：

@media screen and (max-width: 600px) {
  .topnav a {
    float: none;
    width: 100%;
  }
}

직접 시도해 보세요

예제 5

미디어 쿼리를 사용하여 반응형 열 레이아웃을 만듭니다：

/* 992px 이하의 화면에서는 네 열에서 두 열로 변경됩니다 */
@media screen and (max-width: 992px) {
  .column {
    width: 50%;
  }
}
/* 너비가 600픽셀 이하인 화면에서는 각 열을 쌓아 올려 배치하는 것이 아니라 가로로 배치합니다 */
@media screen and (max-width: 600px) {
  .column {
    width: 100%;
  }
}

직접 시도해 보세요

예제 6

미디어 쿼리를 사용하여 반응형 웹사이트를 만듭니다：

직접 시도해 보세요

예제 7

미디어 쿼리는 브라우저 방향에 따라 페이지 레이아웃을 변경하는 데도 사용될 수 있습니다. 브라우저 창의 너비가 높이보다 큰 경우（즉, '가로' 방향）에만 적용되는 CSS 속성 집합을 작성할 수 있습니다。

가로 모드가 활성화되어 있을 때는 연한 파란색 배경색을 사용합니다：

@media only screen and (orientation: landscape) {
  body {
    background-color: lightblue;
  }
}

직접 시도해 보세요

예제 8

미디어 쿼리를 사용하여 문서가 화면에서 표시될 때 초록색으로, 인쇄될 때 검은색으로 텍스트 색상을 설정합니다：

@media screen {
  body {
    color: green; 
  }
}
@media print {
  body {
    color: black; 
  }
}

직접 시도해 보세요

예제 9

구분된 목록: 콤마를 사용하여 기존 미디어 쿼리에 다른 미디어 쿼리를 추가합니다（OR 연산자와 유사한 행동）：

/* 600px와 900px 사이 또는 1100px 이상의 너비일 때 - <div>의 외관을 변경합니다 */
@media screen and (max-width: 900px) and (min-width: 600px), (min-width: 1100px) {
  div.example {
    font-size: 50px;
    padding: 50px;
    border: 8px solid black;
    background: yellow;
  }
}

직접 시도해 보세요

브라우저 지원

표中的数字은 @media 규칙을 완전히 지원하는 첫 번째 브라우저 버전을 나타냅니다。

크롬 IE / 엣지 파이어폭스 사파리 오페라
21 9 3.5 4.0 9