Reference/CSS

text-decoration 속성은 텍스트 라인 속성을 일괄적으로 설정합니다.

by @webs 2022. 11. 11.

text-decoration

text-decoration 속성은 텍스트 라인 속성을 일괄적으로 설정합니다. 라인의 굵기를 설정하고 싶다면, text-decoration-thickness 속성을 사용하고, 라인의 색상을 설정하고 싶다면, text-decoration-color 속성을 사용하고, 라인의 종류를 설정하고 싶다면, text-decoration-style 속성을 사용하고, 라인의 위치를 설정하고 싶다면, text-decoration-line 속성을 사용합니다. 여러개의 효과를 동시에도 사용이 가능합니다.

특징	설명
기본값	text-decoration-color : currentcolor text-decoration-style : solid text-decoration-line : none
적용	text
버전	CSS1, CSS3
사용성	★★★☆☆

정의(Definition)

text-decoration 속성은 글자 라인 속성을 일괄적으로 설정합니다.

텍스트 라인과 관련된 속성

text-decoration 속성은 글자 라인 속성을 일괄적으로 설정합니다.
text-decoration-color 속성은 글자 라인의 색상 속성을 설정합니다.
text-decoration-line 속성은 글자 라인의 위치 속성을 설정합니다.
text-decoration-style 속성은 글자 라인의 종류 속성을 설정합니다.
text-decoration-thickness 속성은 글자 라인의 굵기 속성을 설정합니다.
text-decoration-skip-ink 속성은 언더 라인의 글씨 겹침을 설정합니다.
text-underline-offset 속성은 언더 라인의 오프셋 값을 설정합니다.
text-underline-position 속성은 언더 라인의 위치를 설정합니다.

텍스트와 관련된 속성

text-align 속성은 텍스트 정렬 방식을 설정합니다.
text-align-last 속성은 문단의 마지막 텍스트 정렬 방식을 설정합니다.
text-decoration 속성은 텍스트 라인 속성을 설정합니다.
text-indent 속성은 문단 들여쓰기 속성을 설정합니다.
text-justify 속성은 텍스트의 정렬 유형을 설정합니다.
text-overflow 속성은 텍스트 영역 속성을 설정합니다.
text-shadow 속성은 텍스트 그림자를 설정합니다.
text-transform 속성은 텍스트 대/소문자를 설정합니다.
text-emphasis 속성은 텍스트에 강조 표시를 설정합니다.
text-underline-offset 속성은 언더라인의 오프셋값을 설정합니다.
text-underline-position 속성은 언더라인의 위치를 설정합니다.
text-combine-upright 속성은 문자 조합을 설정합니다.
text-size-adjust 속성은 스마트폰에서 텍스트 비율을 설정합니다.
text-fill-color 속성은 텍스트의 면 색상을 설정합니다.
text-stroke 속성은 텍스트의 선 색상 및 굵기를 설정합니다.

폰트와 관련된 속성

font 속성은 폰트에 관한 설정을 일괄적으로 설정합니다.
font-family 속성은 폰트 종류를 설정합니다.
font-size 속성은 폰트 사이즈 속성을 설정합니다.
font-size-adjust 속성은 소문자를 기준으로 폰트 크기를 설정합니다.
font-style 속성은 폰트의 스타일을 설정합니다.
font-weight 속성은 폰트의 두께를 설정합니다.
font-stretch 속성은 폰트의 장평을 설정합니다.
font-variant 속성은 영문 폰트의 소문자 표시 형태를 설정합니다.
font-feature-settings 속성은 오픈 타입 글꼴의 세부사항을 설정합니다.
font-kerning 속성은 커닝 기능을 사용할 것인지의 여부를 설정합니다.
font-language-override 속성은 정의된 언어를 다른 언어로 설정합니다.
font-optical-sizing 속성은 텍스트 렌더링을 통해 다양한 크기를 설정합니다.
font-synthesis 속성은 누락된 텍스트의 합성 여부를 설정합니다.
@font-face 속성은 웹폰트를 설정합니다.
color 속성은 폰트의 색상을 설정합니다.

문법(Syntax)

text-decoration : text-decoratio-line | text-decoratio-style | text-decoratio-color

/* 기본 속성 */
text-decoration: underline;             /* text-decoratio-line */
text-decoration: overline red;          /* text-decoratio-line | text-decoratio-color */
text-decoration: overline double red;   /* text-decoratio-line | text-decoratio-style | text-decoratio-color */
text-decoration: none;

/* 전역 속성 */
text-decoration: inherit;   /* 상속 */
text-decoration: initial;   /* 초기화 */
text-decoration: revert;  /* 원래대로 돌리기 */
text-decoration: unset;   /* 설정 해제 */

속성(Property)

속성값	값(예)	설명
text-decoration-line	text-decoration-line : none; text-decoration-line : underline; text-decoration-line : overline; text-decoration-line : line-through; text-decoration-line : blink;	글자 라인의 위치 속성을 설정합니다.
text-decoratio-style	text-decoratio-style : solid text-decoratio-style : double text-decoratio-style : dotted text-decoratio-style : dashed text-decoratio-style : wavy	글자 라인의 종류 속성을 설정합니다.
text-decoration-color	text-decoration-color : #fff	글자 라인의 색상 속성을 설정합니다.
text-decoration-thickness	text-decoration-thickness : auto; text-decoration-thickness : from-font; text-decoration-thickness : 1px; text-decoration-thickness : 1%;	글자 라인의 굵기 속성을 설정합니다.

