본문 바로가기
Reference/CSS

text-underline-offset 속성은 언더 라인의 오프셋 값을 설정합니다.

by @webstoryboy 2022. 11. 15.

text-underline-offset 속성은 언더 라인의 오프셋 값을 설정합니다.

Reference/CSS

text-underline-offset 속성은 언더 라인의 오프셋 값을 설정합니다.

by @webs 2022. 11. 9.

text-underline-offset

text-underline-offset 속성은 언더 라인의 오프셋 값을 설정합니다. 텍스트에 underline 속성이 설정된 경우와 텍스트 언더라인 스타일이 solid, double, dotted, dashed, wavy인 경우에 설정 가능합니다.


특징 설명
기본값 text-underline-offset : auto
적용 text
버전 CSS3
사용성 ★★☆☆☆

정의(Definition)

  • text-underline-offset 속성은 언더 라인의 오프셋 값을 설정합니다.

텍스트 라인과 관련된 속성

  • 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-underline-offset : auto | length | percentage

/* 기본 속성 */
text-underline-offset : auto;
text-underline-offset : 1px;
text-underline-offset : 1%;

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

속성(Property)

속성값 값(예) 설명
auto text-underline-offset : auto; 라인의 간격을 자동(기본)값으로 설정합니다.
length text-underline-offset : 1px; 라인의 간격을 CSS 단위로 설정합니다.
percentage text-underline-offset : 1%; 라인의 간격을 퍼센트로 설정합니다.

예제1(Sample)

text-underline-offset을 설정한 예제입니다.

  • text-align 속성은 텍스트 정렬 방식을 설정합니다.
  • text-align-last 속성은 문단의 마지막 텍스트 정렬 방식을 설정합니다.
  • text-decoration 속성은 텍스트 라인 속성을 설정합니다.
  • text-indent 속성은 문단 들여쓰기 속성을 설정합니다.
  • text-justify 속성은 텍스트의 정렬 유형을 설정합니다.
  • text-overflow 속성은 텍스트 영역 속성을 설정합니다.
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;
}
.text-box li i {
    font-style: normal;
    text-decoration: underline;
}
@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 i").forEach(li => {
            li.setAttribute("style", text);
        })
    })
});

예제2(Sample)

text-underline-offset을 설정한 예제입니다.

  • text-align 속성은 텍스트 정렬 방식을 설정합니다.(underline)
  • text-indent 속성은 문단 들여쓰기 속성을 설정합니다.(double)
  • text-justify 속성은 텍스트의 정렬 유형을 설정합니다.(dotted)
  • text-overflow 속성은 텍스트 영역 속성을 설정합니다.(dashed)
  • text-shadow 속성은 텍스트 그림자를 설정합니다.(wavy)
  • text-underline-offset 속성은 언더라인의 오프셋 값을 설정합니다.(line-through underline, wavy)
HTML
CSS
SCRIPT
<div class="text-box">
    <ul>
        <li><i>text-align</i> 속성은 텍스트 정렬 방식을 설정합니다.(underline)</li>
        <li><i>text-align-last</i> 속성은 문단의 마지막 텍스트 정렬 방식을 설정합니다.(overline)</li>
        <li><i>text-decoration</i> 속성은 텍스트 라인 속성을 설정합니다.(line-through)</li>
        <li><i>text-indent</i> 속성은 문단 들여쓰기 속성을 설정합니다.(double)</li>
        <li><i>text-justify</i> 속성은 텍스트의 정렬 유형을 설정합니다.(dotted)</li>
        <li><i>text-overflow</i> 속성은 텍스트 영역 속성을 설정합니다.(dashed)</li>
        <li><i>text-shadow</i> 속성은 텍스트 그림자를 설정합니다.(wavy)</li>
        <li><i>text-transform</i> 속성은 텍스트 대/소문자를 설정합니다.(line-through, wavy)</li>
        <li><i>text-emphasis</i> 속성은 텍스트에 강조 표시를 설정합니다.(dotted, line-through)</li>
        <li><i>text-underline-offset</i> 속성은 언더라인의 오프셋 값을 설정합니다.(line-through underline, wavy)</li>
    </ul>
</div>
#sample2 .text-box li:nth-child(1){
    text-decoration-line: underline;
}
#sample2 .text-box li:nth-child(2){
    text-decoration-line: overline;
}
#sample2 .text-box li:nth-child(3){
    text-decoration-line: line-through;
}
#sample2 .text-box li:nth-child(4){
    text-decoration-style: double;
}
#sample2 .text-box li:nth-child(5){
    text-decoration-style: dotted;
}
#sample2 .text-box li:nth-child(6){
    text-decoration-style: dashed;
}
#sample2 .text-box li:nth-child(7){
    text-decoration-style: wavy;
}
#sample2 .text-box li:nth-child(8){
    text-decoration-line: line-through;
    text-decoration-style: wavy;
}
#sample2 .text-box li:nth-child(9){
    text-decoration-style: dotted;
    text-decoration-line: line-through;
}
#sample2 .text-box li:nth-child(10){
    text-decoration-style: wavy;
    text-decoration-line: line-through underline;
}
document.querySelectorAll("#sample2 .sampleBtn a").forEach(btn => {
    btn.addEventListener("click", (e)=> {
        e.preventDefault();
        const text = btn.innerText;

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

호환성(Compatibility)

크롬 아이콘 파이어폭스 아이콘 사파리 아이콘 오페라 아이콘 네이버 웨일 익스플로러6 아이콘6 익스플로러7 아이콘7 익스플로러8 아이콘8 익스플로러9 아이콘9 익스플로러10 아이콘10 익스플로러11 아이콘11 엣지 아이콘 안드로이드 아이콘 ios 아이콘
text-underline-offset

참고(Reference)


댓글