반응형
Web Development · CSS Text
CSS text-decoration —
밑줄 · 취소선 · 윗줄 완전 정리
링크 밑줄 제거하고 가격에 취소선 긋기
a { text-decoration: none; } /* 밑줄 없앰 */ .edited { text-decoration: line-through; } /* 취소선 */
underline — 기본 밑줄
99,000원 79,000원 — 가격 할인 표시
overline — 윗줄 (희소)
밑줄 없는 링크 — text-decoration: none
스타일링된 밑줄 — underline wavy red
1 5가지 값
| 값 | 효과 | 용도 |
|---|---|---|
none |
장식 없음 | 링크 밑줄 제거 |
underline |
밑줄 (기본 a) | 강조·링크 표시 |
overline |
윗줄 | 특수 강조 (희소) |
line-through |
취소선 | 할인 가격·삭제 표시 |
blink |
깜빡임 | 지원 종료 |
2 모던 — 스타일·색상·두께
HTML5 이후 text-decoration은 3가지 값을 한 번에 지정 가능.
text-decoration: underline wavy red 2px;= 종류 + 스타일(solid/dashed/dotted/wavy) + 색상 + 두께
반응형
3 의미 vs 디자인 — del/s 태그도 있다
※ 단순 시각 취소선이면 CSS의 line-through, 의미상 "삭제된 내용"이면
<del> 태그가 의미 정확.핵심 한 줄 요약
none링크 밑줄 제거 — 실무 최다
underline밑줄 — a 기본
line-through취소선 — 할인 가격
overline윗줄 — 거의 안 씀
단축underline wavy red 2px
Tags
#text-decoration #none #underline #line-through #overline #CSS #HTML #밑줄 #취소선 #a #링크스타일 #웹개발 #티스토리
▼ 티스토리 태그 입력란 복사용
text-decoration, none, underline, line-through, overline, CSS, HTML, 밑줄, 취소선, a, 링크스타일, 웹개발, 티스토리
반응형
'php' 카테고리의 다른 글
| CSS text-overflow — 말줄임표 ellipsis 완전 정리 (0) | 2026.05.03 |
|---|---|
| CSS text-indent — 첫 줄 들여쓰기 완전 정리 (0) | 2026.05.03 |
| CSS text-align — 텍스트 정렬 완전 정리 (0) | 2026.05.03 |
| CSS line-height — 줄 간격 완전 정리 (0) | 2026.05.03 |
| CSS list-style-position — inside · outside 완전 정리 (0) | 2026.05.03 |
댓글