예제1(Sample)

라인의 여러가지 속성을 일괄적으로 설정한 예제입니다.

text-align 속성은 텍스트 정렬 방식을 설정합니다.
text-align-last 속성은 문단의 마지막 텍스트 정렬 방식을 설정합니다.
text-decoration 속성은 텍스트 라인 속성을 설정합니다.
text-indent 속성은 문단 들여쓰기 속성을 설정합니다.
text-justify 속성은 텍스트의 정렬 유형을 설정합니다.
text-overflow 속성은 텍스트 영역 속성을 설정합니다.

text-decoration: underline; text-decoration: underline dotted; text-decoration: overline dotted red; text-decoration: green wavy underline; text-decoration: underline overline #FF3028; text-decoration: wavy overline line-through #ff4b4b;

HTML

CSS

SCRIPT

<div class="text-box">
    <ul>
        <li><i>text-align</i> 속성은 텍스트 정렬 방식을 설정합니다.</li>
        <li><i>text-align-last</i> 속성은 문단의 마지막 텍스트 정렬 방식을 설정합니다.</li>
        <li><i>text-decoration</i> 속성은 텍스트 라인 속성을 설정합니다.</li>
        <li><i>text-indent</i> 속성은 문단 들여쓰기 속성을 설정합니다.</li>
        <li><i>text-justify</i> 속성은 텍스트의 정렬 유형을 설정합니다.</li>
        <li><i>text-overflow</i> 속성은 텍스트 영역 속성을 설정합니다.</li>
    </ul>
</div>

