CSS에서 텍스트 장식을 적용하려면 text-decoration 속성을 사용합니다. 이 속성은 아래 개별 속성들을 한 번에 지정할 수 있는 단축 속성(shorthand property)입니다.
text-decoration-line text-decoration-color text-decoration-style
각각의 역할은 다음과 같습니다.
- text-decoration-line: 밑줄(underline), 윗줄(overline), 취소선(line-through) 등 장식의 위치를 지정합니다.
- text-decoration-color: 장식 선의 색상을 지정합니다.
- text-decoration-style: 실선(solid), 물결선(wavy), 점선(dotted) 등 선의 스타일을 지정합니다.
예제 1: 단축 속성 사용하기
먼저 text-decoration 단축 속성을 활용한 기본 예제를 살펴보겠습니다.
<!DOCTYPE html>
<html>
<head>
<style>
.demo {
text-decoration: overline underline;
}
</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>위 코드에서는 .demo 클래스가 적용된 문단에 윗줄(overline)과 밑줄(underline)이 동시에 표시됩니다.
출력 결과
예제 2: 개별 속성 값 사용하기
이번에는 단축 속성 대신 각 개별 속성에 값을 따로 지정하는 예제입니다. 세로 쓰기 모드와 함께 다양한 장식 옵션을 조합해 보겠습니다.
<!DOCTYPE html>
<html>
<head>
<style>
p {
writing-mode: vertical-rl;
text-decoration-line: overline;
text-decoration-color: red;
text-decoration-style: wavy;
}
</style>
</head>
<body>
<h1>Demo Heading</h1>
<p>This is demo text.</p>
</body>
</html>위 예제에서는 writing-mode: vertical-rl로 텍스트를 세로 방향으로 배치하고, 빨간색(red) 물결선(wavy) 스타일의 윗줄 장식을 적용했습니다. 이처럼 개별 속성을 사용하면 색상과 선 스타일까지 세밀하게 제어할 수 있습니다.
출력 결과
정리
text-decoration 단축 속성을 사용하면 간편하게 텍스트 장식을 적용할 수 있고, 더 세부적인 제어가 필요할 때는 text-decoration-line, text-decoration-color, text-decoration-style 속성을 개별적으로 활용하면 됩니다. 상황에 맞게 두 방식을 적절히 조합해 사용해 보세요.