미디어 기능

미디어 기능을 사용하여 기기와 환경설정에 응답하는 모든 방법을 요약합니다.

미디어 쿼리가 없다면 반응형 디자인을 구현할 수 없습니다. 미디어 쿼리 이전에는 사용자가 웹사이트를 방문하는 데 어떤 기기를 사용하고 있는지 알 수 있는 방법이 없었습니다. 디자이너는 가정을 해야 했습니다. 이러한 가정은 고정 너비 디자인 또는 유동 레이아웃으로 인코딩되었습니다.

미디어 쿼리가 도입되면서 상황이 달라졌습니다. 디자이너가 처음으로 사용자의 중간 지점에서 만날 수 있게 되었습니다. 디자이너는 사용자의 기기에 맞게 레이아웃을 조정할 수 있습니다.

미디어 쿼리는 선택적 미디어 유형과 필수 미디어 기능으로 구성됩니다. 지난 몇 년간 미디어 유형은 크게 변하지 않았습니다. 가능한 값은 여전히 4가지뿐입니다.

@media all
@media screen
@media print
@media speech

반면 미디어 기능은 크게 확장되었습니다. 이제 디자이너는 화면 크기 외에도 다양한 요소에 맞게 디자인을 조정하여 사용자의 요구를 충족할 수 있습니다.

Browser Support

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 3.

Source

표시 영역 크기

웹에서 가장 인기 있는 미디어 쿼리는 뷰포트 너비를 처리하는 쿼리입니다. 하지만 여기에서도 선택할 수 있습니다. max-width 미디어 기능을 사용하여 특정 너비 미만의 스타일을 적용하거나 min-width 미디어 기능을 사용하여 특정 너비를 초과하는 스타일을 적용할 수 있습니다.

main {
  display: grid;
  grid-template-columns: 2fr 1fr;
}
@media (max-width: 45em) {
  main {
    display: block;
  }
}
@media (min-width: 45em) {
  main {
    display: grid;
    grid-template-columns: 2fr 1fr;
  }
}

저는 개인적으로 min-width를 사용하는 것을 좋아합니다. 레이아웃 스타일을 추가 방식으로 적용합니다. 이전 규칙을 실행취소하는 대신 각 브레이크포인트에서 새 레이아웃 규칙을 도입합니다.

이 추가 접근 방식은 높이에도 적용됩니다. min-height를 사용하면 더 많은 뷰포트 높이를 사용할 수 있게 되면서 더 많은 규칙을 도입할 수 있습니다. 예를 들어 세로 공간이 충분한 경우 브라우저 창 상단에 고정하려는 헤더 요소가 있을 수 있습니다.

@media (min-height: 30em) {
  header {
    position: fixed;
  }
}

원하는 경우 max-height 미디어 기능을 사용할 수 있습니다. 여기서 헤더는 기본적으로 고정되지만 세로 공간이 충분하지 않으면 고정 상태가 삭제됩니다.

header {
  position: fixed;
}
@media (max-height: 30em) {
  header {
    position: static;
  }
}

min-max- 접두사 중에서 선택하는 것은 widthheight에만 적용되지 않습니다. aspect-ratio 미디어 기능도 동일한 선택을 제공합니다. 또한 너비와 높이의 정확한 비율로 스타일을 적용하려는 경우 접두사가 없는 버전도 제공합니다.

@media (min-aspect-ratio: 16/9) {
  // The ratio of width to height is at least 16 by 9.
}
@media (max-aspect-ratio: 16/9) {
  // The ratio of width to height is less than 16 by 9.
}
@media (aspect-ratio: 16/9) {
  // The ratio of width to height is exactly 16 by 9.
}

가로세로 비율에 따라 다른 스타일을 제공하는 것은 금방 불가능해질 수 있습니다. 세부적인 수준의 제어가 필요하지 않은 경우 orientation 미디어 기능이 더 적합할 수 있습니다. 가능한 값은 portrait 또는 landscape 두 가지입니다.

@media (orientation: portrait) {
  // The width is less than the height.
}
@media (orientation: landscape) {
  // The width is greater than the height.
}

