KRDS Vue

건너뛰기 링크 Skip link ​

건너뛰기 링크는 웹사이트에서 웹 페이지의 주요 콘텐츠 섹션의 탐색을 도와주는 페이지 내부 링크이다. 키보드나 가상 초점을 이용하여 콘텐츠를 탐색하는 사용자는 건너뛰기 링크를 이용하여 대부분의 페이지에서 반복되는 콘텐츠 영역을 건너뛰고 주요 콘텐츠로 빠르게 이동할 수 있다.

KRDS 가이드

기본 ​

페이지 최상단에 배치합니다. 링크는 포커스를 받기 전까지 화면에서 숨겨져 있다가, 포커스를 받으면 화면 맨 위에 고정되어 표시되므로 예제를 별도 화면(iframe)에 띄웁니다. 미리보기 안으로 Tab 키를 눌러 포커스를 옮겨 확인하세요.

새 창에서 보기
vue
<script setup lang="ts">
  import { KrdsSkipLink } from '@krds.ui/vue'
</script>

<template>
  <div>
    <KrdsSkipLink href="#main-content">본문 바로가기</KrdsSkipLink>
    <div id="main-content" style="margin-top: 100px; padding: 20px; background: #f5f5f5">
      <h2>주요 콘텐츠 영역</h2>
      <p>이곳이 건너뛰기 링크의 대상이 되는 주요 콘텐츠 영역입니다.</p>
    </div>
  </div>
</template>

여러 링크 ​

links로 여러 링크를 하나의 래퍼(#krds-skip-link) 안에 렌더링합니다. 컴포넌트를 여러 개 나란히 두면 id가 중복되므로 links를 사용합니다.

새 창에서 보기
vue
<script setup lang="ts">
  import { KrdsSkipLink } from '@krds.ui/vue'

  const links = [
    { href: '#main-content', label: '본문 바로가기' },
    { href: '#gnb', label: '메인메뉴 바로가기' }
  ]
</script>

<template>
  <div>
    <KrdsSkipLink :links="links" />
    <nav id="gnb" aria-label="메인메뉴" style="padding: 20px; border: 1px dashed #ccc">메인메뉴 영역</nav>
    <div id="main-content" style="margin-top: 20px; padding: 20px; background: #f5f5f5">
      <h2>주요 콘텐츠 영역</h2>
    </div>
  </div>
</template>

Props

이름타입기본값설명
classKrdsClassValue-추가 CSS 클래스
idstring'krds-skip-link'요소 ID
hrefstring-건너뛸 대상 요소의 ID
links{ href: string; label: string; }[]-여러 건너뛰기 링크 (하나의 래퍼 안에 렌더링, 지정 시 href·기본 슬롯 대신 사용)

Slots

이름설명
default링크 문구 (links를 쓰지 않을 때)