text-underline-offset
텍스트와 밑줄 사이의 간격을 조정합니다. tuo4px를 사용하면 밑줄이 글자와 겹치지 않아 가독성이 높아집니다.
클래스 목록
패턴: tuo{값}{단위}
| 클래스 | CSS | 설명 |
|---|---|---|
tuo1px | text-underline-offset: 1px | 1px 간격 |
tuo2px | text-underline-offset: 2px | 2px 간격 |
tuo4px | text-underline-offset: 4px | 4px 간격 (권장, 가독성 좋음) |
tuo8px | text-underline-offset: 8px | 8px 간격 (넓은 오프셋) |
tuo0-3rem | text-underline-offset: 0.3rem | 0.3rem 간격 |
시각적 비교
기본 (offset 없음) —
Typography underline
2px — tuo2px
Typography underline
4px (권장) — tuo4px
Typography underline
8px — tuo8px
Typography underline
사용 예시
<!-- 가독성 좋은 밑줄 링크 -->
<a href="#" class="tdu tuo4px c38BDF8">읽기 편한 밑줄 링크</a>
<!-- 밑줄 + 두께 + 오프셋 조합 -->
<span class="tdu tdt2px tuo4px">커스텀 밑줄 스타일</span>
<!-- 호버 시 밑줄 나타남 + 오프셋 -->
<a href="#" class="tdn hover-tdu tuo4px c38BDF8 tall200msease">
호버 시 밑줄 표시
</a>팁 & 주의사항
가독성 높은 밑줄
tuo4px는 밑줄과 텍스트 사이에 적절한 간격을 두어 descender(g, p, y 등)와의 겹침을 방지합니다. 링크 스타일에 권장됩니다.
text-decoration: underline 필수
tdu 없이 offset만 지정하면 효과가 없습니다. 반드시 밑줄이 활성화된 상태에서 사용하세요.