스포트라이트

이 페이지에는 스포트라이트와 관련된 지시문이 나와 있습니다.

스포트라이트 포인터

<walkthrough-spotlight-pointer spotlightId="SPOTLIGHT_ID">LINK_TEXT</walkthrough-spotlight-pointer>

<walkthrough-spotlight-pointer cssSelector="CSS_SELECTOR">LINK_TEXT</walkthrough-spotlight-pointer>

클릭하면 Google Cloud 콘솔에서 지정된 UI 요소를 강조표시하는 링크를 만듭니다.

다음 두 가지 방법 중 하나로 페이지의 요소를 스포트라이트로 강조할 수 있습니다.

스포트라이트/도구 작동 ID: spotlightId 매개변수를 사용하여 DOM 요소의 instrumentation-id 또는spotlight-id 속성 값을 지정하여 요소를 선택합니다.
CSS 선택기: 스포트라이트 또는 도구 작동 ID가 없는 요소의 경우 CSS 선택기와 함께 cssSelector 매개변수를 사용하여 요소를 선택합니다.

이 매개변수 중 하나만 필요합니다. 두 가지를 모두 제공하면 spotlightId가 사용됩니다.

쉼표를 구분 기호로 사용하여 여러 요소를 선택할 수 있습니다. 첫 번째 요소에 포커스가 지정된 상태에서 일치하는 모든 요소가 강조표시되고 해당 요소가 표시되도록 스크롤합니다.

Cloud Shell 편집기의 스포트라이트는 Cloud Shell 편집기 스포트라이트를 참조하세요.

매개변수	유형	설명
`spotlightId`	목록	스포트라이트로 강조할 스포트라이트/도구 작동 ID로 쉼표로 구분됩니다.
`cssSelector`	목록	스포트라이트로 강조할 CSS 선택기로 쉼표로 구분됩니다.
`title`	문자열	(선택사항) 사용자가 스포트라이트 링크 위로 마우스 커서를 가져가면 표시되는 팁입니다.

사용할 수 있는 스포트라이트/도구 작동 ID 목록은 다음과 같습니다.

스포트라이트/도구 작동 ID	강조표시된 요소
`console-nav-menu`	콘솔 탐색 메뉴입니다.
`devshell-activate-button`	Cloud Shell을 여는 버튼입니다.