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

`text-decoration-line` 속성 사용법

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

형식 구문

형식 정의

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

값

text-decoration-line 속성 값
`none`	텍스트에 어떤 장식도 적용되지 않습니다.
`underline`	텍스트에 밑줄을 추가합니다.
`overline`	텍스트 위에 줄을 그립니다.
`line-through`	텍스트 중앙을 가로지르는 취소선을 추가합니다.
`blink`	깜박이는 효과를 주는 것으로, 브라우저의 지원은 제한적이며 사용을 권장하지 않습니다. (CSS3에서는 비표준 값)

예제

기본 예제

여러 값 사용하기

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

권장하지 않는 사용법

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

HTML <del> 태그

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