text-decoration-style
텍스트 장식선(밑줄, 취소선 등)의 스타일을 제어합니다. tdsw는 맞춤법 검사 스타일의 물결 밑줄에 자주 사용됩니다.
클래스 목록
| <tr> <th class="tal py12px px16px bg18181B bb2pxsolid27272A cA1A1AA fw600 ttu fs12px ls0-05em">클래스 | CSS | 설명 |
|---|---|---|
tdss | text-decoration-style: solid | 실선 (기본값) |
tdsd | text-decoration-style: dashed | 대시선 |
tdsdt | text-decoration-style: dotted | 점선 |
tdsw | text-decoration-style: wavy | 물결선. 맞춤법 검사 스타일에 활용 |
tdsdb | text-decoration-style: double | 이중선 |
시각적 비교
각 스타일이 밑줄에 어떤 영향을 주는지 비교합니다.
solid (기본) — tdss
The quick brown fox jumps over the lazy dog
dashed — tdsd
The quick brown fox jumps over the lazy dog
dotted — tdsdt
The quick brown fox jumps over the lazy dog
wavy — tdsw
The quick brown fox jumps over the lazy dog
double — tdsdb
The quick brown fox jumps over the lazy dog
사용 예시
<!-- Wavy underline (spellcheck style) -->
<span class="tdu tdsw">Text with a typo</span>
<!-- Dashed underline -->
<a href="#" class="tdu tdsd c38BDF8">Abbreviation link</a>
<!-- Double underline emphasis -->
<span class="tdu tdsdb">Important text</span>팁 & 주의사항
text-decoration과 함께 사용
text-decoration-style은 tdu(underline), tdo(overline), tdlt(line-through) 등과 조합해야 효과가 보입니다.
wavy로 맞춤법 검사 스타일
tdsw와 빨간색 장식선을 조합하면 에디터의 맞춤법 오류 표시와 유사한 스타일을 만들 수 있습니다.