Tailwind CSS에서 대각선 분수를 사용하는 방법

이 도움말에서는 Tailwind에서 대각선 분수를 사용하는 방법을 설명합니다.

Tailwind CSS에서 대각선 분수를 사용하는 방법은 무엇입니까?

Tailwind의 대각선 분수 클래스는 분자와 분모를 더 작게 만들고 슬래시로 구분하는 사전 정의된 숫자 글꼴 변형입니다. 이렇게 하면 분수 번호가 텍스트의 나머지 부분과 구별되는 것처럼 보입니다.

통사론

“를 사용하는 구문 대각선 분수 ” 클래스는 다음과 같습니다.

위 구문에서 볼 수 있듯이 개발자는 ' 대각선 분수 '에서' 수업 ” 요소의 속성입니다.

실용적인 예로 '대각선 분수' 클래스를 사용해 보겠습니다. 아래 데모에서 사용자는 일반 분수와 대각선 분수의 차이를 볼 수 있습니다.

위 코드에 대한 설명은 다음과 같습니다.

• “ div ” 요소가 생성되어 “를 사용하여 배경색으로 제공됩니다. bg-{색상}-{번호} ' 수업.
• 그런 다음 텍스트에 큰 글꼴 크기가 제공되고 '를 사용하여 요소의 중앙에 정렬됩니다. 텍스트-lg ' 그리고 ' 텍스트 센터 ” 수업을 각각 진행합니다.
• 다음으로 두 개의 '

  ' 요소가 생성되고 두 번째 요소에는 ' 대각선 분수 ' 수업.

산출:

대각선 분수와 정규 분수의 차이는 위 출력에서 ​​명확하게 볼 수 있습니다.

중단점과 함께 대각선 분수 클래스 사용

중단점은 Tailwind에서 미디어 쿼리로 사용됩니다. 최소 너비가 지정된 5개의 기본 중단점이 있습니다. 이러한 중단점은 Tailwind의 모든 클래스와 함께 사용되어 반응성이 뛰어나고 동적인 디자인 레이아웃을 만들 수 있습니다.

“를 사용하려면 대각선 분수 Tailwind에서 중단점이 있는 ” 클래스의 경우 다음 구문이 사용됩니다.

아래 표는 Tailwind의 다양한 중단점에 대한 최소 너비를 제공합니다.

' 대각선 분수 ” 수업을 통해 실제로 사용법을 이해하세요.

위에 제공된 코드에서 div 요소는 ' md:대각선 분수 '일 때 숫자 분수의 글꼴을 변경하는 클래스입니다. MD ” 중단점에 도달했습니다.

산출

출력에서 볼 수 있듯이 분수는 ' MD ” 중단점에 도달했습니다:

순풍 상태와 함께 대각선 분수 클래스 사용

Tailwind는 기본적으로 “ 주 ” 특정 상태가 트리거될 때 요소에 디자인 속성을 제공하기 위해. 이는 디자인 레이아웃을 더욱 매력적이고 역동적으로 만듭니다. Tailwind의 상태와 함께 '대각선 분수' 클래스를 사용하려면 다음 구문이 사용됩니다.

Tailwind에서 제공하는 기본 상태는 다음과 같습니다.

• 호버: 사용자가 요소 위로 커서를 가져갈 때.
• 집중하다: 사용자가 요소를 탐색하여 해당 요소에 집중하는 경우입니다.
• 활동적인: 사용자가 요소를 클릭하여 활성화하는 경우.
• 장애를 입히다: 사용자가 요소를 활성화하는 것이 허용되지 않는 경우.

아래 데모에서는 ' 대각선 분수 ” 클래스는 “ 호버링 ” Tailwind의 상태:

“ div 위 코드의 ” 요소는 “ 호버:대각선 분수 ” 분수의 일반 글꼴을 대각선 분수 글꼴로 변경하는 클래스입니다.

산출

출력에서 볼 수 있듯이 사용자가 분수 위에 마우스 커서를 올리면 분수 숫자의 숫자 글꼴이 변경됩니다.

Tailwind CSS에서 대각선 분수 클래스를 사용하는 것이 전부입니다.

결론

Tailwind CSS에서 대각선 분수를 사용하려면 ' 대각선 분수 ' 수업. 이 클래스는 분자와 분모를 슬래시로 구분하여 작게 만듭니다. 사용자는 Tailwind의 기본 중단점 및 상태와 함께 '대각선 분수' 클래스를 사용하여 디자인을 더욱 동적으로 만들 수도 있습니다. 이 문서에서는 Tailwind에서 대각선 분수를 사용하는 절차를 제공했습니다.