타이포그래피
text-decoration-line
텍스트 장식(decoration)을 제어하는 유틸리티입니다.
| Class | Styles |
|---|---|
underline | text-decoration-line: underline; |
overline | text-decoration-line: overline; |
line-through | text-decoration-line: line-through; |
no-underline | text-decoration-line: none; |
예제
밑줄 텍스트
텍스트에 밑줄을 추가하려면 underline 유틸리티를 사용하세요:
The quick brown fox jumps over the lazy dog.
<p class="underline">The quick brown fox...</p>텍스트에 윗줄 추가하기
overline 유틸리티를 사용해 엘리먼트의 텍스트에 윗줄을 추가할 수 있습니다.
The quick brown fox jumps over the lazy dog.
<p class="overline">The quick brown fox...</p>텍스트에 취소선 추가하기
line-through 유틸리티를 사용해 엘리먼트의 텍스트에 취소선을 추가할 수 있습니다.
The quick brown fox jumps over the lazy dog.
<p class="line-through">The quick brown fox...</p>텍스트에서 밑줄 제거하기
엘리먼트의 텍스트에서 밑줄을 제거하려면 no-underline 유틸리티를 사용하세요:
The quick brown fox jumps over the lazy dog.
<p class="no-underline">The quick brown fox...</p>호버 시 적용하기
text-decoration-line가 모음으로 시작하면 "an", 그렇지 않으면 "a"를 붙여 text-decoration-line 유틸리티 앞에 hover:*와 같은 변형을 추가하면 해당 상태에서만 유틸리티를 적용할 수 있습니다:
텍스트 위에 마우스를 올려 예상되는 동작을 확인하세요
The quick brown fox jumps over the lazy dog.
<p>The <a href="..." class="no-underline hover:underline ...">quick brown fox</a> jumps over the lazy dog.</p>변형 사용에 대해 더 알아보려면 변형 문서를 참고하세요.
반응형 디자인
접두사 a text-decoration-line 유틸리티 를 md:와 같은 브레이크포인트 변형과 함께 사용하면 medium 화면 크기 이상에서만 유틸리티가 적용됩니다:
<a class="no-underline md:underline ..." href="..."> <!-- ... --></a>변형 사용에 대해 더 알아보려면 변형 문서를 참고하세요.
