색상 링크

.link-* 헬퍼 클래스로 링크 색상을 지정하는 방법과 링크 유틸리티로 이를 수정하는 방법을 설명하는 문서예요.

출처: 문서

본문

.link-* 클래스를 사용해서 링크에 색상을 입힐 수 있어요. .text-* 클래스와 달리 이 클래스에는 :hover와 :focus 상태가 있어요. 일부 링크 스타일은 비교적 밝은 전경색을 사용하기 때문에 충분한 대비를 위해 어두운 배경에서만 사용해야 해요.

주의하세요! .link-body-emphasis는 현재 컬러 모드에 적응하는 유일한 색상 링크예요. v6가 나와서 컬러 모드를 위해 테마 색상을 더 철저하게 재구축할 때까지 특수 케이스로 취급돼요. 그 전까지는 커스텀 :hover와 :focus 스타일을 가진 독특하고 고대비인 링크 색상이에요. 다만 새 링크 유틸리티에는 여전히 반응해요.

<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 클래스로 숨겨진 추가 텍스트 같은 대체 수단을 통해 포함되어야 해요.

Added in v5.3.0

색상 링크는 링크 유틸리티로도 수정할 수 있어요.

<p><a href="#" class="link-primary link-offset-2 link-underline-opacity-25 link-underline-opacity-100-hover">Primary link</a></p>
<p><a href="#" class="link-secondary link-offset-2 link-underline-opacity-25 link-underline-opacity-100-hover">Secondary link</a></p>
<p><a href="#" class="link-success link-offset-2 link-underline-opacity-25 link-underline-opacity-100-hover">Success link</a></p>
<p><a href="#" class="link-danger link-offset-2 link-underline-opacity-25 link-underline-opacity-100-hover">Danger link</a></p>
<p><a href="#" class="link-warning link-offset-2 link-underline-opacity-25 link-underline-opacity-100-hover">Warning link</a></p>
<p><a href="#" class="link-info link-offset-2 link-underline-opacity-25 link-underline-opacity-100-hover">Info link</a></p>
<p><a href="#" class="link-light link-offset-2 link-underline-opacity-25 link-underline-opacity-100-hover">Light link</a></p>
<p><a href="#" class="link-dark link-offset-2 link-underline-opacity-25 link-underline-opacity-100-hover">Dark link</a></p>
<p><a href="#" class="link-body-emphasis link-offset-2 link-underline-opacity-25 link-underline-opacity-75-hover">Emphasis link</a></p>

더 알아보기 (Learn more)