CSS 텍스트 장식(text-decoration) 속성 소개
최근 CSS에 새롭게 도입된 여러 text-decoration 관련 속성 덕분에, 이전보다 훨씬 다양하고 세밀한 방식으로 텍스트를 꾸밀 수 있게 되었습니다. text-decoration은 text-decoration-thickness(장식 선의 두께), text-decoration-color(장식 선의 색상), text-decoration-line(장식 선의 종류), text-decoration-style(장식 선의 스타일) 네 가지 속성을 한 번에 설정할 수 있는 축약형(shorthand) 속성입니다.
반면 text-decoration-skip, text-decoration-skip-ink, text-underline-offset, text-underline-position 같은 속성들은 축약형에 포함되지 않으므로, 필요할 경우 개별적으로 명시해서 지정해야 합니다.
기본 문법(Syntax)
CSS text-decoration 속성의 기본적인 사용 문법은 다음과 같습니다.
Selector {
text-decoration: /*값*/
}예제 1: 다양한 텍스트 장식 스타일 적용하기
아래 예제는 CSS text-decoration 속성을 활용해 여러 종류의 텍스트 장식을 구현하는 방법을 보여줍니다.
<!DOCTYPE html>
<html>
<head>
<style>
#one {
text-decoration-style: double;
text-decoration-skip-ink: auto;
}
p {
padding: 2%;
text-decoration-line: underline overline;
text-decoration-style: wavy;
}
p:nth-of-type(even) {
text-decoration: overline;
}
span {
text-decoration: line-through;
}
</style>
</head>
<body>
<p id="one">Random Demo abcdefghijklmnopqrstuvwxyz</p>
<p>Random Demo Text</p>
<p>Random <span>Demo</span> Text</p>
</body>
</html>위 코드를 실행하면 다음과 같은 결과 화면을 확인할 수 있습니다.
예제 2: 장식 선의 두께와 점선 스타일 조절하기
다음 예제는 text-decoration-thickness로 장식 선의 두께를 조절하고, dotted 스타일을 적용하는 방법을 보여줍니다.
<!DOCTYPE html>
<html>
<head>
<style>
p {
margin: 3%;
font-size: x-large;
text-decoration-line: underline overline;
text-decoration-style: dotted;
text-decoration-skip-ink: none;
text-decoration-thickness: 4px;
}
</style>
</head>
<body>
<p>Super Demo abcdefghijklmnopqrstuvwxyz</p>
</body>
</html>실행 결과는 아래와 같습니다.
