정의 및 사용 방법
text-decoration-thickness
속성은
텍스트에 사용되는 text-decoration-line
으로 지정된 선 장식의 두께(굵기)를 설정합니다.
알아두세요!
해당 속성은 이전에 text-decoration-width
로 불렸지만, 2019년에 text-decoration-thickness
로 업데이트되었습니다.
기본 예제
텍스트 데코레이션 두께를 변경합니다.
형식 구문
selector {
text-decoration-thickness: auto | from-font | <length-percentage>
}
값
text-decoration-thickness
속성은 요소에 text-decoration-line
속성으로 지정된 underline
, overline
, line-through
등의 두께(굵기)를 설정합니다. 값의 의미는 다음과 같습니다.
auto |
브라우저가 텍스트 장식 선의 적절한 너비를 선택하도록 하는 값입니다. |
---|---|
from-font |
폰트 파일에 선호하는 두께 정보가 포함되어 있는 경우 해당 값으로 사용하고, 폰트 파일에 이 정보가 포함되어 있지 않은 경우에는 브라우저가 적절한 두께를 선택하도록 동작하는 값을 나타냅니다. |
<length> |
텍스트 장식 선의 두께를 길이 값으로 지정합니다. |
<percentage> |
텍스트 장식 선의 두께를 1em 의 백분율로 지정합니다. |
구문
/* 단일 키워드 값 */
text-decoration-thickness: auto;
text-decoration-thickness: from-font;
/* 길이 값 */
text-decoration-thickness: 0.12em;
text-decoration-thickness: 5px;
/* 백분율 값 */
text-decoration-thickness: 12%;
/* 전역 값 */
text-decoration-thickness: inherit;
text-decoration-thickness: initial;
text-decoration-thickness: revert;
text-decoration-thickness: revert-layer;
text-decoration-thickness: unset;
형식 정의
초깃값 | auto |
---|---|
적용 요소 | 모든 요소 |
상속 | 아니오 |
애니메이션 | 예 |
일부 브라우저에서는 애니메이션을 지원하지 않습니다.
활용 예제
<p>텍스트 데코레이션 두께가 5px입니다.</p>
p {
text-decoration-line: underline;
text-decoration-color: red;
text-decoration-style: solid;
text-decoration-thickness: 5px;
}
텍스트 데코레이션 두께가 5px입니다.
브라우저 호환성
속성 |
데스크탑 Chrome
|
데스크탑데스크탑 Edge
|
데스크탑 Firefox
|
Safari
|
---|---|---|---|---|
text-decoration-thickness
|
89 | 89 | 70 | 12.1 |
명세서
명세서 사양 | |
---|---|
text-decoration-thickness
|
CSS Text Decoration Module Level 4 #text-decoration-width-property |