text-decoration 관련 속성들
text-decoration
속성은 텍스트에 사용되는 선 장식을 설정합니다. 이 속성은 text-decoration-line
, text-decoration-color
, text-decoration-style
및 최신 속성인 text-decoration-thickness
의 단축 표현(shorthand property)입니다.
같이 보기
text-decoration
속성 사용법
텍스트 데코레이션 단축 속성입니다.
selector {
text-decoration: <'text-decoration-line'> || <'text-decoration-style'> || <'text-decoration-color'>
/*
이 값은
text-decoration-line,
text-decoration-color,
text-decoration-style,
text-decoration-thickness 속성의 값입니다.
지정하는 속성 값의 순서는 상관없습니다.
지정하지 않은(생략한) 속성의 값은 초깃값이 적용됩니다.
*/
}
형식 정의
초깃값 | 각 단축 속성별로:
text-decoration-line : none
text-decoration-color : currentcolor (현재 글자색)
text-decoration-style : solid
text-decoration-thickness : auto |
---|---|
적용 요소 | 모든 요소 |
상속 | 아니오 |
구문
text-decoration: underline;
text-decoration: overline blue;
text-decoration: none;
/* 전역 값 */
text-decoration: inherit;
text-decoration: initial;
text-decoration: unset;
text-decoration: revert;
text-decoration: revert-layer;
text-decoration
속성은 하나 이상의 공백으로 구분된 값을 지정하며, 이 값들은 text-decoration-line
, text-decoration-color
, text-decoration-style
및 text-decoration-thickness
속성의 값입니다. 지정하는 값의 순서는 상관없습니다.
text-decoration-line |
텍스트에 사용되는 선 장식의 종류를 설정합니다. |
---|---|
text-decoration-color |
텍스트에 사용되는
text-decoration-line 으로 지정된 선 장식의 색상을 설정합니다. |
text-decoration-style |
텍스트에 사용되는
text-decoration-line 으로 지정된 선 장식의 스타일을 설정합니다. |
text-decoration-thickness |
텍스트에 사용되는
text-decoration-line 으로 지정된 선 장식의 두께를 설정합니다. |
예제
<p>텍스트 데코레이션입니다.</p>
p {
text-decoration: underline red;
}
/*
생략한 text-decoration-style은 초깃값인 solid로 지정됨
생략한 text-decoration-thickness는 초깃값인 auto로 지정됨
*/
텍스트 데코레이션입니다.
주의할 점
text-decoration
속성을 사용할 때에는 몇 가지 주의할 점이 있습니다.
브라우저 호환성 주의
<p>텍스트 데코레이션입니다.</p>
text-decoration-thickenss
값이 포함된 text-decoration
값은 지원하지 않습니다.
마지막 업데이트 정보: 2024-06-12
p {
text-decoration: underline red 5px;
}
/*
생략한 text-decoration-style은 초깃값인 solid로 지정됨
*/
p {
text-decoration: underline red;
text-decoration-thickness: 5px;
}
/*
생략한 text-decoration-style은 초깃값인 solid로 지정됨
*/
텍스트 데코레이션입니다.
초깃값 주의
<p>텍스트 데코레이션입니다.</p>
p {
text-decoration: red;
}
/*
생략한 text-decoration-line은 초깃값인 none로 지정됨 => 중요
생략한 text-decoration-style은 초깃값인 solid로 지정됨
생략한 text-decoration-thickness는 초깃값인 auto로 지정됨
*/
텍스트 데코레이션입니다.
위 예제의 경우 생략한 text-decoration-line
은 초깃값인 none
로 지정됩니다. none
값은 텍스트에 어떤 장식도 적용되지 않습니다.
브라우저 호환성
마지막 업데이트 정보: 2024-06-12
속성 |
데스크탑 Chrome
|
데스크탑데스크탑 Edge
|
데스크탑 Firefox
|
Safari
|
---|---|---|---|---|
text-decoration
|
1 | 12 | 1 | 1 |
단축 표현
|
57 | 79 | 6 | 8 |
text-decoration-thickness 값이 포함된 단축 표현 |
87 | 87 | 70 | 지원하지 않음 |
명세서
명세서 사양 | |
---|---|
text-decoration
|
CSS Text Decoration Module Level 3 #text-decoration-property |
같이 보기
- CSS text-decoration-line 속성 : text-decoration의 종류 설정
- CSS text-decoration-color 속성 : text-decoration의 색상 설정
- CSS text-decoration-style 속성 : text-decoration의 스타일 설정
- CSS text-decoration-thickness 속성 : text-decoration의 두께 설정
- CSS text-emphasis 속성
- CSS text-shadow 속성 - 올바른 이해와 사용 방법
- CSS -webkit-text-stroke 속성 - 텍스트 테두리 외곽선 스타일하기
- CSS text-align 속성 - 텍스트 등 인라인 콘텐츠 가로 정렬 설정