CSS에서 텍스트 장식(text-decoration)의 스타일을 지정하려면 text-decoration-style 속성을 사용합니다. 이 속성은 밑줄이나 취소선 등의 장식선이 어떤 형태로 그려질지 결정하며, 다음과 같은 값들을 사용할 수 있습니다.
text-decoration-style: solid | double | dotted | dashed | wavy | initial | inherit;
- solid – 기본값으로, 일반적인 실선을 표시합니다.
- double – 두 줄의 실선을 표시합니다.
- dotted – 점선(도트) 형태로 표시합니다.
- dashed – 파선(대시) 형태로 표시합니다.
- wavy – 물결 모양의 선을 표시합니다.
- initial – 속성을 기본값으로 되돌립니다.
- inherit – 부모 요소의 값을 상속받습니다.
예제 1: 취소선과 이중 밑줄 적용하기
아래 예제에서는 span 요소에 파란색 취소선을 적용하고, 두 번째 문단에는 빨간색 이중 밑줄(double)을 적용했습니다.
<!DOCTYPE html>
<html>
<head>
<style>
span {
text-decoration: line-through;
text-decoration-color: blue;
}
.demo2 {
text-decoration: underline;
text-decoration-style: double;
text-decoration-color: red;
}
</style>
</head>
<body>
<h1>Details</h1>
<p class="demo">Examination Center near <span>XYZ College</span> ABC College.</p>
<p class="demo2">Exam begins at 11AM.</p>
</body>
</html>실행 결과
위 코드를 실행하면 'XYZ College' 부분에 파란색 취소선이 그려지고, 'Exam begins at 11AM.' 문장에는 빨간색 이중 밑줄이 표시되는 것을 확인할 수 있습니다.
예제 2: 윗선에 물결선과 파선 적용하기
이번에는 overline(윗선) 장식에 각각 wavy(물결선)와 dashed(파선) 스타일을 적용한 예제입니다.
<!DOCTYPE html>
<html>
<head>
<style>
.demo {
text-decoration: overline;
text-decoration-color: blue;
text-decoration-style: wavy;
}
.demo2 {
text-decoration: overline;
text-decoration-style: dashed;
text-decoration-color: red;
}
</style>
</head>
<body>
<h1>Details</h1>
<p class="demo">Examination Center near ABC College.</p>
<p class="demo2">Exam begins at 11AM.</p>
</body>
</html>실행 결과
첫 번째 문단에는 파란색 물결 모양의 윗선이, 두 번째 문단에는 빨간색 파선 형태의 윗선이 표시됩니다.
참고 사항
text-decoration-style 속성은 text-decoration-line, text-decoration-color 속성과 함께 사용하면 더욱 다양한 효과를 낼 수 있습니다. 또한 축약형 속성인 text-decoration을 사용해 선의 종류, 색상, 스타일을 한 번에 지정하는 것도 가능합니다. 대부분의 최신 브라우저에서 잘 지원되지만, 구형 브라우저에서는 일부 값이 동작하지 않을 수 있으므로 주의가 필요합니다.