text-decoration 속성은 CSS에서 텍스트의 장식(underline, line-through 등)을 설정하는 데 사용됩니다. 이 속성을 사용하여 텍스트에 다양한 스타일을 적용할 수 있습니다. text-decoration 속성의 다양한 사용 예시에 대해서 알아 봅니다.
text-decoration 속성 개요
text-decoration은 선으로 텍스트를 꾸밀 수 있게 해주는 속성입니다.
- 기본값 : none
- 상속 : No
- 애니메이션 : No
- 버전 : CSS Level 1
text-decoration 속성 문법
text-decoration: none | line-through | overline | underline | initial | inherit- none : 선을 만들지 않습니다.
- line-through : 글자 중간에 선을 만듭니다.
- overline : 글자 위에 선을 만듭니다.
- underline : 글자 아래에 선을 만듭니다.
- initial : 기본값으로 설정합니다.
- inherit : 부모 요소의 속성값을 상속받습니다.
속성값을 여러개 사용하여 여러 선을 만들 수 있습니다. 예를 들어
text-decoration: overline underline;는 글자 위와 아래에 선을 만듭니다.
text-decoration 속성 예제
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>CSS Reference</title>
<style>
.a {text-decoration: none;}
.b {text-decoration: line-through;}
.c {text-decoration: overline;}
.d {text-decoration: underline;}
.e {text-decoration: overline underline;}
.f {text-decoration: overline underline line-through;}
</style>
</head>
<body>
<p class="a">text-decoration: none;</p>
<p class="b">text-decoration: line-through;</p>
<p class="c">text-decoration: overline;</p>
<p class="d">text-decoration: underline;</p>
<p class="e">text-decoration: overline underline;</p>
<p class="f">text-decoration: overline underline line-through;</p>
</body>
</html>
<결과 화면>
text-decoration-style 문법
text-decoration-style: solid|double|dotted|dashed|wavy|initial|inherit;- solid: 텍스트 장식을 실선으로 표시합니다.
- double: 텍스트 장식을 이중선으로 표시합니다.
- dotted: 텍스트 장식을 점선으로 표시합니다.
- dashed: 텍스트 장식을 대시선으로 표시합니다.
- wavy: 텍스트 장식을 파동선으로 표시합니다.
text-decoration 속성 부연설명
text-decoration 속성은 CSS에서 텍스트의 장식(underline, line-through 등)을 설정하는 데 사용됩니다. 이 속성을 사용하여 텍스트에 다양한 스타일을 적용할 수 있습니다.
==============
.text {
text-decoration: underline;
}
위의 예제에서 .text 클래스가 적용된 텍스트는 text-decoration: underline 속성을 통해 밑줄이 그어집니다.
더보기
주요 text-decoration 속성 값은 다음과 같습니다:
- none: 텍스트에 어떠한 장식도 적용하지 않습니다.
- underline: 텍스트에 밑줄을 그립니다.
- overline: 텍스트 위에 선을 그립니다.
- line-through: 텍스트에 가로 선을 그립니다.
- blink: 텍스트가 깜빡거립니다. (일부 브라우저에서는 지원하지 않음)
- inherit: 부모 요소의
text-decoration속성 값을 상속받습니다.
예를 들어, 아래와 같이 text-decoration 속성을 조합하여 텍스트에 다양한 스타일을 적용할 수도 있습니다:
.text {
text-decoration: underline line-through;
}
위의 예제에서 .text 클래스가 적용된 텍스트는 밑줄과 가로 선이 함께 적용됩니다.
또한, text-decoration 속성은 color, style, thickness와 같은 속기형 표기법을 통해 세부적인 스타일을 설정할 수도 있습니다. 이를 통해 텍스트 장식의 색상, 스타일, 굵기 등을 지정할 수 있습니다.
.text {
text-decoration: underline red dotted 2px;
}
위의 예제에서 .text 클래스가 적용된 텍스트는 밑줄이 빨간색 점선으로 그려지며, 두께는 2px입니다.
text-decoration 속성을 사용하여 텍스트에 원하는 스타일을 적용해 텍스트를 꾸밀 수 있습니다.
text-decoration-style 속성 부연 설명
text-decoration-style 속성은 CSS에서 text-decoration 속성으로 설정된 텍스트 장식의 스타일을 정의하는 데 사용됩니다. 이 속성을 사용하여 텍스트의 장식 스타일을 변경할 수 있습니다.
.text {
text-decoration: line-through;
text-decoration-style: dotted;
}
위의 예제에서 .text 클래스가 적용된 텍스트는 text-decoration: line-through로 가로 선이 그어지며, text-decoration-style: dotted 속성을 통해 점선 스타일로 표시됩니다.
더보기
text-decoration-style 속성은 다음과 같은 값들을 가질 수 있습니다:
- solid: 텍스트 장식을 실선으로 표시합니다.
- double: 텍스트 장식을 이중선으로 표시합니다.
- dotted: 텍스트 장식을 점선으로 표시합니다.
- dashed: 텍스트 장식을 대시선으로 표시합니다.
- wavy: 텍스트 장식을 파동선으로 표시합니다.
.text {
text-decoration: underline;
text-decoration-style: wavy;
}
위의 예제에서 .text 클래스가 적용된 텍스트는 밑줄이 그어지며, text-decoration-style: wavy 속성으로 파동선 스타일로 표시됩니다.
text-decoration-style 속성은 text-decoration 속성의 스타일을 변경하는 데 사용되므로, text-decoration 속성과 함께 사용되어야 합니다. 이를 통해 텍스트 장식의 스타일을 세부적으로 제어할 수 있습니다.
.text {
text-decoration: line-through dotted;
text-decoration-style: double;
}
위의 예제에서 .text 클래스가 적용된 텍스트는 가로 선이 이중선으로 그려지며, 점선 스타일로 표시됩니다.
text-decoration-style 속성은 텍스트 장식의 스타일을 변경하여 텍스트에 원하는 시각적 효과를 부여하는 데 사용될 수 있습니다.
