---
{"id":"link","title":"링크","category":"컴포넌트","order":31,"summary":"다른 페이지·자료·영역으로 이동의 사용·상태·접근성 계약.","status":"문서 기준 · UI 미검증","references":["components/link/usage"]}
---

# 링크

## 목적과 사용

다른 페이지·자료·영역으로 이동에 사용합니다. 저장·삭제 등 현재 데이터 변경은 버튼입니다.

## 구성과 변형

읽을 수 있는 목적지 라벨, URL, 선택적 외부 이동 설명. 변형의 외형은 각 제품의 기존 [토큰](tokens.md)을 사용합니다. Carbon의 크기·색·모서리·아이콘을 가져오지 않습니다.

## 동작 규칙

- LNK-01 MUST: 유효한 href를 가진 링크를 사용합니다.
- LNK-02 SHOULD: 같은 문맥의 링크는 목적지로 구별되는 라벨을 제공합니다.
- LNK-03 MUST: 새 창이 필요한 경우 사용자에게 알리고 기본적으로 같은 창 이동을 유지합니다.
- LNK-04 MUST: 링크와 주변 글자의 구분·포커스·방문 후 맥락을 유지합니다.

## 접근성

Enter·새 탭·링크 주소 복사 등 브라우저 기본 기능을 보존합니다. 공통 [접근성 기준](accessibility.md)도 함께 적용합니다.

## 콘텐츠 예시

좋음: ‘청구서 보기’ / 피함: ‘여기 클릭’.

## 우리 구현과 연결

Blesta 작은 링크는 --vx-link를 사용합니다. Panel breadcrumb도 이동 요소로 구분합니다.

제품별 소유 경로는 [WICKEDVPS](product-vps.md), [Panel](product-panel.md), [Blesta](product-blesta.md)와 [소스 근거](source-evidence.md)를 확인합니다. 코드 존재와 모든 사용처의 준수는 다르며, 별도 표시가 없는 제품별 준수 상태는 미검증입니다.

## 코드 계약 예시

다음은 의미 구조 설명용이며 운영 API에 연결된 완성 구현이 아닙니다.

```html
<a href="/invoices">청구서 보기</a>
```

## 상태와 검증

외부 링크·긴 라벨·잘못된 목적지·키보드 탐색을 확인합니다.

일반·hover·focus·실행 중·실패·성공·disabled·read-only 중 해당하는 상태를 기록합니다. 해당하지 않는 상태를 임의로 만들지 말고 이유를 남깁니다. [검증 체크리스트](testing.md)에 증거를 연결합니다.