CSS의 text-decoration 속성은 선택한 요소의 텍스트에 다양한 장식 효과를 적용하는 데 사용됩니다. 밑줄(underline), 윗선(overline), 취소선(line-through) 등의 값을 지정할 수 있으며, text-decoration-line, text-decoration-color, text-decoration-style 세 가지 하위 속성을 한 번에 설정할 수 있는 축약형(shorthand) 속성입니다.
기본 문법
text-decoration 속성의 기본 문법은 다음과 같습니다.
Selector {
text-decoration: /*값*/;
}주요 값 정리
- underline — 텍스트 아래에 선을 그립니다.
- overline — 텍스트 위에 선을 그립니다.
- line-through — 텍스트 중앙에 취소선을 그립니다.
- none — 장식을 제거합니다. 링크의 기본 밑줄을 없앨 때 자주 사용됩니다.
색상과 선 스타일도 함께 지정할 수 있어, 예를 들어 text-decoration: underline red wavy;처럼 빨간색 물결 모양 밑줄을 만들 수도 있습니다.
예제 1: ::before 가상 요소에 윗선 적용하기
다음 예제는 ::before 가상 요소로 삽입한 텍스트에 파란색 윗선(overline)을 적용하는 방법을 보여줍니다.
<!DOCTYPE html>
<html>
<head>
<style>
p:nth-child(2)::before {
content: " We will reach the destination ";
background-color: lightgreen;
text-decoration: overline blue;
font-size: 1.2em;
}
</style>
</head>
<body>
<p>I'm not the only traveller</p>
<p>
before night.
</p>
</body>
</html>실행 결과
위 코드를 실행하면 다음과 같은 결과가 출력됩니다.
예제 2: 취소선과 밑줄 함께 사용하기
다음 예제에서는 span 요소에는 파란색 취소선(line-through)을, p 요소에는 밑줄(underline)을 각각 적용했습니다.
<!DOCTYPE html>
<html>
<head>
<style>
span {
background: rgb(204,22,50);
text-decoration: blue line-through;
font-style: italic;
color: white;
}
p {
text-decoration: underline;
}
</style>
</head>
<body>
<h2>Department Details</h2>
<p>
The employees of Department Marketing, Operations, Finance,
<span>IT</span>
are requested to email their original documents.<span> Delay in submission will lead to delayed verification.</span>
</p>
</body>
</html>실행 결과
위 코드를 실행하면 다음과 같은 결과가 출력됩니다.
활용 팁
a { text-decoration: none; }처럼 작성하면 링크의 기본 밑줄을 제거할 수 있고, :hover 가상 클래스와 조합하면 마우스를 올렸을 때만 밑줄이 나타나도록 설정할 수도 있습니다. 이처럼 text-decoration 속성을 잘 활용하면 텍스트의 강조 여부를 손쉽게 제어하여 가독성과 디자인을 모두 개선할 수 있습니다.