v5.3에 추가됨

링크

// Link

링크 유틸리티는 앵커의 색상, 불투명도, 밑줄 오프셋, 밑줄 색상 등을 조정하여 앵커의 스타일을 지정하는 데 사용됩니다.

링크 불투명도

유틸리티를 사용하여 링크 rgba() 색상 값의 알파 불투명도를 변경합니다. 색상의 불투명도를 변경하면 링크의 대비율이 부족해질 수 있다는 점에 유의하세요.

html

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

마우스오버 시 불투명도 레벨을 변경할 수도 있습니다.

Link hover opacity 10

Link hover opacity 25

Link hover opacity 50

Link hover opacity 75

Link hover opacity 100

html

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

링크 밑줄

밑줄 색상

링크 텍스트 색상과 관계없이 밑줄의 색상을 변경합니다.

html

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

밑줄 오프셋

텍스트에서 밑줄의 여백 수준을 변경합니다. 오프셋은 요소의 현재 font-size에 따라 자동으로 크기가 조정되도록 em 단위로 설정됩니다.

html

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

불투명도 밑줄

밑줄의 불투명도를 변경합니다. .link-underline을 추가하여 먼저 알파 불투명도를 수정하는 데 사용하는 rgba() 색상을 설정해야 합니다.

Underline opacity 100

html

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

호버 변형

.link-opacity-*-hover 유틸리티와 마찬가지로 .link-offset 및 .link-underline-opacity 유틸리티에는 기본적으로 :hover 변형이 포함되어 있습니다. 조합해서 고유한 링크 스타일을 만들 수 있습니다.

Underline opacity 0

html

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

컬러 링크

컬러 링크 도우미가 링크 유틸리티와 짝을 이루도록 업데이트되었습니다. 새로운 유틸리티를 사용하여 링크 불투명도, 밑줄 불투명도, 밑줄 오프셋을 수정할 수 있습니다.

html

<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 사용자 정의 속성(CSS 변수)에 대해 읽어보세요.

Sass 유틸리티 API

링크 유틸리티는 유틸리티 API의 scss/_utilities.scss에 선언되어 있습니다. 유틸리티 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
  ),
),