정의 및 사용 방법
text-decoration-style
속성은
텍스트에 text-decoration-line
으로 지정된 선 장식으로 그려진 선의 스타일을 설정합니다.
이 속성은 solid
, dashed
, dotted
, double
, wavy
등의 스타일을 지원합니다
기본 예제
텍스트의 선 장식으로 그려진 선의 스타일을 설정합니다.
형식 구문
selector {
text-decoration-style: solid | double | dotted | dashed | wavy
}
값
text-decoration-style
속성은 요소에 지정된 텍스트 장식 선의 스타일을 지정합니다. 아래 값들은 이러한 스타일이 어떻게 그려지는지를 의미합니다.
solid |
일반적인 실선 스타일입니다. |
---|---|
double |
이중선 스타일입니다. |
dotted |
점선 스타일입니다. |
dashed |
대쉬선 스타일입니다. |
wavy |
파동 모양의 선 스타일입니다. |
구문
/* 키워드 값 */
text-decoration-style: solid;
text-decoration-style: double;
text-decoration-style: dotted;
text-decoration-style: dashed;
text-decoration-style: wavy;
/* 전역 값 */
text-decoration-style: inherit;
text-decoration-style: initial;
text-decoration-style: revert;
text-decoration-style: revert-layer;
text-decoration-style: unset;
형식 정의
초깃값 | solid |
---|---|
적용 요소 | 모든 요소 |
상속 | 아니오 |
애니메이션 | 아니오 |
활용 예제
<p>텍스트 데코레이션 스타일 값이 wavy입니다.</p>
p {
text-decoration: underline;
text-decoration-color: red;
text-decoration-style: wavy;
}
텍스트 데코레이션 스타일 값이 wavy입니다.
브라우저 호환성
속성 |
데스크탑 Chrome
|
데스크탑데스크탑 Edge
|
데스크탑 Firefox
|
Safari
|
---|---|---|---|---|
text-decoration-style
|
57 | 79 | 36 | 12.1 |
명세서
명세서 사양 | |
---|---|
text-decoration-style
|
CSS Text Decoration Module Level 3 #text-decoration-style-property |