타이포그래피
text-underline-offset
텍스트 밑줄의 오프셋을 조절하는 유틸리티입니다.
| Class | Styles |
|---|---|
underline-offset-<number> | text-underline-offset: <number>px; |
-underline-offset-<number> | text-underline-offset: calc(<number>px * -1); |
underline-offset-auto | text-underline-offset: auto; |
underline-offset-(<custom-property>) | text-underline-offset: var(<custom-property>); |
underline-offset-[<value>] | text-underline-offset: <value>; |
예제
기본 예제
underline-offset-<number> 유틸리티를 사용하여 텍스트 밑줄의 오프셋을 변경할 수 있습니다. 예를 들어 underline-offset-2와 underline-offset-4를 사용해 보세요:
underline-offset-1
The quick brown fox jumps over the lazy dog.
underline-offset-2
The quick brown fox jumps over the lazy dog.
underline-offset-4
The quick brown fox jumps over the lazy dog.
underline-offset-8
The quick brown fox jumps over the lazy dog.
<p class="underline underline-offset-1">The quick brown fox...</p><p class="underline underline-offset-2">The quick brown fox...</p><p class="underline underline-offset-4">The quick brown fox...</p><p class="underline underline-offset-8">The quick brown fox...</p>커스텀 값 사용하기
underline-offset-[<value>] 구문을 사용하세요 text underline offset를 완전히 커스텀한 값으로 설정하려면:
<p class="underline-offset-[3px] ..."> <!-- ... --></p>CSS 변수를 사용하려면 underline-offset-(<custom-property>) 구문을 사용할 수도 있습니다:
<p class="underline-offset-(--my-underline-offset) ..."> <!-- ... --></p>이는 underline-offset-[var(<custom-property>)] 의 단축 표현으로, 자동으로 var() 함수를 추가해 줍니다.
반응형 디자인
접두사 a text-underline-offset 유틸리티 를 md:와 같은 브레이크포인트 변형과 함께 사용하면 medium 화면 크기 이상에서만 유틸리티가 적용됩니다:
<p class="underline md:underline-offset-4 ..."> <!-- ... --></p>변형 사용에 대해 더 알아보려면 변형 문서를 참고하세요.
