text-decoration-style
텍스트 장식선(밑줄, 취소선 등)의 스타일을 제어합니다. tdsw는 맞춤법 검사 스타일의 물결 밑줄에 자주 사용됩니다.
클래스 목록
| 클래스 | 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
사용 예시
<!-- 물결 밑줄 (맞춤법 검사 스타일) -->
<span class="tdu tdsw">오타가 있는 텍스트</span>
<!-- 대시 밑줄 -->
<a href="#" class="tdu tdsd c38BDF8">약어 링크</a>
<!-- 이중 밑줄 강조 -->
<span class="tdu tdsdb">중요한 텍스트</span>팁 & 주의사항
text-decoration과 함께 사용
text-decoration-style은 tdu(underline), tdo(overline), tdlt(line-through) 등과 조합해야 효과가 보입니다.
wavy로 맞춤법 검사 스타일
tdsw와 빨간색 장식선을 조합하면 에디터의 맞춤법 오류 표시와 유사한 스타일을 만들 수 있습니다.