CSS text-underline-position 속성 – underline의 기준이 되는 위치 지정

정의 및 사용 방법

text-underline-position 속성은
text-decoration으로 설정된 밑줄(underline)의 기준 위치를 지정합니다

밑줄이 텍스트의 어느 부분을 기준으로 그려질지를 명시적으로 설정할 수 있어, 가독성을 높이는 데 유용합니다.

기본 예제

형식 구문

값

text-underline-position 속성 값
`auto`	브라우저는 자체 알고리즘을 사용하여 알파벳 기준선(baseline) 또는 알파벳 기준선 아래에 줄을 배치합니다.
`from-font`	글꼴 파일에 선호 위치에 대한 정보가 포함되어 있으면 이 값을 사용합니다. 글꼴 파일에 이 정보가 포함되어 있지 않으면 브라우저가 적절한 위치를 선택한 상태에서 자동으로 설정된 것처럼 행동합니다.
`under`	요소의 텍스트 내용 아래 가장자리(예를 들어, 밑줄이 알파벳의 `g`, `j`, `p`, `q`, `j`처럼 글자의 baseline 아래로 내려가는 문자의 아래 가장자리)에 위치합니다.
`left`	세로 쓰기 모드에서는 밑줄의 기준 위치는 `under`와 동일하지만 텍스트 왼쪽에 배치합니다. 가로 쓰기 모드에서는 `auto` 값과 동일합니다.
`right`	세로 쓰기 모드에서는 밑줄의 기준 위치는 `under`와 동일하지만 텍스트 오른쪽에 배치합니다. 가로 쓰기 모드에서는 `auto` 값과 동일합니다.

알아두세요!
text-underline-position 속성으로 설정된 밑줄의 원래 위치에서 간격을 늘리거나 줄일 수 있습니다.
밑줄의 원래 위치에서 간격을 조정하려면 text-underline-offset 속성을 사용하세요.

구문

CSS

/* 단일 키워드 값 */
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;

형식 정의

text-underline-position 속성의 형식 정의
초깃값	`auto`
적용 요소	모든 요소
상속	예
애니메이션	아니오

활용 예제

아래는 text-underline-position 속성을 텍스트에 적용하는 실용적인 사용법에 대한 예제들입니다. 이 예제들은 단일 키워드 값과 두 개 키워드 값 사용법 모두를 다룹니다.

단일 키워드 값 사용하기

under 값은 요소의 텍스트 내용 아래에 위치합니다. 첨자를 많이 사용하는 화학 및 수학 공식의 가독성을 보장하는 데 유용합니다. 아래는 기본으로 설정되는 auto 값과 under 값의 차이점을 잘 보여줍니다.

HTML

<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>

CSS

.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;
}

두 개 키워드 값 사용하기

text-underline-position 속성은 두 개의 키워드 값을 사용할 수 있습니다. 이 두 개의 키워드 값을 사용할 때에는 주의할 점이 있습니다. 아래의 형식 구문을 다시 살펴보겠습니다.

두 개의 키워드 값을 사용할 때에는 아래와 같은 규칙이 적용됩니다.

두 개의 키워드 값에는 auto 값이 포함될 수 없습니다.
두 개 중에서 하나의 키워드 값은 반드시 from-font 또는 under 값이 있어야 합니다.
나머지 하나의 키워드 값은 left 또는 right 값이어야 합니다.
띄어쓰기로 구분하여 두 개의 키워드 값을 사용할 수 있으며, 키워드의 순서는 상관이 없습니다.

이 두 개의 키워드 값이 적용되는 규칙은 다음과 같습니다.

from-font와 under: 가로 쓰기와 세로 쓰기 모드에 모두 적용됩니다.
left와 right : 세로 쓰기 모드에만 적용됩니다.

다음의 예제로 살펴보세요.

HTML

<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>

CSS

.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;
}