정의 및 사용 방법
text-underline-position
속성은
text-decoration
으로 설정된 밑줄(underline)의 기준 위치를 지정합니다
밑줄이 텍스트의 어느 부분을 기준으로 그려질지를 명시적으로 설정할 수 있어, 가독성을 높이는 데 유용합니다.
기본 예제
Alphabet 한글 123
형식 구문
selector {
text-underline-position: auto | [ from-font | under ] || [ left | right ]
}
값
auto |
브라우저는 자체 알고리즘을 사용하여 알파벳 기준선(baseline) 또는 알파벳 기준선 아래에 줄을 배치합니다. |
---|---|
from-font |
글꼴 파일에 선호 위치에 대한 정보가 포함되어 있으면 이 값을 사용합니다. 글꼴 파일에 이 정보가 포함되어 있지 않으면 브라우저가 적절한 위치를 선택한 상태에서 자동으로 설정된 것처럼 행동합니다. |
under |
요소의 텍스트 내용 아래 가장자리(예를 들어, 밑줄이 알파벳의 g, j, p, q, j처럼 글자의 baseline 아래로 내려가는 문자의 아래 가장자리)에 위치합니다. |
left |
세로 쓰기 모드에서는 밑줄의 기준 위치는 under 와 동일하지만 텍스트 왼쪽에 배치합니다.
가로 쓰기 모드에서는 auto 값과 동일합니다. |
right |
세로 쓰기 모드에서는 밑줄의 기준 위치는 under 와 동일하지만 텍스트 오른쪽에 배치합니다.
가로 쓰기 모드에서는 auto 값과 동일합니다. |
알아두세요!
text-underline-position
속성으로 설정된 밑줄의 원래 위치에서 간격을 늘리거나 줄일 수 있습니다.
밑줄의 원래 위치에서 간격을 조정하려면 text-underline-offset
속성을 사용하세요.
구문
/* 단일 키워드 값 */
text-underline-position: auto;
text-underline-position: from-font;
text-underline-position: under;
text-underline-position: left;
text-underline-position: right;
/* 두 개 키워드 값 */
text-underline-position: from-font left;
text-underline-position: under left;
text-underline-position: right under;
/* 전역 값 */
text-underline-position: inherit;
text-underline-position: initial;
text-underline-position: revert;
text-underline-position: revert-layer;
text-underline-position: unset;
형식 정의
초깃값 | auto |
---|---|
적용 요소 | 모든 요소 |
상속 | 예 |
애니메이션 | 아니오 |
활용 예제
아래는 text-underline-position
속성을 텍스트에 적용하는 실용적인 사용법에 대한 예제들입니다. 이 예제들은 단일 키워드 값과 두 개 키워드 값 사용법 모두를 다룹니다.
단일 키워드 값 사용하기
under
값은 요소의 텍스트 내용 아래에 위치합니다. 첨자를 많이 사용하는 화학 및 수학 공식의 가독성을 보장하는 데 유용합니다. 아래는 기본으로 설정되는 auto
값과 under
값의 차이점을 잘 보여줍니다.
<div class="example-box">
<div class="label">text-underline-position: auto;</div>
<p class="auto-underline">
Velocity: v<sub>avg</sub> = d / t
</p>
</div>
<div class="example-box">
<div class="label">text-underline-position: under;</div>
<p class="under-underline">
Velocity: v<sub>avg</sub> = d / t
</p>
</div>
.example-box {
font-size: 28px;
border: 1px solid;
padding: 1em 1em 0;
}
.example-box + .example-box {
margin-top: 0.5em;
}
.auto-underline {
text-decoration: underline;
text-underline-position: auto;
}
.under-underline {
text-decoration: underline;
text-underline-position: under;
}
.label {
font-size: 16px;
color: #555;
margin-bottom: 4px;
}
Velocity: vavg = d / t
Velocity: vavg = d / t
두 개 키워드 값 사용하기
text-underline-position
속성은 두 개의 키워드 값을 사용할 수 있습니다. 이 두 개의 키워드 값을 사용할 때에는 주의할 점이 있습니다. 아래의 형식 구문을 다시 살펴보겠습니다.
selector {
text-underline-position: auto | [ from-font | under ] || [ left | right ]
}
두 개의 키워드 값을 사용할 때에는 아래와 같은 규칙이 적용됩니다.
- 두 개의 키워드 값에는
auto
값이 포함될 수 없습니다. - 두 개 중에서 하나의 키워드 값은 반드시
from-font
또는under
값이 있어야 합니다. - 나머지 하나의 키워드 값은
left
또는right
값이어야 합니다. - 띄어쓰기로 구분하여 두 개의 키워드 값을 사용할 수 있으며, 키워드의 순서는 상관이 없습니다.
이 두 개의 키워드 값이 적용되는 규칙은 다음과 같습니다.
from-font
와under
: 가로 쓰기와 세로 쓰기 모드에 모두 적용됩니다.left
와right
: 세로 쓰기 모드에만 적용됩니다.
다음의 예제로 살펴보세요.
<div class="container left">
<p class="horizontal">
text-underline-position: under left
</p>
<p class="vertical">
text-underline-position: under left;
</p>
</div>
<div class="container right">
<p class="horizontal">
text-underline-position: under right;
</p>
<p class="vertical">
text-underline-position: under right;
</p>
</div>
.container {
border: 1px solid;
padding: 0 1em 1em;
}
.container + .container {
margin-top: 0.5em;
}
.left {
text-decoration: underline;
text-underline-position: under left;
}
.right {
text-decoration: underline;
text-underline-position: under right;
}
.vertical {
writing-mode: vertical-rl;
}
text-underline-position: under left;
text-underline-position: under left;
text-underline-position: under right;
text-underline-position: under right;
브라우저 호환성
속성과 값 |
데스크탑 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 4 #text-underline-position-property |