CSS @미디어 규칙

❮ 이전 완전한 CSS 참조 다음 ❯

예시

브라우저 창 너비가 600px 이하인 경우 <body> 요소의 배경색을 "lightblue"로 변경합니다.

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

아래에서 더 많은 "직접 사용해 보기" 예를 살펴보세요.

정의 및 사용

@media규칙은 미디어 쿼리에서 다양한 미디어 유형/장치에 대해 다른 스타일을 적용하는 데 사용됩니다 .

미디어 쿼리는 다음과 같은 많은 것을 확인하는 데 사용할 수 있습니다.

뷰포트의 너비와 높이
장치의 너비와 높이
방향(태블릿/휴대전화가 가로 또는 세로 모드에 있습니까?)
해결

미디어 쿼리를 사용하는 것은 맞춤형 스타일 시트(반응형 웹 디자인)를 데스크톱, 랩톱, 태블릿 및 휴대폰에 제공하는 데 널리 사용되는 기술입니다.

미디어 쿼리를 사용하여 특정 스타일이 인쇄된 문서 또는 화면 판독기(미디어 유형: 인쇄, 화면 또는 음성)에만 사용되도록 지정할 수도 있습니다.

미디어 유형 외에도 미디어 기능도 있습니다. 미디어 기능은 사용자 에이전트 또는 디스플레이 장치의 특정 기능을 테스트할 수 있도록 하여 미디어 쿼리에 보다 구체적인 세부 정보를 제공합니다. 예를 들어 특정 너비보다 크거나 작은 화면에만 스타일을 적용할 수 있습니다.

브라우저 지원

표의 숫자는 @media 규칙을 완전히 지원하는 첫 번째 브라우저 버전을 지정합니다.

Property
@media	21	9	3.5	4.0	9

CSS 구문

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

not , only 및 키워드 의 의미 :

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

only: only 키워드는 미디어 기능이 있는 미디어 쿼리를 지원하지 않는 이전 브라우저가 지정된 스타일을 적용하지 못하도록 합니다. 최신 브라우저에는 영향을 미치지 않습니다.

and: and 키워드는 미디어 기능을 미디어 유형 또는 기타 미디어 기능과 결합합니다.

모두 선택 사항입니다. 그러나 not 또는 only 를 사용하는 경우 미디어 유형도 지정해야 합니다.

다음과 같이 미디어 별로 다른 스타일시트 를 사용할 수도 있습니다 .

미디어 유형

Value	Description
all	Default. Used for all media type devices
print	Used for printers
screen	Used for computer screens, tablets, smart-phones etc.
speech	Used for screenreaders that "reads" the page out loud

미디어 기능

Value	Description
any-hover	Does any available input mechanism allow the user to hover over elements? (added in Media Queries Level 4)
any-pointer	Is any available input mechanism a pointing device, and if so, how accurate is it? (added in Media Queries Level 4)
aspect-ratio	The ratio between the width and the height of the viewport
color	The number of bits per color component for the output device
color-gamut	The approximate range of colors that are supported by the user agent and output device (added in Media Queries Level 4)
color-index	The number of colors the device can display
grid	Whether the device is a grid or bitmap
height	The viewport height
hover	Does the primary input mechanism allow the user to hover over elements? (added in Media Queries Level 4)
inverted-colors	Is the browser or underlying OS inverting colors? (added in Media Queries Level 4)
light-level	Current ambient light level (added in Media Queries Level 4)
max-aspect-ratio	The maximum ratio between the width and the height of the display area
max-color	The maximum number of bits per color component for the output device
max-color-index	The maximum number of colors the device can display
max-height	The maximum height of the display area, such as a browser window
max-monochrome	The maximum number of bits per "color" on a monochrome (greyscale) device
max-resolution	The maximum resolution of the device, using dpi or dpcm
max-width	The maximum width of the display area, such as a browser window
min-aspect-ratio	The minimum ratio between the width and the height of the display area
min-color	The minimum number of bits per color component for the output device
min-color-index	The minimum number of colors the device can display
min-height	The minimum height of the display area, such as a browser window
min-monochrome	The minimum number of bits per "color" on a monochrome (greyscale) device
min-resolution	The minimum resolution of the device, using dpi or dpcm
min-width	The minimum width of the display area, such as a browser window
monochrome	The number of bits per "color" on a monochrome (greyscale) device
orientation	The orientation of the viewport (landscape or portrait mode)
overflow-block	How does the output device handle content that overflows the viewport along the block axis (added in Media Queries Level 4)
overflow-inline	Can content that overflows the viewport along the inline axis be scrolled (added in Media Queries Level 4)
pointer	Is the primary input mechanism a pointing device, and if so, how accurate is it? (added in Media Queries Level 4)
resolution	The resolution of the output device, using dpi or dpcm
scan	The scanning process of the output device
scripting	Is scripting (e.g. JavaScript) available? (added in Media Queries Level 4)
update	How quickly can the output device modify the appearance of the content (added in Media Queries Level 4)
width	The viewport width

더 많은 예

예시

브라우저 너비가 600px 이하인 경우 요소를 숨깁니다.

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

예시

미디어 쿼리를 사용하여 뷰포트 너비가 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;
}
}

예시

반응형 탐색 메뉴 만들기(큰 화면에서는 가로로 표시되고 작은 화면에서는 세로로 표시됨):

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

예시

미디어 쿼리를 사용하여 반응형 열 레이아웃 만들기:

/* On screens that are 992px wide or less, go from four columns to two columns */
@media screen and (max-width: 992px) {
.column {
    width: 50%;
  }
}

/* On screens that are 600px wide or less, make the columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
  .column {
    width: 100%;
  }
}

예시

미디어 쿼리를 사용하여 반응형 웹사이트 만들기:

예시

미디어 쿼리를 사용하여 브라우저의 방향에 따라 페이지 레이아웃을 변경할 수도 있습니다. 브라우저 창이 높이보다 넓을 때만 적용되는 CSS 속성 집합을 가질 수 있습니다. 이를 "가로" 방향이라고 합니다.

방향이 가로 모드인 경우 밝은 파란색 배경색을 사용합니다.

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

예시

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

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

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

예시

쉼표로 구분된 목록 : 쉼표를 사용하여 이미 존재하는 쿼리에 미디어 쿼리를 추가합니다(이것은 OR 연산자처럼 작동합니다):

/* When the width is between 600px and 900px OR above 1100px - change the appearance of <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;
}
}

CSS 참조

CSS Properties