[text] CSS - text-underline-offset 속성 - 텍스트와 밑줄라인과의 간격 지정 (= text-underline-offset속성 = 텍스트언더라인오프셋속성)

1. text-underline-offset 예제 - 텍스트와 밑줄라인과의 간격 지정
2. text-underline-offset 정의
3. text-underline-offset 구문
4. text-underline-offset 예제 - 음수값 경우
5. text-underline-offset 예제 - % 단위 경우

text-underline-offset 예제 - 텍스트와 밑줄라인과의 간격 지정

 

<style>

p {

    text-decoration-line: underline;

    text-underline-offset:20px;

}

</style>

 

<p>홈짱닷컴 Homzzang.com</p>

 

결과보기

text-underline-offset 정의

 

텍스트와 밑줄라인과의 간격 지정.

(= 텍스트 밑줄라인을 텍스트로부터 얼마 만큼 띄울지 지정.)

 

---

 

1. cf.

• text-decoration 속성 - 아래 3개 속성 일괄지정 가능한 단축속성
• text-decoration-line 속성 - 텍스트라인위치 종류
• text-decoration-style 속성 - 텍스트라인모양 종류
• text-decoration-color 속성 - 텍스트라인색상

 

2.

IE 제외한 주요 최신브라우저 모두 지원.

 

3. MDN text-underline-offset 예제보기

https://developer.mozilla.org/en-US/docs/Web/CSS/text-underline-offset

 

text-underline-offset 구문

 

selector {text-underline-offset: auto|length|%|initial|inherit;}

 

---

[속성값]

 

auto

브라우저가 자동 지정. (기본값)

 

length

px, em, rem, cm 등 길이단위. (음수값 가능)

 

%

텍스트 사이즈(=세로길이)의 일정비율 의미.

 

initial

이 속성의 기본값으로 지정.

 

inherit

부모요소의 속성값을 상속.

 

text-underline-offset 예제 - 음수값 경우

 

<style>

p {

    text-decoration-line: underline;

    text-underline-offset:-6px;

}

</style>

 

<p>홈짱닷컴 Homzzang.com</p>

 

결과보기

text-underline-offset 예제 - % 단위 경우

 

<style>

p {

    font-size:1em;

    text-decoration-line: underline;

    text-underline-offset:50%;

}

</style>

 

<p>홈짱닷컴 Homzzang.com</p>

 

결과보기