Link

색상, 불투명도, 밑줄 오프셋, 밑줄 색상 등을 조정하도록 앵커를 스타일링하는 link 유틸리티에 대해 알아봅니다.

출처: 문서

본문

유틸리티로 링크 rgba() 색상 값의 알파 불투명도를 변경합니다. 색상의 불투명도를 바꾸면 충분한 대비가 없는 링크가 생길 수 있다는 점을 알아두세요.

<p><a class="link-opacity-10" href="#">Link opacity 10</a></p>
<p><a class="link-opacity-25" href="#">Link opacity 25</a></p>
<p><a class="link-opacity-50" href="#">Link opacity 50</a></p>
<p><a class="link-opacity-75" href="#">Link opacity 75</a></p>
<p><a class="link-opacity-100" href="#">Link opacity 100</a></p>

호버 시에도 불투명도 수준을 변경할 수 있습니다.

<p><a class="link-opacity-10-hover" href="#">Link hover opacity 10</a></p>
<p><a class="link-opacity-25-hover" href="#">Link hover opacity 25</a></p>
<p><a class="link-opacity-50-hover" href="#">Link hover opacity 50</a></p>
<p><a class="link-opacity-75-hover" href="#">Link hover opacity 75</a></p>
<p><a class="link-opacity-100-hover" href="#">Link hover opacity 100</a></p>

밑줄 색상 (Underline color)

링크 텍스트 색상과 무관하게 밑줄 색상을 변경합니다.

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

밑줄 오프셋 (Underline offset)

텍스트에서 밑줄까지의 거리를 변경합니다. 오프셋은 em 단위로 설정되어 요소의 현재 font-size에 맞춰 자동으로 확장됩니다.

<p><a href="#">Default link</a></p>
<p><a class="link-offset-1" href="#">Offset 1 link</a></p>
<p><a class="link-offset-2" href="#">Offset 2 link</a></p>
<p><a class="link-offset-3" href="#">Offset 3 link</a></p>

밑줄 불투명도 (Underline opacity)

밑줄의 불투명도를 변경합니다. 먼저 .link-underline을 추가해 이후에 알파 불투명도를 수정할 rgba() 색상을 설정해야 합니다.

<p><a class="link-offset-2 link-underline link-underline-opacity-0" href="#">Underline opacity 0</a></p>
<p><a class="link-offset-2 link-underline link-underline-opacity-10" href="#">Underline opacity 10</a></p>
<p><a class="link-offset-2 link-underline link-underline-opacity-25" href="#">Underline opacity 25</a></p>
<p><a class="link-offset-2 link-underline link-underline-opacity-50" href="#">Underline opacity 50</a></p>
<p><a class="link-offset-2 link-underline link-underline-opacity-75" href="#">Underline opacity 75</a></p>
<p><a class="link-offset-2 link-underline link-underline-opacity-100" href="#">Underline opacity 100</a></p>

Hover 변형 (Hover variants)

.link-opacity-*-hover 유틸리티처럼, .link-offset과 .link-underline-opacity 유틸리티도 기본적으로 :hover 변형을 포함합니다. 이들을 섞어 독특한 링크 스타일을 만들 수 있습니다.

<a class="link-offset-2 link-offset-3-hover link-underline link-underline-opacity-0 link-underline-opacity-75-hover" href="#">
  Underline opacity 0
</a>

색상 링크 헬퍼가 link 유틸리티와 함께 작동하도록 갱신되었습니다. 새 유틸리티를 사용해 링크 불투명도, 밑줄 불투명도, 밑줄 오프셋을 수정할 수 있습니다.

<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>

참고: 접근성 팁: 의미를 전달하기 위해 색상을 사용하는 것은 시각적인 표시일 뿐, 스크린 리더 같은 보조 기술을 사용하는 사용자에게는 전달되지 않습니다. 의미가 내용 자체에서 분명하거나(예: 충분한 색상 대비가 있는 보이는 텍스트), .visually-hidden 클래스로 숨긴 추가 텍스트 같은 대체 수단을 통해 전달되도록 하세요.

CSS

다음 Sass 기능 외에도, 색상 등을 위한 우리가 제공하는 CSS custom properties(일명 CSS 변수)를 읽어보는 것도 고려하세요.

Sass utilities API

link 유틸리티는 scss/_utilities.scss의 utilities API에 선언되어 있습니다. utilities API 사용법을 알아보세요.

scss/_utilities.scss

"link-opacity": (
  css-var: true,
  class: link-opacity,
  state: hover,
  values: (
    10: .1,
    25: .25,
    50: .5,
    75: .75,
    100: 1
  )
),
"link-offset": (
  property: text-underline-offset,
  class: link-offset,
  state: hover,
  values: (
    1: .125em,
    2: .25em,
    3: .375em,
  )
),
"link-underline": (
  property: text-decoration-color,
  class: link-underline,
  local-vars: (
    "link-underline-opacity": 1
  ),
  values: map-merge(
    $utilities-links-underline,
    (
      null: rgba(var(--#{$prefix}link-color-rgb), var(--#{$prefix}link-underline-opacity, 1)),
    )
  )
),
"link-underline-opacity": (
  css-var: true,
  class: link-underline-opacity,
  state: hover,
  values: (
    0: 0,
    10: .1,
    25: .25,
    50: .5,
    75: .75,
    100: 1
  ),
),

더 알아보기 (Learn more)