미디어 기능

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

미디어 쿼리가 도입되면서 이 모든 것이 바뀌었습니다. 디자이너가 처음으로 사람들의 요구를 수용할 수 있게 된 것입니다. 디자이너는 사용자의 기기에 맞게 레이아웃을 조정할 수 있습니다.

미디어 쿼리는 선택사항인 미디어 유형과 필수 미디어 기능으로 구성됩니다. 수년 동안 미디어 유형에는 큰 변화가 없었습니다. 여전히 가능한 값은 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이면 디스플레이를 빠르게 새로고침할 수 없습니다. e-ink 디스플레이는 새로고침 빈도가 느린 화면의 한 예입니다.

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 미디어 기능을 사용하면 이러한 다양한 옵션에 맞게 스타일을 조정할 수 있습니다.

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

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)를 보고할 수도 있습니다. 자세한 내용은 상호작용에 관한 모듈을 참고하세요.

사용자 환경설정 쿼리

CSS를 사용하면 사용자가 원하는 방식으로 콘텐츠에 액세스할 수 있도록 사용자와 공동작업할 수 있습니다. 이 강의에서는 사용자 기기의 크기와 기능에 따라 다양한 CSS를 적용하는 방법을 배웠습니다. 하지만 사용자의 설정에 따라 다른 CSS를 적용할 수도 있습니다.

어두운 모드와 밝은 모드

밝은 테마 또는 어두운 테마에 대한 사용자의 환경설정에 응답할 수 있습니다. 많은 사용자가 이를 시스템 환경설정으로 설정합니다.

UI 요소의 색 구성표 설정

브라우저는 스크롤바, 양식 요소와 같은 항목에 기본 색상을 제공합니다. color-scheme: light를 사용하는 사용자에게 밝은 테마를 사용할지, color-scheme: dark를 사용하는 사용자에게 어두운 테마를 사용할지 지정할 수 있습니다. color-scheme: light dark를 사용하여 페이지가 둘 다 지원하도록 지정할 수도 있습니다. :root 또는 html 요소에서 이를 설정하여 전체 페이지의 스키마를 설정할 수 있으며, 특정 요소에 대해 재정의할 수도 있습니다.

스타일이 로드되기 전에 페이지의 스키마를 설정하기 위해 color-scheme에 meta 태그를 설정할 수도 있습니다. 페이지의 요소에 color-scheme: normal를 설정하면 이 메타 태그에 설정한 color-scheme 값이 사용됩니다.

<meta name="color-scheme" content="dark light">

prefers-color-scheme 미디어 기능

prefers-color-scheme의 미디어 쿼리를 사용하여 사용자가 선호하는 색상 테마에 대한 응답으로 맞춤 스타일을 정의할 수도 있습니다.

light-dark

사용자에게 밝은 테마와 어두운 테마를 모두 선택할 수 있는 옵션을 제공하는 경우 미디어 쿼리 내에서 각 색상을 설정하는 것이 장황하다고 생각할 수 있습니다. light-dark()를 사용하면 단일 속성에서 두 가지를 모두 지정할 수 있습니다.

이를 사용 설정하려면 요소 또는 상위 요소 중 하나에 color-scheme: light dark를 설정해야 합니다. 먼저 밝은 모드에서 사용할 색상을 설정한 다음 어두운 모드에서 사용할 색상을 설정합니다.

h1{
  color: light-dark( var(--text-light), var(--text-dark));
}

사용자가 시스템 환경설정을 밝은 모드를 요청하도록 설정한 경우 제목이 검은색으로 표시됩니다. 어두운 모드를 선호하는 경우 헤더가 흰색으로 표시됩니다.

대비 환경설정

사용자는 대비가 높거나 낮은 콘텐츠를 더 쉽게 읽을 수 있으며, 자신에게 가장 적합한 테마로 시스템을 설정하여 테마를 재정의할 수 있습니다. 사이트가 사용자의 환경설정과 여전히 잘 작동하는지 확인하는 것이 귀하의 역할입니다.

캐스케이드 모듈에서 !important 로컬 사용자 스타일이 웹페이지에서 제공하는 작성된 스타일을 재정의할 수 있다고 설명했습니다. 이를 통해 사용자는 자신에게 더 적합한 스타일을 사용할 수 있습니다.

강제 색상

Windows에서는 사용자가 선택하여 웹사이트의 테마를 재정의할 수 있는 '대비 테마'를 제공합니다. 이러한 테마는 고대비 테마인 경우가 많으며 밝은 모드 또는 어두운 모드일 수 있습니다. CSS에서는 이를 강제 색상이라고 하며 대부분의 경우 사이트가 이 모드에서 예상대로 작동합니다. 버튼, 링크, 입력, 기타 콘텐츠는 테마의 색상을 사용합니다.

비표준 방식으로 요소를 사용하는 경우와 같이 스타일을 조정해야 할 수도 있습니다. @media (forced-colors: active) 미디어 쿼리를 사용하여 사용자가 강제 색상을 사용 설정한 경우 스타일을 적용할 수 있습니다.

색상 선택기나 색상 키가 있는 그래프와 같이 사이트의 스타일이 콘텐츠 자체를 이해하는 데 필수적인 경우가 있습니다. 요소에 forced-color-adjust: none;를 설정하여 강제 색상 모드를 선택 해제할 수 있습니다. 특정 요소에서만 선택 해제하고 콘텐츠가 강제 색상 모드에서 계속 액세스할 수 있는지 확인해야 합니다.

고대비

일부 사용자는 시스템에서 대비를 높이도록 요청할 수도 있습니다. prefers-contrast: more 미디어 쿼리를 사용하여 응답의 스타일을 조정할 수 있습니다.

모션 감소

prefers-reduced-motion 미디어 쿼리를 사용하여 동작 감소에 대한 사용자의 환경설정에 응답할 수 있습니다. 이는 간질, 전정 운동 장애 또는 편두통 민감성이 있는 사용자의 트리거가 될 수 있는 큰 움직임을 피하는 대체 애니메이션을 제공하는 데 자주 사용됩니다. 자세한 내용은 애니메이션 작업 시 고려사항을 참고하세요.

스크립팅

사용자가 JavaScript를 사용 중지한 상태로 사이트를 방문할 수 있으며, scripting 미디어 쿼리를 사용하여 콘텐츠에 계속 액세스할 수 있도록 CSS를 조정할 수 있습니다.

@media (scripting: none) {
  /* Styles when JavaScript is disabled*/
 }

@media (scripting: initial-only) {
  /* Styles when JavaScript is available only for an initial render, for example with a printed page or server side rendering */
}

@media (scripting: enabled) {
   /* Styles when Javascript is enabled */
}

이해도 확인

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