css 스타일 속성 text-underline-offset 알아보기

얼마 전 포스트에서 텍스트 스타일 속성인 text-decoration에 대하여 알아봤습니다. (링크. https://webisfree.com/2023-02-07/[css]-text-decoration-속성-알아보기) 이번에는 이와 관련된 속성인 text-underline-offset에 대하여 알아보겠습니다.

# text-underline-offset 알아보기

이 스타일 속성은 text-decoration과 함께 사용되는 속성으로 text-decoration에 값으로 underline을 사용한 경우 해당 라인의 위치를 조절하는데 사용할 수 있는 매우 유용한 속성입니다. 간단한 문법은 아래와 같습니다.

text-underline-offset: 2px;

그럼 실제 어떻게 사용하는지 예제를 보며 알아보겠습니다.

! text-underline-offset 예제보기

아래는 간략한 예제 코드를 몇 가지 만들어봅니다. 가장 먼저 text-underline-offset 속성을 사용하지 않은 경우의 underline 효과는 다음과 같이 코드를 작성하고 사용합니다.

위 코드를 실행하면 브라우저에 다음과 같이 나타나게 됩니다.

여기에 각각 다음과 같이 몇 가지 다른 값들의 text-underline-offset을 적용하면 어떻게 나타나게 될까요?

하나. text-underline-offset: 0px;
둘. text-underline-offset: 3px;
셋. text-underline-offset: 6px;

이를 적용하면 아래와 같이 html 코드를 작성할 수 있습니다.

이제 어떻게 나타나는지 실제로 실행해보겠습니다.


 보시는 것처럼 텍스트 언더라인(underline)의 위치가 아래로 점점 해당 픽셀의 크기 만큼 이동한 것을 볼 수 있습니다. 참고로 0의 값은 text-underline-offset을 설정하지 않은 것과 동일한 결과를 나타냅니다.

여기까지 css의 text-underline-offset 속성을 사용하여 원하는 만큼 underline의 위치를 이동시켜 보았습니다.

! 간단한 팁 및 정보

Q) text-decoration의 값으로 양의 값이 아닌 음의 값을 사용할 수 있을까?
예를들어 텍스트 언더라인을 아래가 아닌 위로 설정하기 위해서 음수(-)를 설정하면 어떻게 될까요? 아래 코드는 -3px을 설정한 경우입니다.

코드를 실행하면 아래와 같이 출력됩니다.

결과를 보니 원하는 음수 값(negative value)이 동작한 것을 알 수 있습니다. 하지만 text-decoration-thickness 속성을 함께 사용하는 경우 결과가 달라집니다. 즉 text-decoration-thickness를 같이 사용하면 음수값이 적용된 스타일은 보이지 않게 됩니다.


여기까지 text-underline-offset 속성을 알아보았습니다.