CSS text-decoration 속성 - 코딩에브리바디

text-decoration 관련 속성들

text-decoration 속성은 텍스트에 사용되는 선 장식을 설정합니다. 이 속성은 text-decoration-line, text-decoration-color, text-decoration-style 및 최신 속성인 text-decoration-thickness의 단축 표현(shorthand property)입니다.

같이 보기

`text-decoration` 속성 사용법

CSS

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 속성의 정의
초깃값	각 단축 속성별로: `text-decoration-line`: `none` `text-decoration-color`: `currentcolor`(현재 글자색) `text-decoration-style`: `solid` `text-decoration-thickness`: `auto`
적용 요소	모든 요소
상속	아니오

CSS 출처링크: https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration#syntax

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 속성 값
`text-decoration-line`	텍스트에 사용되는 선 장식의 종류를 설정합니다.
`text-decoration-color`	텍스트에 사용되는 `text-decoration-line`으로 지정된 선 장식의 색상을 설정합니다.
`text-decoration-style`	텍스트에 사용되는 `text-decoration-line`으로 지정된 선 장식의 스타일을 설정합니다.
`text-decoration-thickness`	텍스트에 사용되는 `text-decoration-line`으로 지정된 선 장식의 두께를 설정합니다.

예제

CSS

p {
    text-decoration: underline red;
}
/*
    생략한 text-decoration-style은 초깃값인 solid로 지정됨
    생략한 text-decoration-thickness는 초깃값인 auto로 지정됨
*/

주의할 점

text-decoration 속성을 사용할 때에는 몇 가지 주의할 점이 있습니다.

브라우저 호환성 주의

CSS - Safari 브라우저 지원 안함 Safari 브라우저에서는 text-decoration-thickenss 값이 포함된 text-decoration 값은 지원하지 않습니다.
마지막 업데이트 정보: 2024-06-12

p {
    text-decoration: underline red 5px;
}
/*
    생략한 text-decoration-style은 초깃값인 solid로 지정됨
*/

CSS - Safari 브라우저 지원을 위한 방법

p {
    text-decoration: underline red;
    text-decoration-thickness: 5px;
}
/*
    생략한 text-decoration-style은 초깃값인 solid로 지정됨
*/

초깃값 주의

CSS

p {
    text-decoration: red;
}
/*
    생략한 text-decoration-line은 초깃값인 none로 지정됨 => 중요
    생략한 text-decoration-style은 초깃값인 solid로 지정됨
    생략한 text-decoration-thickness는 초깃값인 auto로 지정됨
*/