링크 Link

링크는 다른 서비스/애플리케이션, 한 서비스 내의 다른 화면, 한 화면 내의 다른 섹션 등으로 이동하는 데 사용되는 탐색 요소이다.

KRDS 가이드

기본

기본 <a>에 krdsLink를 붙입니다. href, target, rel, title은 기본 속성 그대로 씁니다. 새 창으로 열리는 링크는 title="새 창 열림"으로 그 사실을 알립니다.

import { Component } from '@angular/core'
import { KrdsLink } from '@krds.ui/angular'

@Component({
  selector: 'demo-link-basic',
  imports: [KrdsLink],
  template: `
    <a krdsLink href="https://www.krds.go.kr/" size="small" target="_blank" title="새 창 열림">
      <span class="underline">기본 링크</span> <i class="svg-icon ico-go" aria-hidden="true"></i>
    </a>
  `
})
export default class LinkBasic {}

모든 링크 변형

import { Component } from '@angular/core'
import { KrdsLink } from '@krds.ui/angular'

@Component({
  selector: 'demo-link-variations',
  imports: [KrdsLink],
  template: `
    <div style="display: flex; flex-direction: column; gap: 20px">
      <a krdsLink href="#!" size="medium" pure>
        <span class="underline">가상클래스 상태 시 컬러 유지</span>
      </a>
      <a krdsLink href="#!" size="large" basic target="_blank" title="새 창 열림">
        <span class="underline">본문 텍스트 컬러 링크</span> <i class="svg-icon ico-go" aria-hidden="true"></i>
      </a>
      <a krdsLink href="#!" size="large" basic>
        <span class="underline hidden-underline">가상클래스 상태 시 밑줄</span>
      </a>
      <a krdsLink href="#!" size="large" basic>
        <span>밑줄 없음</span>
      </a>
    </div>
  `
})
export default class LinkVariations {}

새 창 링크

krdsExternal을 붙이면 target="_blank", rel="noopener noreferrer", title="새 창 열림"이 함께 붙습니다. 조건에 따라 끄려면 [krdsExternal]="false"로 둡니다.

import { Component } from '@angular/core'
import { KrdsExternalLink, KrdsLink } from '@krds.ui/angular'

@Component({
  selector: 'demo-link-external',
  imports: [KrdsExternalLink, KrdsLink],
  template: `
    <a krdsLink krdsExternal href="https://www.gov.kr/" size="small">
      <span class="underline">정부24</span> <i class="svg-icon ico-go" aria-hidden="true"></i>
    </a>
  `
})
export default class LinkExternal {}

KrdsLink

선택자 a[krdsLink]

Inputs

이름	타입	기본값	설명
size	'small' | 'medium' | 'large'	-	링크 크기
link	boolean	true	link 클래스 적용 여부
basic	boolean	false	본문 텍스트 컬러 링크
pure	boolean	false	Pure 링크 여부 (가상클래스 상태 시 컬러 유지)

KrdsExternalLink

선택자 a[krdsExternal]

Inputs

이름	타입	기본값	설명
krdsExternal	boolean	true	새 창으로 열기