AAtomic CSS

text-decoration

텍스트에 시각적 장식(밑줄, 취소선 등)을 추가하는 속성입니다. 링크의 기본 밑줄을 제거하거나, 삭제된 가격 표시, 강조 등에 활용합니다.

클래스 목록

클래스CSS설명
tdntext-decoration: none장식 제거. 링크 밑줄 제거에 가장 많이 사용
tdutext-decoration: underline밑줄 추가. 강조, 호버 시 링크 표시
tdotext-decoration: overline윗줄 추가. 특수 디자인용
tdlttext-decoration: line-through취소선. 삭제 가격, 완료된 할일 표시

시각적 비교

동일한 텍스트에 각 text-decoration 값을 적용했을 때의 차이를 비교합니다.

None — tdn

The quick brown fox jumps over the lazy dog

장식 없음 — 기본 텍스트와 동일하게 표시됩니다

Underline — tdu

The quick brown fox jumps over the lazy dog

텍스트 아래에 밑줄이 표시됩니다

Overline — tdo

The quick brown fox jumps over the lazy dog

텍스트 위에 줄이 표시됩니다

Line-through — tdlt

The quick brown fox jumps over the lazy dog

텍스트 중앙에 취소선이 표시됩니다

클래스별 상세

tdntext-decoration: none

텍스트의 기본 장식을 제거합니다. 가장 많이 사용되는 클래스로, 주로 <a> 태그의 기본 밑줄을 제거하는 데 사용됩니다. hover-tdu와 조합하여 호버 시에만 밑줄을 표시하는 패턴이 사실상 표준입니다.

<!-- 링크 밑줄 제거 (가장 흔한 사용법) -->
<a href="/about" class="tdn c6366F1 hover-tdu">
  About Us
</a>

<!-- 네비게이션 링크 -->
<nav class="df gap2rem">
  <a href="/" class="tdn cFAFAFA hover-c6366F1">Home</a>
  <a href="/docs" class="tdn cFAFAFA hover-c6366F1">Docs</a>
  <a href="/blog" class="tdn cFAFAFA hover-c6366F1">Blog</a>
</nav>

미리보기

기본 링크 (밑줄 있음)tdn 적용 (호버 시 밑줄)

tdutext-decoration: underline

텍스트에 밑줄을 추가합니다. 텍스트를 강조하거나, 호버 시 링크를 명확하게 표시할 때 사용합니다.

<!-- 텍스트 강조 -->
<p>이 문장에서 <span class="tdu">중요한 부분</span>을 밑줄로 강조합니다.</p>

<!-- 호버 시 밑줄 표시 -->
<a href="#" class="tdn hover-tdu c6366F1">
  마우스를 올리면 밑줄이 표시됩니다
</a>

미리보기

이 문장에서 중요한 부분을 밑줄로 강조합니다.

tdotext-decoration: overline

텍스트 위에 줄을 추가합니다. 일반적인 웹 UI에서는 드물게 사용되지만, 특수한 디자인이나 수학적 표기에서 활용할 수 있습니다.

<!-- 윗줄 텍스트 -->
<span class="tdo cFAFAFA fs16px">Overline Text</span>

미리보기

윗줄이 표시된 텍스트

tdlttext-decoration: line-through

텍스트에 취소선을 추가합니다. 삭제된 가격 표시, 완료된 할일 목록 등에서 자주 사용됩니다.

<!-- 할인 가격 표시 -->
<div class="df aic gap12px">
  <span class="tdlt c71717A fs16px">₩49,000</span>
  <span class="cEF4444 fs2rem fw700">₩29,000</span>
</div>

<!-- 완료된 할일 -->
<ul class="lsn df fdc gap8px">
  <li class="tdlt c71717A">디자인 시안 검토</li>
  <li class="tdlt c71717A">API 연동 테스트</li>
  <li>배포 스크립트 작성</li>
</ul>

미리보기 — 가격 비교

₩49,000₩29,000

미리보기 — 완료된 할일

✓ 디자인 시안 검토

✓ API 연동 테스트

○ 배포 스크립트 작성

자주 쓰는 패턴

링크 스타일링에서 가장 많이 사용되는 조합입니다.

<!-- 스타일링된 링크 (가장 흔한 패턴) -->
<a href="/page" class="tdn hover-tdu c6366F1">
  스타일링된 링크
</a>

<!-- 카드 링크 -->
<a href="/product" class="tdn db bg18181B p2rem br8px hover-bg27272A tall200msease">
  <h3 class="cFAFAFA fw600 mb8px">상품 이름</h3>
  <p class="c71717A fs14px">상품 설명이 여기에 표시됩니다.</p>
</a>

<!-- 가격 비교 -->
<div class="df aic gap12px">
  <span class="tdlt c71717A fs14px">₩49,000</span>
  <span class="cEF4444 fs2rem fw700">₩29,000</span>
  <span class="bg34D399 c000000 py2px px8px br4px fs12px fw600">40% OFF</span>
</div>
패턴용도
tdn hover-tdu c6366F1기본 링크 스타일 — 밑줄 없음, 호버 시 밑줄
tdn hover-tdu cFAFAFA내비게이션 링크 — 밝은 텍스트, 호버 밑줄
tdn db hover-bg27272A카드형 링크 — 블록 전체가 클릭 영역
tdlt c71717A fs14px삭제 가격 — 취소선 + 연한 색상
tdlt c71717A완료된 할일 — 취소선 + 연한 색상

팁 & 주의사항

tdn은 거의 모든 링크에 필수

<a> 태그는 브라우저 기본값으로 밑줄이 표시됩니다. 대부분의 UI에서 tdn으로 기본 밑줄을 제거하고, 필요 시 hover-tdu로 호버 밑줄을 추가합니다.

tdlt로 가격 비교 패턴

할인 가격을 표시할 때 원래 가격에 tdlt를 적용하고 연한 색상(c71717A)을 함께 사용하면 효과적입니다.

접근성 고려

링크에서 tdn을 사용할 때는 색상만으로 링크를 구분하지 마세요. 호버/포커스 시 밑줄을 표시하거나 충분한 색상 대비를 확보해야 합니다.

text-decoration-styletext-decoration-thicknesstext-underline-offsettext-transform