중단점 너머: CSS에서 사용자 기본 설정 미디어 쿼리 활용

웹사이트나 앱을 구축한다면 미디어 쿼리 작업을 할 가능성이 높습니다. 이 편리한 CSS 도구를 사용하면 장치 크기에 따라 레이아웃을 조정할 수 있습니다. 이는 반응형 디자인의 핵심 부분입니다.

기기의 너비, 가로 세로 비율, 방향 등을 기준으로 쿼리할 수 있습니다. 이를 통해 사용 중인 장치에 맞게 레이아웃을 미세 조정할 수 있습니다.

사용자의 기기 크기나 방향보다는 사용자의 선호도에 따라 사이트나 앱을 맞춤화할 수 있는 다른 미디어 쿼리가 있다는 사실을 모를 수도 있습니다.

사용자 기본 설정 미디어 쿼리

사용자 선호도를 다루는 여러 가지 미디어 쿼리가 있습니다. 이를 사용하여 사용자를 위한 앱 경험을 세부적으로 조정할 수 있습니다.

선호 색상 구성을 사용한 자동 다크 모드

요즘 다크 모드는 어디에나 있습니다. 이제 모든 사이트에는 밝은 모드와 어두운 모드 사이를 전환할 수 있는 해/달 토글 버튼이 있는 것 같습니다. 여기서 한 단계 더 나아가 Presfers-color-scheme 미디어 쿼리를 사용하면 사용자의 기기가 밝은 색상 모드를 사용하는지 어두운 색상 모드를 사용하는지 자동으로 확인할 수 있습니다.

작동 방식은 다음과 같습니다. 평소와 같이 조명 모드에 대한 CSS 스타일을 정의합니다. 그런 다음 미디어 쿼리 Pres-color-scheme: dark를 추가합니다. 여기에 조명 모드 색상을 재정의하는 CSS 규칙을 추가하세요.

.content {
  background-color: white;
  color: black;
}

@media (prefers-color-scheme: dark) {
  .content {
    background-color: black;
    color: white;
  }
}

팁: CSS 변수를 사용하여 테마 만들기

좀 더 쉽게 만들기 위해 CSS 변수 세트인 테마에서 모든 색상을 정의할 수 있습니다. 그런 다음 Prefers-color-scheme: dark 블록 내에서 CSS 선택기와 규칙을 다시 추가하는 대신 변수만 재정의하면 됩니다.

--main-background: white;
--text-color: black;

.content {
  background-color: var(--main-background);
  color: var(--text-color);
}

@media (prefers-color-scheme: dark) {
  --main-background: black;
  --text-color: white;
}

선호 감소 모션을 사용한 톤다운 애니메이션

애니메이션은 앱 경험을 향상시킬 수 있지만 시력이나 전정 문제가 있는 사용자에게는 애니메이션이 어려울 수 있습니다. 이러한 사용자를 지원하기 위해 일부 장치 및 운영 체제에는 사용자 기본 설정에 동작을 줄이는 옵션이 있습니다.

prefers-reduced-motion 미디어 쿼리를 사용하여 사용자 기기에 해당 옵션이 활성화된 시기를 감지할 수 있습니다. 그런 다음 덜 강렬한 대체 애니메이션을 사용할 수 있습니다(또는 완전히 끌 수도 있습니다).

Prefers-Reduced-Motion을 사용하여 애니메이션을 끄는 예는 다음과 같습니다.

.content {
  animation: my-awesome-animation 250ms ease-in-out;
}

@media (prefers-reduced-motion: reduce) {
  .content {
    animation: none;
  }
}

주의할 점: 이와 같은 애니메이션을 끄는 경우 animationend 이벤트에 의존하는 코드가 없는지 확인하세요. 위와 같이 애니메이션을 없음으로 설정하면 이 이벤트가 절대 실행되지 않습니다.

