text-decoration-line
속성 사용법
text-decoration-line
속성은
텍스트에 사용되는 선 장식의 종류를 설정합니다.
텍스트 데코레이션 라인 값이 underline입니다.
형식 구문
selector {
text-decoration-line: /* value */
}
형식 정의
초깃값 | none |
---|---|
적용 요소 | 모든 요소 |
상속 | 아니오 |
애니메이션 | 아니오 |
값
none |
텍스트에 어떤 장식도 적용되지 않습니다. |
---|---|
underline |
텍스트에 밑줄을 추가합니다. |
overline |
텍스트 위에 줄을 그립니다. |
line-through |
텍스트 중앙을 가로지르는 취소선을 추가합니다. |
blink |
깜박이는 효과를 주는 것으로, 브라우저의 지원은 제한적이며 사용을 권장하지 않습니다. (CSS3에서는 비표준 값) |
예제
기본 예제
<p>텍스트 데코레이션 라인 값이 underline입니다.</p>
p {
text-decoration-line: underline;
}
텍스트 데코레이션 라인 값이 underline입니다.
여러 값 사용하기
text-decoration-line
속성의 값은 공백으로 구분된 값으로 여러 개의 값을 지정할 수 있습니다.
<p>텍스트 데코레이션 라인 값이 여러 값입니다.</p>
p {
text-decoration-line: underline overline;
}
텍스트 데코레이션 라인 값이 여러 값입니다.
권장하지 않는 사용법
취소나 삭제의 의미를 나타내는 <del>
태그가 아니면 css로 취소한다는 의미의 line-through
를 사용하지 마세요.
아래의 예제와 같이 단순히 스타일로 취소를 한다는 의미로써 line-through
를 사용하지 말아야 합니다. 이는 시각장애인이 웹 접근성의 보조 기구인 스크린 리더를 통해 웹 페이지를 이해하는데 혼란을 줄 수 있습니다. HTML의 의미론적인 취소나 삭제를 의미하는 <del>
태그가 별도로 있습니다.
<p>del 태그가 아니면 css로 취소한다는 의미의 line-through를 사용하지 마세요.</p>
p {
text-decoration-line: line-through;
}
del 태그가 아니면 css로 취소한다는 의미의 line-through를 사용하지 마세요.
다음은 취소의 의미로 <del>
태그를 사용한 예입니다.
<p>
<del>
del 태그가 아니면 css로 취소한다는 의미의 line-through를 사용하지 마세요.
</del>
</p>
<del>
태그는 대부분의 브라우저는 텍스트에 취소선을 표시합니다.
del 태그가 아니면 css로 취소한다는 의미의 line-through를 사용하지 마세요.
브라우저 호환성
속성 |
데스크탑 Chrome
|
데스크탑데스크탑 Edge
|
데스크탑 Firefox
|
Safari
|
---|---|---|---|---|
text-decoration-line
|
57 | 79 | 36 | 12.1 |
명세서
명세서 사양 | |
---|---|
text-decoration-line
|
Link Page Name #text-decoration-line-property |