Sofia Emelianova
사용자 환경설정 미디어 기능을 사용하면 사용자 자신의 특정 환경설정과 요구사항에 맞게 웹 환경의 스타일을 지정할 수 있습니다. 즉, 환경설정 미디어 기능을 사용하면 사용자 기대치에 맞게 사용자 환경을 조정할 수 있습니다.
다음 세 단계를 통해 웹사이트의 사용자 경험을 개선할 수 있습니다.
- 가능성 탐색하기 모든 사용자 환경설정 미디어 기능을 알아보세요.
- 웹 환경의 스타일을 지정합니다. 예를 들어 환경설정에 따라 색상, 레이아웃, 요소 크기 변경을 구현합니다.
- UI를 테스트합니다. DevTools에서 환경설정을 에뮬레이션하고 웹사이트가 어떻게 동작하는지 테스트합니다.
DevTools는 다양한 에뮬레이션 옵션을 지원합니다. 시스템 및 브라우저 설정을 검색하고 조정하는 것을 피할 수 있도록 모든 에뮬레이션 옵션이 DevTools의 렌더링 탭 아래에 있습니다.
사용자 환경설정의 에뮬레이션 옵션은 다음을 포함하되 이에 국한되지 않습니다.
prefers-color scheme: 밝거나 어두운 색 구성표prefers-contrast: 낮은 대비 또는 높은 대비prefers-reduced-motion: 움직임 최소화 여부prefers-reduced-data: 더 적은 트래픽 사용 여부
모든 에뮬레이션 옵션의 전체 목록은 CSS 미디어 기능 에뮬레이션을 참고하세요.
렌더링 탭을 사용하여 적용할 수 있는 더 많은 효과를 알아보려면 렌더링 탭 개요를 참고하세요.
또한 DevTools를 사용하면 테스트 기능이 작업 중인 단일 기기로 제한되지 않습니다. 기기 모드로 휴대기기 시뮬레이션을 할 수 있습니다.