사용자가 자신의 웹페이지에 대한 항목 목록을 생성해야 한다고 가정해 보겠습니다. 디자인 프로세스를 더 쉽게 만들기 위해 Tailwind는 목록 요소의 유형, 위치 및 정렬을 변경하는 데 사용할 수 있는 다양한 목록 스타일 클래스를 제공합니다.
이 도움말에서는 Tailwind에서 목록 스타일 유형을 설정하는 절차를 제공합니다.
Tailwind에서 목록 스타일 유형을 설정하는 방법은 무엇입니까?
Tailwind는 세 가지 기본 목록 스타일 유형을 제공합니다. 이는 다음을 제공하는 데 사용됩니다. 채점자 ” 목록 항목 스타일. 세 가지 기본 목록 스타일 유형 클래스는 다음과 같습니다.
- 목록 디스크: 이 클래스는 둥근 글머리 기호를 목록 마커로 제공합니다.
- 목록-십진수: 이 클래스는 목록 표시로 십진수를 제공합니다.
- 목록 없음: 이 클래스는 항목에서 모든 목록 마커를 제거합니다.
목록 스타일 유형을 사용하는 구문은 다음과 같습니다.
< 울 수업 = '목록-{스타일}' > < / 울 >
더 나은 이해를 위해 아래 제공된 데모에서는 위에 정의된 구문을 사용하여 목록 항목에 다양한 마커 스타일을 제공합니다. 이 예에서는 Tailwind의 기본 목록 스타일 클래스를 사용하여 세 가지 목록 요소가 생성되고 다양한 마커 스타일이 제공됩니다.
< 피 수업 = '텍스트-가운데 텍스트-xl 글꼴-굵게' >기본 다른 목록 스타일 Tailwind의 유형< / 피 >
< br >
< div 수업 = 'flex justify-center space-x-20 bg-slate-100 rounded-lg mx-4 p-2' >
< 울 수업 = '목록 디스크' >
목록 # 1
< 저것 >첫 번째 항목입니다< / 저것 >
< 저것 >두 번째 항목입니다< / 저것 >
< 저것 >세 번째 항목입니다< / 저것 >
< / 울 >
< 울 수업 = '목록 소수' >
목록 # 2
< 저것 >첫 번째 항목입니다< / 저것 >
< 저것 >두 번째 항목입니다< / 저것 >
< 저것 >세 번째 항목입니다< / 저것 >
< / 울 >
< 울 수업 = '목록 없음' >
목록 # 삼
< 저것 >첫 번째 항목입니다< / 저것 >
< 저것 >두 번째 항목입니다< / 저것 >
< 저것 >세 번째 항목입니다< / 저것 >
< / 울 >
< / div >
위 코드에 대한 설명은 다음과 같습니다.
- ㅏ ' ” 요소는 “를 사용하여 생성됩니다. 특대 ” 글꼴 크기 및 “ 용감한 ” 글꼴 두께. 요소의 텍스트 내용은 '를 사용하여 중앙에 배치됩니다. 텍스트 센터 ' 수업.
- 줄 바꿈 후에 ' ” 요소가 생성되고 “ 몸을 풀다 ' 수업. 그러면 하위 항목을 가로로 정렬하는 컨테이너가 생성됩니다.
- “ 정당화 센터 ” 클래스에서는 항목을 컨테이너 중앙에 배치합니다.
- “ 공간-x-{크기} ” 클래스는 항목 사이에 수평 공간을 제공합니다.
- “ bg-{색상}-{번호} ” 클래스는 컨테이너의 배경을 지정된 색상으로 설정합니다.
- “ 반올림-lg ” 클래스는 컨테이너의 모서리를 둥글게 만듭니다.
- “ mx-4 ” 클래스는 Flex 컨테이너에 수평 여백을 제공합니다.
- “ p-2 ” 클래스는 Flex 컨테이너에 패딩을 제공합니다.
- 다음으로, 세 개의 목록 요소가 생성되고 '를 사용하여 다양한 목록 스타일 유형이 제공됩니다. 목록-{유형} ' 수업.
산출:
아래 출력에서 첫 번째 목록은 글머리 기호 포인트를 사용하고, 두 번째 목록은 십진수를 사용하고, 세 번째 목록은 항목 표시를 사용하지 않는 것을 볼 수 있습니다.
Tailwind에서 상태 변형과 함께 목록 스타일 클래스 사용
목록 스타일 클래스를 Tailwind의 기본 상태 변형과 함께 사용하여 디자인을 더욱 동적으로 만들 수 있습니다. 호버, 포커스 및 활성 상태 변형을 사용하면 사용자는 지정된 상태가 트리거될 때마다 목록 항목의 마커 스타일을 변경할 수 있습니다. 상태 변형과 함께 목록 스타일 클래스를 사용하기 위한 구문은 다음과 같습니다.
< 울 수업 = '{상태}:목록-{스타일}...' > < / 울 >다음은 사용자가 목록 블록 위에 마우스를 올려 마커 스타일을 변경할 수 있는 '호버' 상태로 목록 스타일 유형을 사용하는 예입니다.
< 피 수업 = '텍스트-가운데 텍스트-xl 글꼴-굵게' >마커 스타일을 변경하려면 목록 블록 위에 커서를 올리세요< / 피 >
< br >
< div 수업 = 'flex justify-center space-x-20 bg-slate-100 rounded-lg mx-4 p-2' >
< 울 수업 = '목록-디스크 가리키기:목록-십진수' >
목록 # 1
< 저것 >첫 번째 항목입니다< / 저것 >
< 저것 >두 번째 항목입니다< / 저것 >
< 저것 >세 번째 항목입니다< / 저것 >
< / 울 >
< / div >위 코드에서 목록은 “ 목록 디스크 ” 클래스를 기본 목록 스타일 유형으로 사용합니다. 그러나 “ hover:list-decimal ” 클래스에서는 사용자가 목록 블록 위에 마우스 커서를 올리면 목록 스타일 유형이 변경됩니다.
산출:
아래 출력은 커서가 목록 블록 위에 있을 때 목록 유형 스타일이 글머리 기호 목록에서 번호 매기기 목록으로 변경되는 것을 보여줍니다.
Tailwind에서 중단점과 함께 목록 스타일 클래스 사용
중단점은 다양한 화면 크기에 대한 반응형 레이아웃 디자인에 사용됩니다. Tailwind에서 제공하는 5개의 기본 중단점은 sm, md, lg, xl 및 2xl입니다. 목록 유형 스타일 클래스에 중단점을 제공하는 데 다음 구문이 사용됩니다.
< 울 수업 = '{중단점}:목록-{스타일}...' > < / 울 >다음은 ''와 함께 목록 스타일 유형을 사용하는 예입니다. MD ” 중단점. 화면 크기가 “md” 중단점에 도달하면 마커 스타일이 변경됩니다.
< 피 수업 = '텍스트-가운데 텍스트-xl 글꼴-굵게' > 화면 증가 크기 마커 스타일을 변경하려면< / 피 >
< br >
< div 수업 = 'flex justify-center space-x-20 bg-slate-100 rounded-lg mx-4 p-2' >
< 울 수업 = '목록-디스크 md:목록-십진수' >
목록 # 1
< 저것 >첫 번째 항목입니다< / 저것 >
< 저것 >두 번째 항목입니다< / 저것 >
< 저것 >세 번째 항목입니다< / 저것 >
< / 울 >
< / div >위 코드에서 목록은 “ 목록 디스크 ” 클래스를 기본 스타일로 사용합니다. 그러나 “ md:목록-십진수 ” 클래스의 목록 스타일 유형은 “md” 화면 크기에 따라 변경됩니다.
산출:
아래 출력에서 볼 수 있듯이 화면 크기가 ' MD ” 중단점.
이것이 Tailwind에서 목록 스타일 유형을 설정하는 것입니다.
결론
Tailwind는 요소의 목록 스타일을 변경하기 위해 사전 정의된 세 가지 목록 스타일 유형 클래스를 제공합니다. “ 목록 디스크 ” 클래스는 항목을 나열하기 위한 주요 항목을 제공합니다. “ 목록 소수 ” 클래스는 항목을 나열하기 위한 번호를 제공합니다. “ 목록 없음 ” 클래스는 항목 표시자를 사용하지 않는 목록을 생성합니다. 이 도움말에서는 Tailwind에서 목록 스타일 유형을 설정하는 절차를 제공했습니다.