정의 및 사용 방법
text-underline-offset
속성은
text-decoration
으로 설정된 밑줄(underline)의 원래 위치에서 간격을 지정합니다.
이 속성을 사용하면 밑줄의 기준이 되는 원래 위치에서 간격을 늘리거나 줄일 수 있습니다.
기본 예제
Alphabet 한글 123
형식 구문
selector {
text-underline-offset: auto | <length-percentage>
}
값
auto |
브라우저가 밑줄의 원래 위치 기준에서 적절한 간격 띄우기를 선택합니다. |
---|---|
length |
밑줄의 원래 위치 기준에서 길이 값으로 간격을 지정합니다. |
<percentage> |
밑줄의 원래 위치기준에서 요소의 글자 크기인 1em 의 백분율로 간격을 지정합니다. |
length
값과 <percentage>
값이 양수일 경우 밑줄은 원래 위치 기준에서 텍스트의 바깥쪽에 맞춰 간격이 조정되며, 음수일 경우에는 안쪽에 맞춰 간격이 조정됩니다.
밑줄의 원래 위치 기준
text-underline-offset
속성은
text-decoration
으로 설정된 밑줄(underline)의 원래 위치를 기준에서 간격을 지정합니다.
여기에서 말하는 밑줄의 원래 위치 기준은 text-underline-position
속성으로 지정된 밑줄의 기준 위치입니다.
text-underline-offset
속성의 0
값은 이 밑줄의 원래 위치 기준을 의미합니다.
다음의 표는 text-underline-position
속성으로 지정할 수 있는 밑줄의 원래 위치 기준 값입니다.
auto |
브라우저는 자체 알고리즘을 사용하여 알파벳 기준선(baseline) 또는 알파벳 기준선 아래에 줄을 배치합니다. |
---|---|
from-font |
글꼴 파일에 선호 위치에 대한 정보가 포함되어 있으면 이 값을 사용합니다. 글꼴 파일에 이 정보가 포함되어 있지 않으면 브라우저가 적절한 위치를 선택한 상태에서 자동으로 설정된 것처럼 행동합니다. |
under |
요소의 텍스트 내용 아래 가장자리(예를 들어, 밑줄이 알파벳의 g, j, p, q, j처럼 글자의 baseline 아래로 내려가는 문자의 아래 가장자리)에 위치합니다. |
left |
세로 쓰기 모드에서는 밑줄의 기준 위치는 under 와 동일하지만 텍스트 왼쪽에 배치합니다.
가로 쓰기 모드에서는 auto 값과 동일합니다. |
right |
세로 쓰기 모드에서는 밑줄의 기준 위치는 under 와 동일하지만 텍스트 오른쪽에 배치합니다.
가로 쓰기 모드에서는 auto 값과 동일합니다. |
구문
/* 단일 키워드 값 */
text-underline-offset: auto;
/* 길이 값 */
text-underline-offset: 0.1em;
text-underline-offset: -3px;
/* 백분율 값 */
text-underline-offset: 20%;
/* 글로벌 값 */
text-underline-offset: inherit;
text-underline-offset: initial;
text-underline-offset: revert;
text-underline-offset: revert-layer;
text-underline-offset: unset;
형식 정의
초깃값 | auto |
---|---|
적용 요소 | 모든 요소 |
상속 | 예 |
애니메이션 | 계산된 값 |
활용 예제
p {
font-size: 1.3em;
text-decoration: underline;
text-underline-position: under;
text-underline-offset: 0;
}
<p>ABCDEF ghijklm 가나다라 12345</p>
ABCDEF ghijklm 가나다라 12345
브라우저 호환성
속성과 값 |
데스크탑 Chrome
|
데스크탑데스크탑 Edge
|
데스크탑 Firefox
|
Safari
|
---|---|---|---|---|
text-underline-offset
|
87 | 87 | 70 | 12.1 |
백분율(%) 단위 값
|
87 | 87 | 74 | 18.2 |
명세서
명세서 사양 | |
---|---|
text-underline-offset
|
CSS Text Decoration Module Level 4 #underline-offset |