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