text-underline-offset
텍스트와 밑줄 사이의 간격을 조정합니다. tuo4px를 사용하면 밑줄이 글자와 겹치지 않아 가독성이 높아집니다.
클래스 목록
패턴: tuo{값}{단위}
| <tr> <th class="tal py12px px16px bg18181B bb2pxsolid27272A cA1A1AA fw600 ttu fs12px ls0-05em">클래스 | 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
사용 예시
<!-- Readable underline link -->
<a href="#" class="tdu tuo4px c38BDF8">Readable underline link</a>
<!-- Underline + thickness + offset combination -->
<span class="tdu tdt2px tuo4px">Custom underline style</span>
<!-- Underline appears on hover + offset -->
<a href="#" class="tdn hover-tdu tuo4px c38BDF8 tall200msease">
Show underline on hover
</a>팁 & 주의사항
가독성 높은 밑줄
tuo4px는 밑줄과 텍스트 사이에 적절한 간격을 두어 descender(g, p, y 등)와의 겹침을 방지합니다. 링크 스타일에 권장됩니다.
text-decoration: underline 필수
tdu 없이 offset만 지정하면 효과가 없습니다. 반드시 밑줄이 활성화된 상태에서 사용하세요.