컬러 링크

// Colored links

호버상태가 있는 컬러 링크

링크 색상

.link-* 클래스를 사용하여 링크를 색상을 입힐 수 있습니다. .text-* 클래스와는 다르게, 이 클래스들에는 :hover와 :focus 상태가 있습니다. 일부 링크 스타일은 비교적 밝은 전경색을 사용하므로 충분한 대비를 위해 어두운 배경에만 사용해야 합니다.

주의! .link-body-emphasis는 현재 색상 모드에 맞게 조정되는 유일한 색상 링크입니다. v6가 출시되어 컬러 모드에 맞게 테마 색상을 보다 철저하게 재구성할 수 있을 때까지는 특수한 경우로 취급됩니다. 그때까지는 사용자 정의 :hover 및 :focus 스타일이 적용된 고유한 고대비 링크 색상이 적용됩니다. 하지만 새로운 링크 유틸리티에는 여전히 반응합니다.

html

<p><a href="#" class="link-primary">Primary link</a></p>
<p><a href="#" class="link-secondary">Secondary link</a></p>
<p><a href="#" class="link-success">Success link</a></p>
<p><a href="#" class="link-danger">Danger link</a></p>
<p><a href="#" class="link-warning">Warning link</a></p>
<p><a href="#" class="link-info">Info link</a></p>
<p><a href="#" class="link-light">Light link</a></p>
<p><a href="#" class="link-dark">Dark link</a></p>
<p><a href="#" class="link-body-emphasis">Emphasis link</a></p>

접근성 팁: 색상을 사용하여 의미를 추가하면 시각적 표시만 제공되므로 화면 리더와 같은 보조 기술 사용자에게는 의미가 전달되지 않습니다. 콘텐츠 자체에서 의미가 명확하게 드러나거나(예: 충분한 색상 대비가 있는 가시 텍스트) .visually-hidden 클래스로 숨겨진 추가 텍스트 등 대체 수단을 통해 의미가 포함되었는지 확인하시기 바랍니다.

링크 유틸리티

v5.3.0에서 추가됨

링크 색상은 링크 유틸리티로도 수정할 수 있습니다.