CSS / Reference / text-decoration

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

문법과 주요 값

초기값은 브라우저 기본 스타일시트가 HTML 요소에 적용한 값과 같다는 뜻이 아닙니다. 실제 값은 개발자 도구의 Computed에서 확인하세요.

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

값과 적용 조건은 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도 결과에 영향을 줍니다.

부모 장식이 자식에게 보이는 경우

다음 전체 문서를 css-reference-10648-practice.html로 UTF-8 저장한 뒤 브라우저에서 엽니다. 다른 예제 파일에 중첩해서 붙이지 않고 별도 파일로 시험합니다.

<!doctype html>
<html lang="ko">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>부모 장식이 자식에게 보이는 경우</title>
  <style>
    body { margin: 16px; color: #20242b; font: 16px/1.7 sans-serif; }
    main { max-width: 52rem; margin: auto; }
    h1 { font-size: 1.35rem; }
    .samples { display: flex; flex-wrap: wrap; gap: 24px; }
    .samples > * { max-width: 100%; min-width: 0; }
    :focus-visible { outline: 3px solid #005fcc; outline-offset: 3px; }
.parent {text-decoration:underline;} .child {text-decoration:none;} .only {text-decoration:underline;}
  </style>
</head>
<body>
<main>
  <h1>부모 장식이 자식에게 보이는 경우</h1>
<p class="parent">부모 밑줄: <span class="child">자식 none</span></p><p><span class="only">이 구간만 밑줄</span> <span>장식 없는 자식</span></p>
</main>
</body>
</html>

첫 문장의 자식에 none을 지정해도 부모가 그린 밑줄이 사라지지 않습니다. 이것은 text-decoration이 일반적인 상속 속성이라는 뜻이 아닙니다. 둘째처럼 장식해야 할 구간에 직접 적용하세요. 첫 부모의 underline만 none으로 바꾸어 차이를 확인한 뒤 복구합니다. 실제 링크는 기본 밑줄을 없애더라도 다른 식별 표시와 포커스를 유지해야 합니다.

실제 링크의 기본·방문·hover·키보드 초점 표시는 링크 꾸미는 방법에서 확인할 수 있습니다.

문자 크기·줄 높이·서체를 함께 조정하려면 글꼴, 글자 크기, 굵기, 줄 간격 설정하기를 참고하세요.

적용되지 않거나 예상과 다를 때

• 선이 남으면 장식을 만든 부모 요소의 규칙을 확인합니다.
• 너무 가까운 밑줄은 두께와 underline-offset을 실제 글꼴에서 함께 조정합니다.