text-underline-position 속성 사용법
text-underline-position 속성은
text-decoration: underline;의 위치를 설정합니다.
형식 구문
형식 정의
| 초깃값 | auto |
|---|---|
| 적용 요소 | 모든 요소 |
| 상속 | 예 |
값
auto |
사용자 에이전트(브라우저를 말함)는 자체 알고리즘을 사용하여 알파벳 기준선(baseline) 또는 알파벳 기준선 아래에 줄을 배치합니다. |
|---|---|
from-font |
글꼴 파일에 선호 위치에 대한 정보가 포함되어 있으면 이 값을 사용합니다. 글꼴 파일에 이 정보가 포함되어 있지 않으면 브라우저가 적절한 위치를 선택한 상태에서 자동으로 설정된 것처럼 행동합니다. |
under |
요소의 텍스트 내용 아래에 위치합니다. 첨자를 많이 사용하는 화학 및 수학 공식의 가독성을 보장하는 데 유용합니다. |
left |
세로 쓰기 모드에서는 이 키워드를 사용하여 줄을 텍스트 왼쪽에 배치합니다. 가로 쓰기 모드에서는 under 값과 동일합니다. |
right |
세로 쓰기 모드에서는 이 키워드를 사용하여 줄을 텍스트 오른쪽에 배치합니다. 가로 쓰기 모드에서는 under 값과 동일합니다. |
text-underline-position 속성은 text-decoration 속성으로 재설정되지 않고 상속되기 때문에 글로벌 수준에서 값을 설정하는 것이 적절할 수 있습니다.
예제
다음의 예제는 많은 첨자를 사용하는 수학 또는 화학 텍스트에 유용하도록 text-underline-position 속성의 값을 under로 재설정한 것입니다.
브라우저 호환성
| 속성과 값 |
데스크탑 Chrome
|
데스크탑데스크탑 Edge
|
데스크탑 Firefox
|
Safari
|
|---|---|---|---|---|
text-underline-position
|
33 | 12 | 74 | 12.1 |
from-font
|
87 | 87 | 74 | 12.1 |
under
|
33 | 79 | 74 | 12.1 |
left, right |
71 | 79 | 74 | 18.2 |
명세서
| 명세서 사양 | |
|---|---|
text-underline-position
|
CSS Text Decoration Module Level 3 #text-underline-position-property |