.text-box {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
.text-box .box {
    width: 32%;
    line-height: 1.4;
}
@media (max-width:800px){
    .text-box .box {
        width: 100%;
        margin-bottom: 2%;
    }
}

document.querySelectorAll("#sample1 .sampleBtn a").forEach(btn => {
    btn.addEventListener("click", (e)=> {
        e.preventDefault();
        const text = btn.innerText;

        document.querySelectorAll("#sample1 .text-box ul li").forEach(li => {
            li.setAttribute("style", text);
        })
    })
});

예제2(Sample)

text-decoration-color를 설정한 예제입니다.

text-align 속성은 텍스트 정렬 방식을 설정합니다.
text-align-last 속성은 문단의 마지막 텍스트 정렬 방식을 설정합니다.
text-decoration 속성은 텍스트 라인 속성을 설정합니다.
text-indent 속성은 문단 들여쓰기 속성을 설정합니다.
text-justify 속성은 텍스트의 정렬 유형을 설정합니다.
text-overflow 속성은 텍스트 영역 속성을 설정합니다.

text-decoration-color: red text-decoration-color: #00ff00; text-decoration-color: rgba(255, 128, 128, 0.5); text-decoration-color: hsla(200, 100%, 50%, 0.8); text-decoration-color: transparent; text-decoration-color: currentcolor;

HTML

CSS

SCRIPT

<div class="text-box">
    <ul>
        <li><i>text-align</i> 속성은 텍스트 정렬 방식을 설정합니다.</li>
        <li><i>text-align-last</i> 속성은 문단의 마지막 텍스트 정렬 방식을 설정합니다.</li>
        <li><i>text-decoration</i> 속성은 텍스트 라인 속성을 설정합니다.</li>
        <li><i>text-indent</i> 속성은 문단 들여쓰기 속성을 설정합니다.</li>
        <li><i>text-justify</i> 속성은 텍스트의 정렬 유형을 설정합니다.</li>
        <li><i>text-overflow</i> 속성은 텍스트 영역 속성을 설정합니다.</li>
    </ul>
</div>

.text-box {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
.text-box .box {
    width: 32%;
    line-height: 1.4;
}
@media (max-width:800px){
    .text-box .box {
        width: 100%;
        margin-bottom: 2%;
    }
}

document.querySelectorAll("#sample1 .sampleBtn a").forEach(btn => {
    btn.addEventListener("click", (e)=> {
        e.preventDefault();
        const text = btn.innerText;
        document.querySelector("#sample1 .text-box").setAttribute("style", text);
    })
});

예제3(Sample)

text-decoration-line을 설정한 예제입니다.

text-align 속성은 텍스트 정렬 방식을 설정합니다.
text-align-last 속성은 문단의 마지막 텍스트 정렬 방식을 설정합니다.
text-decoration 속성은 텍스트 라인 속성을 설정합니다.
text-indent 속성은 문단 들여쓰기 속성을 설정합니다.
text-justify 속성은 텍스트의 정렬 유형을 설정합니다.
text-overflow 속성은 텍스트 영역 속성을 설정합니다.

text-decoration-line: underline; text-decoration-line: overline; text-decoration-line: line-through; text-decoration-line: underline overline; text-decoration-line: underline line-through;

HTML

CSS

SCRIPT

<div class="text-box">
    <ul>
        <li><i>text-align</i> 속성은 텍스트 정렬 방식을 설정합니다.</li>
        <li><i>text-align-last</i> 속성은 문단의 마지막 텍스트 정렬 방식을 설정합니다.</li>
        <li><i>text-decoration</i> 속성은 텍스트 라인 속성을 설정합니다.</li>
        <li><i>text-indent</i> 속성은 문단 들여쓰기 속성을 설정합니다.</li>
        <li><i>text-justify</i> 속성은 텍스트의 정렬 유형을 설정합니다.</li>
        <li><i>text-overflow</i> 속성은 텍스트 영역 속성을 설정합니다.</li>
    </ul>
</div>

.text-box {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
.text-box .box {
    width: 32%;
    line-height: 1.4;
}
@media (max-width:800px){
    .text-box .box {
        width: 100%;
        margin-bottom: 2%;
    }
}

document.querySelectorAll("#sample1 .sampleBtn a").forEach(btn => {
    btn.addEventListener("click", (e)=> {
        e.preventDefault();
        const text = btn.innerText;
        document.querySelector("#sample1 .text-box").setAttribute("style", text);
    })
});

예제4(Sample)

text-decoration-style을 설정한 예제입니다.

text-align 속성은 텍스트 정렬 방식을 설정합니다.
text-align-last 속성은 문단의 마지막 텍스트 정렬 방식을 설정합니다.
text-decoration 속성은 텍스트 라인 속성을 설정합니다.
text-indent 속성은 문단 들여쓰기 속성을 설정합니다.
text-justify 속성은 텍스트의 정렬 유형을 설정합니다.
text-overflow 속성은 텍스트 영역 속성을 설정합니다.

text-decoration-style: solid; text-decoration-style: double; text-decoration-style: dotted; text-decoration-style: dashed; text-decoration-style: wavy;

HTML

CSS

SCRIPT

<div class="text-box">
    <ul>
        <li><i>text-align</i> 속성은 텍스트 정렬 방식을 설정합니다.</li>
        <li><i>text-align-last</i> 속성은 문단의 마지막 텍스트 정렬 방식을 설정합니다.</li>
        <li><i>text-decoration</i> 속성은 텍스트 라인 속성을 설정합니다.</li>
        <li><i>text-indent</i> 속성은 문단 들여쓰기 속성을 설정합니다.</li>
        <li><i>text-justify</i> 속성은 텍스트의 정렬 유형을 설정합니다.</li>
        <li><i>text-overflow</i> 속성은 텍스트 영역 속성을 설정합니다.</li>
    </ul>
</div>

.text-box {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
.text-box .box {
    width: 32%;
    line-height: 1.4;
}
@media (max-width:800px){
    .text-box .box {
        width: 100%;
        margin-bottom: 2%;
    }
}

document.querySelectorAll("#sample1 .sampleBtn a").forEach(btn => {
    btn.addEventListener("click", (e)=> {
        e.preventDefault();
        const text = btn.innerText;
        document.querySelector("#sample1 .text-box").setAttribute("style", text);
    })
});

예제5(Sample)

text-decoration-thickness을 설정한 예제입니다.

text-align 속성은 텍스트 정렬 방식을 설정합니다.
text-align-last 속성은 문단의 마지막 텍스트 정렬 방식을 설정합니다.
text-decoration 속성은 텍스트 라인 속성을 설정합니다.
text-indent 속성은 문단 들여쓰기 속성을 설정합니다.
text-justify 속성은 텍스트의 정렬 유형을 설정합니다.
text-overflow 속성은 텍스트 영역 속성을 설정합니다.

solid double dotted dashed wavy

text-decoration-thickness: 1px; text-decoration-thickness: 2px; text-decoration-thickness: 3px; text-decoration-thickness: 4px; text-decoration-thickness: 5px;

HTML

CSS

SCRIPT

<div class="text-box">
    <ul>
        <li><i>text-align</i> 속성은 텍스트 정렬 방식을 설정합니다.</li>
        <li><i>text-align-last</i> 속성은 문단의 마지막 텍스트 정렬 방식을 설정합니다.</li>
        <li><i>text-decoration</i> 속성은 텍스트 라인 속성을 설정합니다.</li>
        <li><i>text-indent</i> 속성은 문단 들여쓰기 속성을 설정합니다.</li>
        <li><i>text-justify</i> 속성은 텍스트의 정렬 유형을 설정합니다.</li>
        <li><i>text-overflow</i> 속성은 텍스트 영역 속성을 설정합니다.</li>
    </ul>
</div>

.text-box {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
.text-box .box {
    width: 32%;
    line-height: 1.4;
}
@media (max-width:800px){
    .text-box .box {
        width: 100%;
        margin-bottom: 2%;
    }
}

document.querySelectorAll("#sample1 .sampleBtn a").forEach(btn => {
    btn.addEventListener("click", (e)=> {
        e.preventDefault();
        const text = btn.innerText;
        document.querySelector("#sample1 .text-box").setAttribute("style", text);
    })
});