KRDS Angular

건너뛰기 링크 Skip link ​

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

KRDS 가이드

기본 ​

페이지 최상단의 요소에 krdsSkipLink를 붙이고, 그 안에 기본 <a>로 링크를 넣습니다. href는 같은 페이지 대상의 #id로 씁니다. KRDS CSS가 #krds-skip-link로 스타일을 주므로 디렉티브는 이 id만 붙입니다. 링크는 포커스를 받기 전까지 화면에서 숨겨져 있다가, 포커스를 받으면 화면 맨 위에 고정되어 표시되므로 예제를 별도 화면(iframe)에 띄웁니다. 미리보기 안으로 Tab 키를 눌러 포커스를 옮겨 확인하세요.

새 창에서 보기
ts
import { Component } from '@angular/core'
import { KrdsSkipLink } from '@krds.ui/angular'

@Component({
  selector: 'demo-skip-link-basic',
  imports: [KrdsSkipLink],
  template: `
    <div krdsSkipLink>
      <a href="#main-content">본문 바로가기</a>
    </div>
    <div id="main-content" style="margin-top: 100px; padding: 20px; background: #f5f5f5">
      <h2>주요 콘텐츠 영역</h2>
      <p>이곳이 건너뛰기 링크의 대상이 되는 주요 콘텐츠 영역입니다.</p>
    </div>
  `
})
export default class SkipLinkBasic {}

여러 링크 ​

여러 링크는 하나의 묶음(#krds-skip-link) 안에 <a>를 이어서 넣습니다. 묶음을 여러 개 두면 id가 중복되므로 한 페이지에 하나만 둡니다.

새 창에서 보기
ts
import { Component } from '@angular/core'
import { KrdsSkipLink } from '@krds.ui/angular'

@Component({
  selector: 'demo-skip-link-multiple-links',
  imports: [KrdsSkipLink],
  template: `
    <div krdsSkipLink>
      <a href="#main-content">본문 바로가기</a>
      <a href="#gnb">메인메뉴 바로가기</a>
    </div>
    <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>
  `
})
export default class SkipLinkMultipleLinks {}

선택자 [krdsSkipLink]

Inputs

이름타입기본값설명
idstring'krds-skip-link'id (KRDS CSS 기준 krds-skip-link)