Link

하이퍼링크를 표시하는 기본 링크 컴포넌트입니다. KRDS 색상 시스템을 사용하며 2가지 variant와 외부 링크 처리를 지원합니다.

개요

기본 링크Primary 파란색 링크밑줄 링크외부 링크 (새 창 열림)

설치

사용법

예제

Variant

링크는 두 가지 variant를 지원합니다: default, primary

  • default - 검은색 (gray-90)
  • primary - Primary 파란색
Default 링크Primary 링크

Underline

underline prop을 사용하여 밑줄을 추가할 수 있습니다. 기본적으로 밑줄이 없습니다.

기본 링크 (밑줄 없음)밑줄 링크Primary 밑줄 링크

Size

링크는 세 가지 크기를 지원합니다: small(15px), medium(17px), large(19px)

Small 링크 (15px)Medium 링크 (17px - 기본)Large 링크 (19px)

외부 링크

external prop을 사용하면 자동으로 target='_blank', rel='noopener noreferrer'가 추가되고 새창 열기 아이콘이 자동으로 표시됩니다.

GitHub 바로가기 (새 창 열림)외부 문서 (새 창 열림)Primary 스타일 외부 링크 (새 창 열림)

비활성화 상태

비활성화된 링크

커스텀 스타일

className으로 추가 스타일을 적용할 수 있습니다.

큰 볼드 링크이탤릭 링크

접근성

Link 컴포넌트는 WCAG 2.1 AA 기준을 준수하며 완전한 접근성을 제공합니다.

키보드 지원

  • Tab - 링크로 포커스 이동
  • Enter - 링크 활성화 (페이지 이동)
  • Shift + Tab - 이전 요소로 포커스 이동

스크린 리더 지원

  • 시맨틱 <a> 요소 사용으로 스크린 리더가 자동으로 링크임을 인식
  • 외부 링크 아이콘에 aria-hidden="true" 적용하여 중복 읽기 방지
  • 외부 링크에 sr-only 텍스트로 "(새 창 열림)" 안내 제공
  • rel="noopener noreferrer"로 보안 강화
  • 포커스 링(focus-visible:ring-2)으로 포커스 상태를 명확히 표시

링크 vs 버튼

언제 링크를 사용하고, 언제 버튼을 사용해야 할까요?

  • Link 사용: 페이지 이동, 외부 리소스 참조
  • Button 사용: 폼 제출, 모달 열기, JavaScript 함수 실행