text-decoration: underline; 위치 간격 설정 속성들

  • text-underline-position: underline의 위치를 설정
  • text-underline-offset: underline의 간격 띄우기(오프셋, offset)를 설정

이 두 속성의 사용법에 대해 알아보겠습니다.

text-underline-position 속성

text-underline-position 속성은
underline의 위치를 설정합니다.

CSS text-underline-position 속성
CSS 데모: text-underline-position (underline의 위치 설정) 데모 버튼을 클릭해 보세요!
CSS 
selector {
    text-decoration: underline;
    text-underline-position: /* value */;
}

text-underline-offset 속성

text-underline-offset 속성은
underline의 간격 띄우기(오프셋, offset)를 설정합니다.

CSS text-underline-offset 속성
CSS 데모: text-underline-offset (underline의 간격 띄우기를 설정) 데모 버튼을 클릭해 보세요!
CSS 
selector {
    text-decoration: underline;
    text-underline-offset: /* value */;
}

text-underline-position과 text-underline-offset 속성 비교

이 두 속성은 모두 텍스트의 underline의 위치 간격를 설정하는 데 사용한다는 공통점이 있습니다.

두 속성의 차이점은 다음과 같습니다.

text-underline-position과 text-underline-offset 속성의 차이점
text-underline-position underline 위치를 선택 또는 폰트에서 정의된 위치 사용할 수 있어서 편리합니다.
text-underline-offset 길이 단위로 정밀하게 underline의 간격을 조정할 수 있습니다.

text-underline-position과 text-underline-offset 둘 다 사용할 경우

text-underline-position 속성 값을 기준으로 text-underline-offset 간격 기준(영점 위치)이 달라집니다.

text-underline-offset 간격 기준 살펴보기

브라우저 호환성

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

참고 문헌

같이 보기