정의 및 사용 방법
text-decoration-line
속성은
텍스트에 사용되는 선 장식의 종류를 설정합니다.
기본 예제
텍스트 데코레이션 라인 값이 underline입니다.
형식 구문
selector {
text-decoration-line: none | [ underline || overline || line-through || blink ]
}
값
text-decoration-line
속성은 텍스트에 어떤 선 장식이 적용되는지 결정합니다. 아래 값들은 이러한 장식이 어떻게 표시되는지 의미합니다.
none |
텍스트에 어떤 장식도 적용되지 않습니다. |
---|---|
underline |
텍스트에 밑줄을 추가합니다. |
overline |
텍스트 위에 줄을 그립니다. |
line-through |
텍스트 중앙을 가로지르는 취소선을 추가합니다. |
blink |
깜박이는 효과를 주는 것으로, 브라우저의 지원은 제한적이며 사용을 권장하지 않습니다.
(브라우저 호환성 보기) |
spelling-error |
브라우저는 각 텍스트 줄은 철자 오류를 강조하는 점선 또는 웨이브로 된 빨간색 선을 그립니다.
(CSS3에서는 비표준 값, 브라우저 호환성 보기) |
grammar-error |
브라우저는 각 텍스트 줄은 문법 오류를 강조하는 점선 또는 웨이브로 된 회색이나 녹색 선을 그립니다.
(CSS3에서는 비표준 값, 브라우저 호환성 보기) |
구문
/* 단일 키워드 값 */
text-decoration-line: none;
text-decoration-line: underline;
text-decoration-line: overline;
text-decoration-line: line-through;
text-decoration-line: blink;
/* 여러 개 키워드 값 */
text-decoration-line: underline overline;
text-decoration-line: overline underline line-through;
/* 전역 값 */
text-decoration-line: inherit;
text-decoration-line: initial;
text-decoration-line: revert;
text-decoration-line: revert-layer;
text-decoration-line: unset;
형식 정의
초깃값 | none |
---|---|
적용 요소 | 모든 요소 |
상속 | 아니오 |
애니메이션 | 아니오 |
활용 예제
아래는 text-decoration-line
속성을 텍스트에 적용하는 실용적인 예제들입니다. 이 예제들은 단일 값과 다중 값 사용법 모두를 다루며, 웹 접근성 관련 고려사항도 다루고 있습니다.
단일 키워드 값 사용하기
<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
|
CSS Text Decoration Module Level 3 #text-decoration-line-property |