건너뛰기 링크

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

사용 지침

페이지의 가장 첫 번째 포커스 가능한 요소로 두어, 검정 배경·흰 텍스트의 바로 상시 노출합니다. 키보드 사용자가 반복되는 헤더·내비를 건너뛰고 본문으로 즉시 이동할 수 있게 하는 접근성 필수 요소입니다.

검정 배경·흰 텍스트의 바로 상시 노출되어 본문으로 즉시 이동할 수 있습니다. Tab 키로 포커스하면 포커스 링이 표시됩니다.

주요 콘텐츠 영역 (main).

examples/skip-link/SkipLinkDefault.tsx

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

export default function SkipLinkDefault() {

사용자 정의 타겟 ID를 지정하여 특정 섹션으로 즉시 이동하는 스킵 링크입니다. 상시 노출되며 검정 배경·흰 텍스트로 표시됩니다.

examples/skip-link/SkipLinkCustomTarget.tsx

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

export default function SkipLinkCustomTarget() {

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