text-decoration-thickness

text-decoration-thickness

text-decoration-thickness 유틸리티는 텍스트 꾸밈선(밑줄 등)의 두께를 결정해 줘요.

출처: 문서

본문

클래스 스타일 (ClassStyles)

예시 (Examples)

기본 예시 (Basic example)

decoration-<number> 형태의 유틸리티(예: decoration-2, decoration-4)를 사용하면 요소의 텍스트 꾸밈선 두께를 바꿀 수 있어요:

<p class="underline decoration-1">The quick brown fox...</p>

<p class="underline decoration-2">The quick brown fox...</p>

<p class="underline decoration-4">The quick brown fox...</p>

커스텀 값 사용하기 (Using a custom value)

decoration-[<value>] 문법을 사용하면 완전히 커스텀한 값으로 텍스트 꾸밈선 두께를 설정할 수 있어요:

<p class="decoration-[0.25rem] ...">
  Lorem ipsum dolor sit amet...
</p>

CSS 변수의 경우 decoration-(length:<custom-property>) 문법을 사용할 수도 있어요:

<p class="decoration-(length:--my-decoration-thickness) ...">
  Lorem ipsum dolor sit amet...
</p>

이것은 decoration-[length:var(<custom-property>)]의 줄임말로, var() 함수를 자동으로 추가해 주는 문법이에요.

반응형 디자인 (Responsive design)

text-decoration-thickness 유틸리티에 md: 같은 브레이크포인트 변형을 붙이면 중간 크기(md) 화면 이상에서만 그 유틸리티가 적용돼요:

<p class="underline md:decoration-4 ...">
  Lorem ipsum dolor sit amet...
</p>

더 알아보기 (Learn more)

변형(variant) 사용법에 대해 더 알고 싶다면 variants 문서를 살펴보세요.