CSS의 text-decoration 속성은 텍스트에 밑줄(underline), 윗줄(overline), 취소선(line-through) 등 다양한 장식 효과를 적용할 때 사용하는 속성입니다.
사용 가능한 값
text-decoration 속성에는 다음과 같은 값을 지정할 수 있습니다.
- none: 장식 효과를 제거함 (링크의 기본 밑줄을 없앨 때 자주 사용)
- underline: 텍스트 아래에 밑줄을 표시함
- overline: 텍스트 위에 줄을 표시함
- line-through: 텍스트 중앙을 관통하는 취소선을 표시함
- blink: 텍스트에 깜빡임 효과를 적용함 (현재 대부분의 브라우저에서 지원하지 않음)
예제
다음 예제는 text-decoration 속성을 활용하여 텍스트를 장식하는 방법을 보여줍니다.
<html>
<head>
</head>
<body>
<p style = "text-decoration:underline;">
This will be underlined
</p>
<p style = "text-decoration:line-through;">
This will be striked through.
</p>
<p style = "text-decoration:overline;">
This will have a over line.
</p>
<p style = "text-decoration:blink;">
This text will have blinking effect
</p>
</body>
</html>
실행 결과 설명
underline이 적용된 첫 번째 문단은 텍스트 아래에 밑줄이 그려집니다.line-through가 적용된 두 번째 문단은 텍스트 중앙에 취소선이 표시됩니다.overline이 적용된 세 번째 문단은 텍스트 위에 줄이 나타납니다.blink가 적용된 네 번째 문단은 깜빡임 효과가 설정되지만, 웹 접근성 문제로 인해 최신 브라우저에서는 대부분 동작하지 않습니다.