CSS text-decoration-line 속성: text-decoration의 선 장식 종류 설정

정의 및 사용 방법

text-decoration-line 속성은
텍스트에 사용되는 선 장식의 종류를 설정합니다.

기본 예제

형식 구문

값

text-decoration-line 속성은 텍스트에 어떤 선 장식이 적용되는지 결정합니다. 아래 값들은 이러한 장식이 어떻게 표시되는지 의미합니다.

text-decoration-line 속성 값
`none`	텍스트에 어떤 장식도 적용되지 않습니다.
`underline`	텍스트에 밑줄을 추가합니다.
`overline`	텍스트 위에 줄을 그립니다.
`line-through`	텍스트 중앙을 가로지르는 취소선을 추가합니다.
`blink`	깜박이는 효과를 줍니다. (브라우저 지원이 제한적일 수 있습니다. 브라우저 호환성 보기)
`spelling-error`	브라우저는 각 텍스트 줄은 철자 오류를 강조하는 점선 또는 웨이브로 된 빨간색 선을 그립니다. (브라우저 지원이 제한적일 수 있습니다. 브라우저 호환성 보기)
`grammar-error`	브라우저는 각 텍스트 줄은 문법 오류를 강조하는 점선 또는 웨이브로 된 회색이나 녹색 선을 그립니다. (브라우저 지원이 제한적일 수 있습니다. 브라우저 호환성 보기)

구문

CSS

/* 단일 키워드 값 */
text-decoration-line: none;
text-decoration-line: underline;
text-decoration-line: overline;
text-decoration-line: line-through;

/* 여러 개 키워드 값 */
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;

형식 정의

text-decoration-line 속성의 형식 정의
초깃값	`none`
적용 요소	모든 요소
상속	아니오
애니메이션	아니오

활용 예제

아래는 text-decoration-line 속성을 텍스트에 적용하는 실용적인 예제들입니다. 이 예제들은 단일 키워드 값과 여러 개 키워드 값 사용법 모두를 다루며, 웹 접근성 관련 고려 사항도 다루고 있습니다.

단일 키워드 값 사용하기

여러 키워드 값 사용하기

text-decoration-line 속성의 값은 공백(띄어쓰기)으로 구분된 값으로 여러 개의 값을 지정할 수 있습니다.

권장하지 않는 사용법

취소나 삭제의 의미를 나타내는 <del> 태그가 아니면 css로 '취소한다는 의미'의 line-through를 사용하지 마세요.

아래의 예제와 같이 단순히 스타일로 취소를 한다는 의미로써 line-through를 사용하지 말아야 합니다. 이는 시각장애인이 웹 접근성의 보조 기구인 스크린 리더를 통해 웹 페이지를 이해하는데 혼란을 줄 수 있습니다. HTML의 의미론적인 취소나 삭제를 의미하는 <del> 태그가 별도로 있습니다.