CSS text-decoration-thickness 속성 : text-decoration의 두께(굵기) 설정

정의 및 사용 방법

text-decoration-thickness 속성은
텍스트에 사용되는 text-decoration-line으로 지정된 선 장식의 두께(굵기)를 설정합니다.

알아두세요!
해당 속성은 이전에 text-decoration-width로 불렸지만, 2019년에 text-decoration-thickness로 업데이트되었습니다.

기본 예제

형식 구문

값

text-decoration-thickness 속성은 요소에 text-decoration-line 속성으로 지정된 underline, overline, line-through 등의 두께(굵기)를 설정합니다. 값의 의미는 다음과 같습니다.

text-decoration-thickness 속성 값
`auto`	브라우저가 텍스트 장식 선의 적절한 너비를 선택하도록 하는 값입니다.
`from-font`	폰트 파일에 선호하는 두께 정보가 포함되어 있는 경우 해당 값으로 사용하고, 폰트 파일에 이 정보가 포함되어 있지 않은 경우에는 브라우저가 적절한 두께를 선택하도록 동작하는 값을 나타냅니다.
`<length>`	텍스트 장식 선의 두께를 길이 값으로 지정합니다.
`<percentage>`	텍스트 장식 선의 두께를 `1em`의 백분율로 지정합니다.

구문

CSS

/* 단일 키워드 값 */
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;