건너뛰기 링크

건너뛰기 링크는 웹사이트에서 웹 페이지의 주요 콘텐츠 섹션의 탐색을 도와주는 페이지 내부 링크이다.

사용 지침

페이지의 가장 첫 번째 포커스 가능한 요소로 두어 평소에는 시각적으로 숨겨 두고, 키보드 포커스가 들어왔을 때만 노출되도록 합니다 — 접근성 필수 요소입니다.

평소에는 화면에 보이지 않다가, Tab 키로 포커스하면 화면 최상단에 나타나 본문으로 즉시 이동할 수 있습니다. 이 영역을 클릭한 뒤 Tab 키를 눌러 확인해 보세요.

주요 콘텐츠 영역 (main).

examples/skip-link/SkipLinkDefault.tsx

import { SkipLink } from "@/components/ui/dynamic/skip-link"

export default function SkipLinkDefault() {

사용자 정의 타겟 ID를 지정하여 특정 섹션으로 즉시 이동하는 스킵 링크입니다. Tab 키로 포커스했을 때만 화면 최상단에 나타납니다.

examples/skip-link/SkipLinkCustomTarget.tsx

import { SkipLink } from "@/components/ui/dynamic/skip-link"

export default function SkipLinkCustomTarget() {

이름	타입	기본값	설명
className	string	—	—
href	string	#main-content	—