[text] CSS - text-underline-position 속성 - 텍스트 언더라인 위치 지정 (= text-underline-position속성 = 텍스트언더라인포지션속성) ※ 밑줄 위치 지정.

1. text-underline-position 예제 - 텍스트 언더라인 위치 지정
2. text-underline-position 정의
3. text-underline-position 구문

text-underline-position 예제 - 텍스트 언더라인 위치 지정

 

<style>

div {text-decoration: underline;}

.a {text-underline-position: auto;}

.b {text-underline-position: under;}

</style>

<div class="a">H₂O</div>

<div class="b">H₂O</div>

결과보기

text-underline-position 정의

 

텍스트 언더라인(=밑줄) 위치 지정.

 

---

 

1. cf.

• text-decoration 속성 ★ - 텍스트라인 (종류/모양/색깔) 일괄 지정
• text-decoration-line 속성 - 텍스트라인 종류 지정
• text-decoration-style 속성 - 텍스트라인 모양 지정
• text-decoration-color 속성 - 텍스트라인 색깔 지정
• text-decoration-thickness 속성 - 텍스트라인 두께 지정
• text-underline-offset 속성 - 텍스트와 언더라인과의 간격 지정.

2.

• 기본값: auto
• 상속여부: O
• 애니가능: X
• CSS버전: CSS3
• JS구문: object.style.textUnderlinePosition="under";

 

3.

주요 브라우저 모두 지원.

 

4. MDN text-underline-position 예제보기

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

 

text-underline-position 구문

 

selector {text-underline-position: auto|under|from-font|left|right|initial|inherit;}

 

---

[속성값]

 

auto

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

 

under

알파벳 기준선 아래에 밑줄을 설정. (아래첨자보다 밑에 배치됨.)

 

from-font

글꼴 파일에 언더라인 위치 정보 포함 O 경우 해당값 사용. (포함 X 경우엔 auto 사용.)

 

left

세로쓰기 모드 시 텍스트 왼쪽에 언더라인 배치. (가로쓰기 모드 경우, auto 사용.)

 

right

세로쓰기 모드 시 텍스트 오른쪽에 언더라인 배치. (가로쓰기 모드 경우, auto 사용.)

 

initial

이 속성의 기본값 사용.

 

inherit

부모요소의 속성값 상속.