미디어 기능

미디어 기능을 통해 사용자가 장치에 응답하고 선호합니다.

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

이러한 상황은 미디어 쿼리가 도입되면서 바뀌었습니다. 처음으로 디자이너는 사람들을 절반 정도 만날 수 있었습니다. 디자이너는 사용자의 기기에 반응하도록 레이아웃을 조정할 수 있습니다.

미디어 쿼리는 선택적 미디어 유형과 필수 미디어 기능으로 구성된다는 점을 기억하세요. 수년간 미디어 유형에는 그다지 변화가 없었습니다. 여전히 사용할 수 있는 값은 4가지뿐입니다.

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

반면 미디어 기능은 크게 확대되었습니다. 디자이너들은 이제 절반 이상의 사용자를 만날 수 있으며, 단순한 화면 크기보다 훨씬 더 잘 맞도록 디자인을 조정할 수 있습니다.

표시 영역 크기

지금까지 웹에서 가장 많이 사용되는 미디어 쿼리는 표시 영역 너비를 처리하는 쿼리입니다. 그러나 여기에서도 선택권이 제공됩니다. 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- 접두사 중에서 선택하는 것은 width 및 height에만 적용되는 것은 아닙니다. 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 미디어 기능을 사용하면 이러한 다양한 옵션에 맞게 스타일을 맞춤설정할 수 있습니다.

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

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입니다. high의 dynamic-range 값을 보고하는 고화질 화면에는 새 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-colors 및 inverted-colors 미디어 기능은 기기에서 제한된 색상 팔레트를 사용하는지 또는 반전된 색상 팔레트를 사용하는지 보고합니다.

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

prefers-reduced-data라는 미디어 기능을 사용하면 데이터 전송량 제한이 있는 연결을 사용 중임을 사용자가 지정할 수 있으므로 더 작게 또는 더 적은 애셋을 전송할 수 있습니다.

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

이해도 확인

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