스크린샷

Screenshot 구성 요소는 사용자가 사이트 테마를 전환할 때 라이트 및 다크 변형 간에 자동으로 전환되는 테마 인식 이미지를 렌더링합니다. 독자의 현재 색 구성표와 일치해야 하는 UI 스크린샷을 표시해야 할 때마다 사용하십시오.

Props 참조

Prop	타입	필수 여부	설명
`light`	`string`	아니오	라이트 모드 이미지 경로
`dark`	`string`	아니오	다크 모드 이미지 경로
`alt`	`string`	예	접근성을 위한 대체 텍스트
`width`	`number`	아니오	픽셀 단위 이미지 너비
`height`	`number`	아니오	픽셀 단위 이미지 높이

듀얼 모드 (라이트 + 다크)

각 테마에 맞는 변형을 표시하려면 light와 dark props를 모두 제공하십시오. 오른쪽 상단의 테마 선택기를 전환하여 이미지가 전환되는 것을 확인하십시오.

import Screenshot from '@f5-sales-demo/docs-theme/components/Screenshot.astro';

<Screenshot
  light="/images/screenshot-example-light.png"
  dark="/images/screenshot-example-dark.png"
  alt="Docs theme homepage"
/>

단일 이미지

하나의 변형만 사용 가능한 경우, light 또는 dark만 전달하십시오. 이미지는 전환 없이 두 테마 모두에서 렌더링됩니다.

<Screenshot
  dark="/images/screenshot-example-dark.png"
  alt="Docs theme homepage (dark only)"
/>

크기 지정

렌더링 크기를 제어하고 레이아웃 이동을 방지하려면 width와 height를 사용하십시오.

<Screenshot
  light="/images/screenshot-example-light.png"
  dark="/images/screenshot-example-dark.png"
  alt="Docs theme homepage at fixed width"
  width={600}
  height={338}
/>

작동 방식

구성 요소는 .screenshot-pair 래퍼 내부에 하나 또는 두 개의 <img> 요소를 렌더링합니다. CSS 규칙은 활성 테마에 따라 가시성을 전환합니다:

다크 모드 (기본값) — .screenshot-light 이미지는 :root:not([data-theme="light"]) .screenshot-light \{ display: none \}를 통해 숨겨집니다.
라이트 모드 — .screenshot-dark 이미지는 :root[data-theme="light"] .screenshot-dark \{ display: none \}를 통해 숨겨집니다.

추가 선택자는 :has()를 사용하여 starlight-image-zoom 래퍼를 처리하므로 줌 기능이 두 변형 모두에서 올바르게 작동합니다.

모든 스크린샷 이미지는 일관된 스타일을 적용받습니다: 미묘한 테두리, 둥근 모서리, 그리고 마우스를 올리면 강해지는 드롭 섀도우.

마크다운 이미지와의 비교

기능	`Screenshot` 구성 요소	마크다운 `![](url)`
테마 인식 전환	예	아니오
스타일 테두리 및 섀도우	자동	아니오
마우스 오버 섀도우 효과	예	아니오
줌 지원	이미지 줌 플러그인과 함께 작동	이미지 줌 플러그인과 함께 작동
대체 텍스트	`alt` prop	`![alt text]()`

테마별 이미지 변형이 있거나 스타일이 적용된 스크린샷 외관을 원할 때 Screenshot 구성 요소를 사용하십시오. 인라인 그래픽, 다이어그램 또는 두 테마 모두에서 동일하게 보이는 이미지에는 표준 마크다운 이미지를 사용하십시오.