CSS의 text-decoration-color 속성은 text-decoration-line으로 지정한 텍스트 장식(밑줄, 취소선 등)의 색상을 변경하는 데 사용됩니다. 기본적으로 밑줄은 글자와 같은 색상으로 표시되지만, 이 속성을 활용하면 밑줄만 별도의 색상으로 지정할 수 있어 링크나 강조 텍스트를 더욱 돋보이게 만들 수 있습니다.
문법(Syntax)
CSS text-decoration-color 속성의 기본 문법은 다음과 같습니다.
Selector {
text-decoration-color: /*value*/
}속성값으로는 red, violet, green 같은 CSS 색상 이름뿐 아니라 HEX 코드(#ff0000), RGB, HSL 값 등 모든 유효한 CSS 색상 값을 사용할 수 있습니다.
예제 1: 문단 텍스트 밑줄 색상 변경하기
다음 예제는 문단 전체에 밑줄을 적용하고, 밑줄 색상을 보라색(violet)으로 지정하는 방법을 보여줍니다.
<!DOCTYPE html>
<html>
<head>
<style>
p {
background-color: gray;
margin: 4%;
font-size: 1.2em;
text-decoration: underline;
text-decoration-color: violet;
}
</style>
</head>
<body>
<p>
Y aserejé-ja-dejé De jebe tu de jebere seibiunouva majavi an de bugui an de güididípi
</p>
</body>
</html>위 코드를 실행하면 회색 배경 위에 보라색 밑줄이 그려진 텍스트가 출력됩니다.
예제 2: div 영역과 하이퍼링크 밑줄 색상 변경하기
이번 예제에서는 <div> 요소와 <a>(하이퍼링크) 요소에 동시에 스타일을 적용하여, 일반 텍스트와 링크의 밑줄 색상을 초록색(green)으로 변경합니다.
<!DOCTYPE html>
<html>
<head>
<style>
div, a {
margin: 4%;
font-size: 1.2em;
text-decoration: underline;
text-decoration-color: green;
}
</style>
</head>
<body>
<div>
Underlined demo text.
<a href=#>Hyperlink here!</a>
</div>
</body>
</html>위 코드를 실행하면 일반 텍스트와 하이퍼링크 모두 초록색 밑줄로 표시되는 것을 확인할 수 있습니다.
참고 사항
text-decoration-color 속성은 대부분의 최신 브라우저(Chrome, Firefox, Safari, Edge)에서 지원됩니다. 다만 구형 Internet Explorer는 지원하지 않으므로, 호환성이 중요한 프로젝트에서는 주의가 필요합니다. 또한 text-decoration 단축 속성을 사용하면 선 종류(line), 스타일(style), 두께(thickness), 색상(color)을 한 번에 지정할 수 있어 코드를 더 간결하게 작성할 수 있습니다.