'세로 모드' 및 '가로 모드'라는 용어는 휴대기기의 방향을 나타내는 데 가장 자주 사용되지만 orientation 미디어 기능은 기기별이 아닙니다. 일반적인 노트북의 전체 화면 브라우저 창의 orientation 값은 landscape입니다.

디스플레이

디스플레이마다 픽셀 밀도가 다르며, 이는 인치당 도트(dpi)로 측정됩니다. resolution 미디어 기능을 사용하여 다양한 픽셀 밀도에 맞게 스타일을 조정할 수 있습니다. aspect-ratio와 마찬가지로 resolution에는 최소, 최대, 정확한 세 가지 유형이 있습니다.

@media (min-resolution: 300dpi) {
  // The display has a pixel density of at least 300 dots per inch.
}
@media (max-resolution: 300dpi) {
  // The display has a pixel density less than 300 dots per inch.
}
@media (resolution: 300dpi) {
  // The display has a pixel density of exactly 300 dots per inch.
}

resolution 미디어 쿼리를 사용하지 않아도 될 수도 있습니다. 픽셀 밀도는 일반적으로 이미지에만 문제가 되며 반응형 이미지는 HTML에서 픽셀 밀도를 직접 처리하는 방법입니다.

반면 CSS는 애니메이션과 전환을 정의하는 곳입니다. update 미디어 기능을 사용하여 이러한 애니메이션과 전환을 조정하여 다양한 새로고침 레이트에 반응할 수 있습니다. 이 미디어 기능은 none, slow, fast 값 중 하나를 보고합니다.

update 값이 none이면 새로고침 빈도가 없음을 의미합니다. 예를 들어 인쇄된 페이지는 업데이트할 수 없습니다.

update 값이 slow이면 디스플레이를 빠르게 새로고침할 수 없습니다. 전자잉크 디스플레이는 새로고침 빈도가 느린 화면의 한 가지 예입니다.

update 값이 fast이면 디스플레이가 애니메이션과 전환을 처리할 만큼 빠르게 새로고침된다는 의미입니다.

@media (update: fast) {
  a {
    transition-duration: 0.4s;
    transition-property: transform;
  }
  a:hover {
    transform: scale(150%);
  }
}

디스플레이의 모든 측면이 하드웨어 기능과 관련된 것은 아닙니다. 테마 설정에 관한 모듈에서는 웹 앱 매니페스트 파일에서 속성을 정의하는 방법을 알아봤습니다. 이러한 속성 중 하나는 display이며 fullscreen, standalone, minimum-ui 또는 browser 값을 지정할 수 있습니다. 상응하는 display-mode 미디어 기능을 사용하면 이러한 다양한 옵션에 맞게 스타일을 조정할 수 있습니다.

웹 앱 매니페스트에 displaystandalone를 제공했다고 가정해 보겠습니다. 사용자가 사이트를 홈 화면에 추가하면 브라우저 인터페이스 없이 사이트가 실행됩니다. 이러한 사용자에게는 뒤로 버튼을 표시할 수 있습니다.

button.back {
  display: none;
}
@media (display-mode: standalone) {
  button.back {
     display: inline;
  }
}

색상

기기의 색상 기능을 쿼리하는 다양한 미디어 기능이 있습니다. 회색 음영만 출력하는 디스플레이의 스타일을 조정하려면 값 없이 monochrome 미디어 기능을 사용하면 됩니다.

@media (monochrome) {
  body {
    color: black;
    background-color: white;
  }
}

상응하는 color 미디어 기능이 있습니다.

@media (color) {
  body {
    color: maroon;
    background-color: linen;
  }
}

컬러 화면의 경우 미디어 기능 color-gamut, color-index 또는 dynamic-range를 사용하여 쿼리를 작성할 수 있습니다. 모두 화면의 색상 기능에 관한 구체적인 세부정보를 보고합니다.