모션 감소를 선호하는 경우 애니메이션을 끌 필요가 없다는 점을 명심하세요. 일치 항목을 줄이세요! 요소가 뷰 안으로 튀어오르는 멋진 공개 애니메이션이 있다고 가정해 보세요. 사용자가 모션 감소를 원하는 경우 이를 간단한 페이드인 애니메이션으로 변경할 수 있습니다.

선호 대비를 사용한 적응형 대비

시각 장애가 있는 일부 사용자는 기기에서 대비 증가를 활성화했을 수 있습니다. 선호 대비 미디어 쿼리를 사용하면 이러한 상황을 처리할 수 있습니다.

이 미디어 쿼리가 일치하면 대비를 조정하여 해당 사용자가 더 쉽게 볼 수 있도록 할 수 있습니다.

.content {
  background-color: white;
  color: black;
}

@media (prefers-color-scheme: dark) {
  .content {
    background-color: black;
    color: white;
  }
}

JavaScript로 미디어 쿼리 확인

JavaScript로 애니메이션을 만들고 있다고 가정해 보세요. 예를 들어 Web Animations API를 사용하고 있을 수도 있습니다. 이러한 애니메이션은 CSS에 정의되어 있지 않으므로 Prefers-Reduced-Motion 미디어 쿼리를 사용하여 애니메이션을 끌 수 없습니다.

아니면 할 수 있나요?

그렇습니다! window.matchMedia 메서드를 사용하여 JavaScript에서 미디어 쿼리를 평가할 수 있습니다. 미디어 쿼리는 인수로 전달되고 메서드는 MediaQueryList라는 항목을 반환합니다.

이 개체에는 이 미디어 쿼리가 현재 일치하는지 여부를 나타내는 부울인 일치 속성이 있습니다. 값에 따라 애니메이션 여부를 결정할 수 있습니다.

다음은 window.matchMedia를 사용하여 DOM 요소에서 조건부로 애니메이션을 호출하는 방법을 보여주는 간단한 예입니다.

--main-background: white;
--text-color: black;

.content {
  background-color: var(--main-background);
  color: var(--text-color);
}

@media (prefers-color-scheme: dark) {
  --main-background: black;
  --text-color: white;
}

변화에 반응하기

MediaQueryList에는 조건이 변경되어 미디어 쿼리가 더 이상 적용되지 않는 경우 실행되는 변경 이벤트도 있습니다.

대형 디스플레이에만 실행하려는 JavaScript 코드가 있다고 가정해 보겠습니다. 사용자의 화면 크기가 작은 경우 이 코드를 건너뛰는 것이 좋습니다. 최대 너비 쿼리나 이와 유사한 쿼리를 사용하여 window.matchMedia를 호출하면 됩니다.

나중에 사용자가 창 크기를 조정하고 이제 대형 화면 전용 JavaScript 코드를 실행하려고 한다고 가정해 보겠습니다. MediaQueryList의 변경 이벤트를 수신하면 이벤트의 match 속성을 확인하여 새 값이 무엇인지 확인할 수 있습니다.

요약

이러한 미디어 쿼리는 웹사이트나 앱 내에서 사용자 경험을 더욱 개인화하는 데 도움이 될 수 있습니다. 어두운 색 구성표를 자동으로 적용하고 사용자 기본 설정에 따라 애니메이션과 대비를 미세 조정할 수도 있습니다. 또한 접근성에도 도움이 되는데, 이는 언제나 큰 도움이 됩니다.

아직 실험 단계이지만 사용자 기기에 더 적은 데이터를 사용하는 요구 사항이 있는지 여부를 나타내는 선호 감소 데이터 쿼리도 주목할 수 있습니다. 이는 데이터를 덜 사용하는 대체 콘텐츠를 제공하는 데 사용될 수 있습니다. 예를 들어, 필수적이지 않은 이미지를 건너뛰거나 저해상도 버전을 사용할 수 있습니다.

위 내용은 중단점 너머: CSS에서 사용자 기본 설정 미디어 쿼리 활용의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!