텍스트 밑줄 오프셋

텍스트 밑줄 오프셋 (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>;

예시 (Examples)

기본 예제 (Basic example)

underline-offset-2, underline-offset-4 같은 underline-offset-<number> 유틸리티를 사용하면 텍스트 밑줄의 오프셋을 바꿀 수 있어요.

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

커스텀 값 사용하기 (Using a custom value)

underline-offset-[<value>] 문법을 사용하면 완전히 커스텀한 값으로 밑줄 오프셋을 설정할 수 있어요.

<p class="underline-offset-[3px] ...">
  Lorem ipsum dolor sit amet...
</p>

CSS 변수를 쓸 때는 underline-offset-(<custom-property>) 문법을 사용할 수도 있어요.

<p class="underline-offset-(--my-underline-offset) ...">
  Lorem ipsum dolor sit amet...
</p>

이것은 underline-offset-[var(<custom-property>)]의 줄임 표현이에요. var() 함수를 자동으로 추가해 주기 때문에 훨씬 편리하죠.

반응형 디자인 (Responsive design)

text-underline-offset 유틸리티 앞에 md: 같은 브레이크포인트 변형을 붙이면 중간 크기 화면 이상에서만 유틸리티가 적용되게 만들 수 있어요.

<p class="underline md:underline-offset-4 ...">
  Lorem ipsum dolor sit amet...
</p>

변형(variant) 사용법에 대해 더 알아보려면 variants 문서를 확인해 보세요.

텍스트 밑줄 오프셋