이 예에서는 디스플레이의 최대 밝기, 색상 심도, 명암비 조합을 보고하는 dynamic-range 미디어 기능에 응답하여 색상 값이 업데이트됩니다. 가능한 값은 standard 또는 high입니다. dynamic-range 값이 high인 고화질 화면에는 새 CSS color() 함수를 사용하여 다른 색상 공간이 제공됩니다.

.neon-red {
  color: hsl(355 100% 95%);
}
@media (dynamic-range: high) {
  .neon-red {
    color: color(display-p3 1 0 0);
  }
}

상호작용

미디어 기능은 사이트와 상호작용하는 데 사용되는 입력 메커니즘의 종류(hover, any-hover, pointer, any-pointer)도 보고할 수 있습니다. 자세한 내용은 상호작용에 관한 모듈을 참고하세요.

환경설정

사용자 환경설정에 응답할 수 있는 다양한 미디어 쿼리(prefers-color-scheme, prefers-contrast, prefers-reduced-motion)가 있습니다. 자세한 내용은 테마 설정접근성에 관한 모듈을 참고하세요.

하나의 미디어 쿼리에서 미디어 기능을 결합할 수 있습니다. 기기의 새로고침 빈도가 빠르고 사용자가 모션 감소를 선호하지 않는 경우에만 애니메이션 스타일이 적용되도록 범위를 지정할 수 있습니다.

@media (update: fast) and (prefers-reduced-motion: no-preference) {
  a {
    transition-duration: 0.4s;
    transition-property: transform;
  }
  a:hover {
    transform: scale(150%);
  }
}

미디어 기능 더보기

더 많은 미디어 기능이 출시될 예정입니다.

forced-colorsinverted-colors 미디어 기능은 기기가 제한된 색상 팔레트를 사용 중이거나 색상 팔레트를 반전했는지 보고합니다.

scripting 미디어 기능을 사용하면 JavaScript의 사용 가능 여부에 따라 CSS를 조정할 수 있습니다.

prefers-reduced-data라는 미디어 기능을 사용하면 사용자가 사용량이 청구되는 연결에 있다고 지정할 수 있으므로 더 작거나 적은 수의 애셋을 전송할 수 있습니다.

다른 제안서는 아직 수립 중입니다. 다음과 마지막 모듈에서는 다양한 화면 구성을 처리하는 미디어 기능에 관한 제안서를 알아봅니다.

이해도 확인

미디어 기능에 대한 지식 테스트

미디어 쿼리는 @media (width: 1024px)과 같이 특정 너비의 기기를 확인할 수 있나요?

특정 너비는 1023px보다 크고 1025px보다 작은 너비를 동시에 확인하는 경우에만 얻을 수 있습니다.
거짓
min-widthmax-width를 사용할 수 있습니다.

미디어 쿼리는 @media (aspect-ratio: 4/3)와 같은 특정 aspect-ratio에서 기기를 확인할 수 있나요?

가로세로 비율의 경우 단일 비율을 일치시킬 수 있습니다.
거짓
aspect-ratio에는 이 옵션이 있습니다.

유효한 색상 미디어 쿼리는 무엇인가요?

@media (color)
모든 색상 기기와 일치합니다.
@media (monochrome)
색상 기능이 없는 모든 기기와 일치합니다.
@media (color-gamut: srgb)
sRGB 색상 기능이 있는 기기와 일치합니다.
@media (min-color-index: 15000)
사용 가능한 색상이 15,000개 이상인 기기와 일치합니다.
@media (dynamic-range: high)
HD 색상 범위를 지원하는 기기와 일치합니다.

다음 중 유효한 사용자 환경설정 미디어 쿼리는 무엇인가요?

@media (prefers-color-scheme: dark)
사용자가 운영체제를 어두운 모드로 설정했을 때 일치합니다.
@media (prefers-colors: high-definition)
실제가 아닙니다.
@media (prefers-reduced-motion: reduce)
사용자가 운영체제를 모션 감소로 설정한 경우 일치합니다.
@media (prefers-contrast: more)
사용자가 운영체제를 더 높은 대비로 설정한 경우 일치합니다.
@media (prefers-site-speed: fast)
실제가 아닙니다.