text-decoration

CSS Reference

text-decoration은 밑줄·취소선 같은 텍스트 장식의 선, 모양, 색과 두께를 묶어 지정하는 단축 속성입니다. 단순한 underline뿐 아니라 여러 선과 다른 스타일을 조합할 수 있습니다.

문법과 주요 값

a { text-decoration: underline solid #006c9c 2px; text-underline-offset: 0.2em; }
.deleted { text-decoration: line-through; }

값 또는 구분	동작과 선택 기준
`underline / overline`	글자 아래 / 위에 선
`line-through`	글자 중간의 취소선
`solid / dotted / wavy`	장식선 모양
`색과 두께`	장식선 색상과 굵기 지정
`none`	이 요소에서 새 장식선 만들지 않음

값의 적용 범위와 문법은 MDN의 text-decoration 문서에서 확인할 수 있습니다.

실행 예제와 결과 비교

아래 전체 코드를 UTF-8 형식의 text-decoration-example.html 파일로 저장한 뒤 브라우저로 여세요. 예제용 CSS는 이 파일 안에만 넣고 사이트 전체 스타일시트에 그대로 붙여 넣지 않습니다.

<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>text-decoration 비교 예제</title>
<style>
body { margin: 0; color: #20242b; background: #fff; font: 16px/1.7 "Malgun Gothic", sans-serif; }
#demo { padding: 24px; max-width: 820px; margin: auto; }
h1 { font-size: 22px; margin: 0 0 20px; }
.samples { display: flex; flex-wrap: wrap; gap: 24px; }
.label { margin: 0 0 8px; font-weight: 700; }
.target, .reference { font-size: 26px; }
.target { text-decoration: underline wavy #006c9c 2px; text-underline-offset: 0.2em; }
.reference { text-decoration: line-through; }
</style>
</head>
<body>
<main id="demo">
<h1>text-decoration 적용 비교</h1>
<section class="samples"><div class="a"><p class="label">밑줄: wavy</p><div class="target">CSS 텍스트 장식</div></div><div class="b"><p class="label">취소선</p><div class="reference">CSS 텍스트 장식</div></div></section>
</main>
</body>
</html>

첫 예문은 물결 밑줄, 두 번째는 취소선입니다. 밑줄의 위치는 offset으로 조절하며 border-bottom과 같은 박스 테두리로 만든 선과 다릅니다.

부모가 그린 선은 자식에서 단순 제거되지 않습니다

text-decoration 자체의 일반 상속과 별개로 장식선은 인라인 내용에 걸쳐 그려질 수 있습니다. 부모에서 만든 밑줄을 자식 span의 text-decoration: none만으로 지우려 하면 남는 경우가 있습니다. 장식을 주는 요소의 경계를 바꾸어 의도한 범위에 적용하세요.

링크와 의미 있는 취소 표시

링크의 밑줄을 제거하면 다른 본문과 구별하기 어려워질 수 있습니다. 색뿐 아니라 식별 가능한 표시와 포커스 상태를 유지하세요. 내용이 삭제되었다는 의미는 del 요소로, 단순 장식은 CSS로 구분합니다. 글자 획을 피하는 text-decoration-skip-ink도 결과에 영향을 줍니다.