CSS 미디어 기능 에뮬레이션

Sofia Emelianova
Sofia Emelianova
GitHub

렌더링 탭에서 이 에뮬레이션 옵션 참조를 사용하여 다양한 CSS 미디어 기능을 에뮬레이션합니다.

CSS 미디어 기능 prefers-color-scheme 에뮬레이션

prefers-color-scheme CSS 미디어 기능은 사용자가 밝은 색 구성표와 어두운 색 구성표를 선호하는지 여부를 나타냅니다.

이 조건을 에뮬레이션하려면 다음 안내를 따르세요.

  1. prefers-color-scheme 페이지에서 렌더링 탭을 엽니다.

  2. CSS 미디어 기능 prefers-color-scheme 에뮬레이션의 드롭다운 목록에서 다음 중 하나를 선택합니다.

    • 에뮬레이션 없음
    • prefers-color-scheme:light
    • prefers-color-scheme:dark

  3. 페이지를 새로고침합니다. 예를 들면 다음과 같습니다.

에뮬레이션된 Preferred-color-scheme:dark

CSS 미디어 유형 에뮬레이션 (인쇄 미리보기 사용 설정)

인쇄 미디어 쿼리는 페이지가 인쇄될 때 표시되는 방식을 제어합니다.

강제로 페이지를 인쇄 미리보기 모드로 전환하려면 다음 단계를 따르세요.

  1. 렌더링 탭을 열고 CSS 미디어 유형 에뮬레이션에서 인쇄를 선택합니다.

    인쇄 미리보기 모드

  2. 여기에서 다른 웹페이지와 마찬가지로 CSS를 보고 변경할 수 있습니다. CSS 보기 및 변경 시작하기를 참조하세요.

CSS 미디어 기능 forced-colors 에뮬레이션

forced-colors CSS 미디어 기능은 사용자 에이전트가 강제 색상 모드를 사용 설정했는지를 나타냅니다. 강제 색상 모드의 예로는 Windows 고대비를 들 수 있습니다.

이 조건을 에뮬레이션하려면 다음 안내를 따르세요.

  1. 렌더링 탭을 엽니다.

  2. CSS 미디어 기능 forced-colors 에뮬레이션의 드롭다운 목록에서 다음 중 하나를 선택합니다.

    • 에뮬레이션 없음
    • forced-colors:active
    • forced-colors:none

에뮬레이션된 forced-colors:active 사용:

force-colors:active

CSS 미디어 기능 prefers-contrast 에뮬레이션

prefers-contrast CSS 미디어 기능은 사용자가 웹 콘텐츠에 높은 값, 낮은 값 또는 특정 대비 값을 표시하도록 요청했는지 여부를 나타냅니다.

이 조건을 에뮬레이션하려면 다음 안내를 따르세요.

  1. 렌더링 탭을 엽니다.

  2. CSS 미디어 기능 prefers-contrast 에뮬레이션의 드롭다운 목록에서 다음 중 하나를 선택합니다.

    • 에뮬레이션 없음
    • prefers-contrast:more
    • prefers-contrast:less
    • prefers-contrast:custom

CSS 미디어 기능 prefers-reduced-motion 에뮬레이션

prefers-reduced-motion CSS 미디어 기능은 사용자가 페이지의 움직임을 최소화하도록 요청했는지를 나타냅니다.

이 조건을 에뮬레이션하려면 다음 안내를 따르세요.

  1. 이 데모에서 렌더링 탭을 열고 스크롤하여 다양한 애니메이션을 확인해 보세요.
  2. CSS 미디어 기능 prefers-reduced-motion 에뮬레이션에서 prefers-reduced-motion:reduce를 선택합니다.
  3. 다시 스크롤해 보세요.

CSS 미디어 기능 prefers-reduced-transparency 에뮬레이션

prefers-reduced-transparency CSS 미디어 기능은 사용자가 기기에 사용되는 투명 또는 반투명 레이어 효과의 감소를 요청했는지를 나타냅니다.

prefers-reduced-transparency 기능은 Chrome 118부터 제공되며 macOS의 투명도 낮추기 설정과 같이 OS에서 투명도를 낮추기 위해 사용자가 선택한 환경설정에 맞게 웹 콘텐츠를 조정할 수 있는 기능입니다.

이 조건을 에뮬레이션하려면 다음 안내를 따르세요.

  1. 렌더링 탭을 엽니다.
  2. CSS 미디어 기능 prefers-reduced-transparency 에뮬레이션에서 prefers-reduced-transparency: reduce를 선택합니다.
  3. 페이지가 제대로 표시되는지 확인합니다.

CSS 미디어 기능 color-gamut 에뮬레이션

color-gamut CSS 미디어 기능은 사용자 에이전트 및 출력 장치가 지원하는 색상 범위를 나타냅니다.

이 조건을 에뮬레이션하려면 다음 안내를 따르세요.

  1. 렌더링 탭을 엽니다.

  2. CSS 미디어 기능 color-gamut 에뮬레이션의 드롭다운 목록에서 다음 중 하나를 선택합니다.

    • 에뮬레이션 없음
    • color-gamut:srgb: 대략 sRGB 색 영역 이상
    • color-gamut:p3: Display P3 색상 공간 이상에 지정된 대략적인 색 영역
    • color-gamut:rec2020: Rec. 2020 이상에 지정된 대략적인 색 영역