스크린샷

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

Props 참조

Prop	Type	Required	Description
`light`	`string`	No	라이트 모드 이미지 경로
`dark`	`string`	No	다크 모드 이미지 경로
`alt`	`string`	Yes	접근성을 위한 대체 텍스트
`width`	`number`	No	픽셀 단위 이미지 너비
`height`	`number`	No	픽셀 단위 이미지 높이

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

각 테마에 맞는 변형을 표시하려면 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 래퍼를 처리하므로 확대/축소 기능이 두 변형 모두에서 올바르게 작동합니다.

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

Markdown 이미지와의 비교

기능	`Screenshot` 구성 요소	Markdown `![](url)`
테마 인식 전환	예	아니오
스타일 적용된 테두리 및 섀도우	자동	아니오
호버 섀도우 효과	예	아니오
확대/축소 지원	이미지 확대/축소 플러그인과 호환	이미지 확대/축소 플러그인과 호환
대체 텍스트	`alt` prop	`![alt text]()`

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