CSS로 밑줄의 위치 간격 설정하기

text-decoration 속성으로 설정된 밑줄(underline)의 위치와 간격을 설정하는 방법에 대해 알아봅니다.

웹 스타일에서 텍스트에 밑줄을 긋는 건 아주 흔한 일입니다.
간단히 text-decoration: underline만으로도 밑줄을 그릴 수 있지만 훨씬 정교한 밑줄의 위치와 간격을 조정할 수 있습니다.

CSS에서는 밑줄의 위치와 간격을 조정할 수 있는 두 가지 속성을 제공하고 있습니다.

이 두 속성은 각각 밑줄의 위치와 간격을 담당하며, 함께 사용하면 훨씬 세련되고 가독성 높은 밑줄 스타일을 만들 수 있습니다.
그럼 이 두 속성의 정의와 사용 방법에 대해 알아보겠습니다.

text-underline-position - 밑줄이 그려질 정교한 위치 지정하기

CSS로 밑줄이 그려지는 위치, 즉 텍스트를 기준으로 어디를 기준으로 그려지는지를 설정할 수 있습니다. 단순히 텍스트 밑에 그려진다고만 생각할 수도 있지만 좀 더 정교하게 설정할 수 있습니다.

바로 text-underline-position 속성으로 지정할 수 있습니다.
다음의 라이브 데모 예제를 통해서 확인해 보겠습니다.

CSS 라이브 데모: text-underline-position 데모 버튼을 클릭해 보세요!

우리가 일반적으로 흔히 보는 밑줄의 위치는 특별한 설정이 없다면 아마도 text-underline-position로 설정된 밑줄의 위치일 것입니다.

하지만 text-underline-position 속성이 지원하는 값을 통해서 원하는 위치를 설정할 수 있습니다.

지원하는 값과 그 효과

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

기본 예시

CSS 
.underline-under {
    text-decoration: underline;
    text-underline-position: under;
}

더 자세한 내용과 예제는 CSS text-underline-position 속성 – underline의 기준이 되는 위치 지정을 참조하세요.

text-underline-offset - 밑줄의 위치 기준에서 간격을 조정

text-underline-offset 속성은 text-underline-position을 설정한 기준 위치를 기준으로 간격을 지정합니다.

이 속성을 사용하면 밑줄의 기준이 되는 원래 위치에서 간격을 늘리거나 줄일 수 있습니다.
다음의 라이브 데모 예제를 통해서 확인해 보겠습니다.

CSS 라이브 데모: text-underline-offset 데모 버튼을 클릭해 보세요!

값이 양수일 경우 밑줄은 원래 위치 기준에서 텍스트의 바깥쪽에 맞춰 간격이 조정되며, 음수일 경우에는 안쪽에 맞춰 간격이 조정됩니다.

기본 예시

CSS 
.underline-offset {
    text-decoration: underline;
    text-underline-offset: 5px;
}

더 자세한 내용과 예제는 CSS text-underline-offset 속성 – underline의 원래 위치에서 간격 조정을 참조하세요.

함께 사용하기: 더욱 정교한 제어

text-underline-position과 text-underline-offset 속성은 독립적으로도 사용할 수 있지만, 함께 사용할 때 훨씬 더 정교한 밑줄 스타일을 구현할 수 있습니다.

예를 들어, 밑줄이 알파벳의 g, j, p, q, j처럼 글자의 기준선(baseline)을 침범하지 않도록 설정(text-underline-position: under)한 뒤, 원하는 만큼 미세하게 간격을 조절(text-underline-offset: 2px)하여 최적의 가독성과 시각적 균형을 찾을 수 있습니다.

예제를 통해 확인해 보겠습니다.

HTML 
<h4>일반적인 밑줄</h4>
<p>ABC ghij 가나다 1234</p>

<h4>정교한 위치와 간격을 가진 밑줄</h4>
<p class="custom-underline">ABC ghij 가나다 1234</p>
CSS 
p {
    text-decoration: underline;
}
.custom-underline{
    text-underline-position: under;
    text-underline-offset: 2px;
}
실제 적용된 모습

이 두 속성을 이해하고 활용하면 웹 페이지의 텍스트에 더욱 세련되고 기능적인 밑줄을 적용할 수 있습니다.

브라우저 호환성

text-underline-position과 text-underline-offset 속성의 브라우저 호환성
속성
데스크탑 Chrome
Chrome
데스크탑데스크탑 Edge
Edge
데스크탑 Firefox
Firefox
Safari
Safari
text-underline-position 33 12 74 12.1
text-underline-offset 87 87 70 12.1

참고 문헌

같이 보기