CSS text-decoration 속성 – 텍스트 장식 단축 속성

정의 및 사용 방법

text-decoration 속성은
텍스트 장식 스타일을 지정하는 text-decoration-line, text-decoration-color, text-decoration-style, text-decoration-thickness 속성을 한 번에 지정할 수 있는 단축 속성(shorthand property)입니다.

이 단축 속성을 사용하면 여러 텍스트 장식 속성을 한 번에 설정할 수가 있어서, 코드의 간결성과 유지 보수 측면에서 모두 편리합니다.

단축 속성에서 생략된 값들은 모두 각 개별 속성의 초깃값(initial value)으로 설정됩니다.

기본 예제

형식 구문

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-thickness 속성은 CSS 명세상 text-decoration 단축 속성에 공식적으로 포함되어 있지 않지만, Chrome과 Firefox 등 대부분의 최신 브라우저에서는 단축 선언 안에서도 동작합니다. 단, Safari는 이를 지원하지 않기 때문에, 모든 브라우저 간의 호환성을 원할 경우 text-decoration-thickness는 별도로 선언하는 것이 좋습니다. 브라우저 호환성을 참조하세요!

값

text-decoration 속성은 하나 이상의 공백으로 구분된 값을 지정하며, 이 값들은 text-decoration-line, text-decoration-color, text-decoration-style 및 text-decoration-thickness 속성의 값입니다. 지정하는 값의 순서는 상관없습니다.

이 단축 속성에서 개별 속성의 값은 생략할 수 있으며, 생략된 값들은 모두 각 개별 속성의 초깃값(initial value)으로 설정됩니다.

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

구문

CSS

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`: `none` `text-decoration-color`: `currentcolor` (현재 글자색) `text-decoration-style`: `solid` `text-decoration-thickness`: `auto`
적용 요소	모든 요소
상속	아니오

활용 예제

CSS

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

주의할 점

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

브라우저 호환성 주의

CSS - Safari 브라우저 지원 안 함 Safari 브라우저에서는 text-decoration-thickenss 값이 포함된 text-decoration 값은 지원하지 않습니다.
브라우저 호환성을 참조하세요!

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로 지정됨
*/

위 예제의 경우 생략한 text-decoration-line은 초깃값인 none로 지정됩니다. none 값은 텍스트에 어떤 장식도 적용되지 않습니다.

브라우저 호환성

마지막 업데이트 정보: 2025-07-01

text-decoration속성에 대한 브라우저 호환성
속성	데스크탑 Chrome	데스크탑데스크탑 Edge	데스크탑 Firefox	Safari
`text-decoration`	1	12	1	1
`text-decoration-color`, `text-decoration-style`이 포함된 단축 속성	57	79	6	8
`text-decoration-thickness` 값이 포함된 단축 속성	87	87	70	지원하지 않음