텍스트에 적용할 장식의 종류를 설정하려면 text-decoration-line 속성을 사용합니다. 이 속성은 밑줄, 윗줄, 취소선 등 텍스트에 표시되는 장식 선의 종류를 지정하는 데 활용됩니다.
CSS에서 사용할 수 있는 텍스트 장식 옵션은 다음과 같습니다.
text-decoration-line: none|underline|overline|line-through|initial|inherit;
주요 속성 값
- none — 텍스트 장식을 지정하지 않습니다.
- underline — 텍스트 아래에 밑줄을 표시합니다.
- overline — 텍스트 위에 선을 표시합니다.
- line-through — 텍스트 중앙에 취소선을 표시합니다.
- initial — 기본값으로 설정합니다.
- inherit — 부모 요소의 속성 값을 상속받습니다.
예제 1
다음 예제에서는 overline과 underline을 함께 적용하고, 장식 선의 색상을 파란색으로 지정했습니다.
<!DOCTYPE html>
<html>
<head>
<style>
.demo {
text-decoration: overline underline;
text-decoration-color: blue;
}
</style>
</head>
<body>
<h1>Details</h1>
<p class="demo">Examination Center near ABC College.</p>
<p class="demo2">Exam begins at 9AM.</p>
</body>
</html>출력 결과
예제 2
이번에는 span 요소에는 취소선(line-through)을, 특정 문단에는 노란색 밑줄(underline)을 각각 적용해 보겠습니다.
<!DOCTYPE html>
<html>
<head>
<style>
span {
text-decoration: line-through;
text-decoration-color: blue;
}
.demo2 {
text-decoration: underline;
text-decoration-color: yellow;
}
</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>출력 결과
이처럼 text-decoration-line 속성과 text-decoration-color 속성을 조합하면, 텍스트 장식의 종류와 색상을 자유롭게 제어할 수 있습니다. 여러 개의 값을 공백으로 구분하여 동시에 지정하는 것도 가능합니다.