그러나 이 기사에서는 비례 수치와 표 형식 수치라는 두 가지 특정 클래스에 대해 자세히 설명합니다. 이는 Tailwind에서 숫자 값의 스타일을 지정하고 문서 디자인에 어울리는 방식으로 숫자 데이터를 정렬 및 표현하는 데 사용됩니다.
이 문서에서는 다음 개요를 사용하여 Tailwind CSS의 비례 및 표 형식 수치에 대해 자세히 설명합니다.
Tailwind CSS에서 비례 수치를 사용하는 방법은 무엇입니까?
비례 수치 클래스는 모든 숫자의 너비가 동일하지 않은 규칙을 요소에 할당합니다.
통사론
Tailwind에서 비례 수치를 사용하는 구문은 다음과 같습니다.
< div 수업 = '비례 숫자' >
< div / >
위에 제공된 구문에서 ' 비례 숫자 비례 수치를 사용하려면 요소에 ” 클래스를 제공해야 합니다.
비례 수치의 실제 예를 살펴보겠습니다.
아래 제공된 코드에서는 두 개의 ' 피 ” 요소는 “ div 비례 수치 클래스를 사용하는 ” 요소:
< div 수업 = '비례-숫자 텍스트-중심 bg-slate-200 텍스트-xl' >< 피 > 121212 < / 피 >
< 피 > 838383 < / 피 >
< / div >
위에서 제공한 코드에 대한 설명은 다음과 같습니다.
- “ div ” 요소는 “ 비례 숫자 ” 숫자에 비례 도형 속성을 적용하는 클래스입니다.
- “ 텍스트 센터 ” 클래스는 요소의 중앙에 텍스트를 배치합니다.
- “ bg-{색상}-{번호} ” 클래스는 요소의 배경색을 담당합니다.
- “ 텍스트-xl ” 클래스는 텍스트에 매우 큰 글꼴 크기를 제공합니다.
- 다음으로 두 개의 ' 피 ” 요소는 다른 숫자를 포함하여 생성됩니다.
산출
출력에서 두 번째 ''에 숫자가 표시되는 것을 볼 수 있습니다. 피 ” 요소의 너비는 첫 번째 요소보다 약간 더 큽니다. 이는 비례 수치 클래스 때문입니다.
Tailwind CSS에서 표 형식 그림을 사용하는 방법은 무엇입니까?
Tailwind의 표 형식 그림은 모든 숫자의 너비 크기가 동일한 요소에 규칙을 할당합니다. 이렇게 하면 숫자가 대칭적인 표와 같은 표현으로 만들어집니다.
통사론
표 형식 그림을 사용하는 구문은 다음과 같습니다.
< div 수업 = '표 형식 숫자' >< div / >
위에 제공된 구문에서 ' 표 형식의 숫자 ” 클래스는 표 형식의 그림을 사용하기 위해 요소에 제공됩니다.
' 표 형식의 숫자 ”는 HTML 문서의 숫자 값에 영향을 미칩니다. 이 시연을 위해 두 개의 ' 피 ”는 숫자 값으로 생성되어 “ div 표 형식의 그림 클래스를 사용하는 ” 요소:
< div 수업 = ' 테이블 형식 숫자 텍스트 센터 bg-slate-200 텍스트-xl' >< 피 > 121212 < / 피 >
< 피 > 838383 < / 피 >
< / div >
위 코드에서 “ 표 형식의 숫자 ” 클래스는 “ div ' 표 형식의 그림 스타일을 자식에게 할당하는 요소 ' 피 ” 요소.
산출:
위 출력에서 두 요소의 숫자 값이 숫자의 너비 크기가 동일하기 때문에 완벽하게 정렬되어 있음을 볼 수 있습니다.
보너스 정보: Tailwind CSS의 비례 수치와 표 형식 수치의 차이점
숫자 값에 대한 표 형식 및 비례 수치 클래스의 효과를 차별화하는 데모를 살펴보겠습니다. 이 데모에서는 요소에 비례 수치 클래스가 기본값으로 할당됩니다. 다음으로, 마우스 오버 상태를 사용하여 요소에 테이블 형식 그림 클래스가 할당됩니다.
< div 수업 = ' 비례 숫자 텍스트 센터 bg-slate-200 텍스트-xl hover:tabular-nums' >< 피 > 121212 < / 피 >
< 피 > 838383 < / 피 >
< / div >
위의 코드에서 ' div ” 요소는 “ 비례 숫자 ”, 이는 숫자 값이 따르는 기본 규칙이 됩니다.
마찬가지로 “ 호버:표 형식 숫자 ” 클래스의 경우 사용자가 “div” 요소 위에 마우스 커서를 놓을 때마다 숫자 값은 표 형식의 그림 규칙을 따릅니다.
산출
주어진 출력에서 사용자가 요소 위에 마우스를 올리면 숫자 값의 너비가 변경됩니다. 이는 Tailwind의 비례 수치와 표 형식 수치 간의 시각적 차이를 제공합니다.
이는 Tailwind의 비례 및 표 형식 수치에 관한 것입니다.
결론
Tailwind에서 비례 수치를 사용하려면 ' 비례 숫자 ” 클래스가 사용됩니다. 비례 수치는 각 숫자 값의 너비 크기가 다른 규칙을 사용합니다. Tailwind에서 표 형식의 수치를 사용하려면 ' 표 형식의 숫자 ” 클래스가 사용됩니다. 표 형식의 그림은 모든 숫자 값의 너비 크기가 동일한 규칙을 사용합니다. 이 문서에서는 Tailwind에서 비례 및 표 형식 수치를 사용하는 절차를 제공했습니다.