이 문서에서는 Tailwind에서 목록 블록의 목록 스타일 이미지를 설정하는 절차를 제공합니다.
Tailwind에서 목록 스타일 이미지 클래스를 설정하는 방법은 무엇입니까?
목록 스타일 이미지 클래스는 Tailwind에서 이미지를 목록 마커로 제공하는 데 사용됩니다. 기본적으로 Tailwind는 ' 목록-이미지-없음 ” 클래스는 목록에 대해 이전에 설정된 이미지 마커를 제거하는 데에만 사용할 수 있습니다.
통사론
Tailwind에서 목록 스타일 이미지 클래스를 사용하기 위한 구문은 다음과 같습니다.
< 울 수업 = '목록-이미지-[url({이미지 URL})]' > < / 울 >
이 구문은 지정된 이미지를 목록 요소의 마커로 제공합니다.
< 울 수업 = '목록-이미지-없음' > < / 울 >
이 구문은 이전에 목록 요소의 마커로 설정된 이미지를 제거합니다.
위에 정의된 구문을 사용하여 순서가 지정되지 않은 목록에서 이미지를 마커로 사용하겠습니다. 이 데모에서 사용자에게는 '라는 이름의 이미지가 있습니다. 손포인터.png ”는 동일한 Tailwind 프로젝트 폴더 안에 있습니다. 이미지가 다른 폴더에 있는 경우 사용자는 목록 스타일 이미지 클래스에 대한 전체 경로를 제공해야 합니다. 'list-image' 클래스를 사용하여 해당 이미지를 목록 마커로 사용하겠습니다.
< div 수업 = ' 플렉스 정렬 센터 ' >
< 울 수업 = ' 목록 내부 목록-이미지-[url(handpointer.png)] space-y-2 rounded-md bg-green-400 p-2' >
샘플 목록
< 저것 >첫 번째 항목입니다< / 저것 >
< 저것 >두 번째 항목입니다< / 저것 >
< 저것 >세 번째 항목입니다< / 저것 >
< / 울 >
< / div >
위 코드에 대한 설명은 다음과 같습니다.
- ㅏ ' ” 요소가 생성되고 “ 몸을 풀다 ” 컨테이너에서 항목을 가로로 정렬하는 클래스입니다.
- “ 정당화 센터 ” 클래스는 하위 항목을 컨테이너 중앙에 정렬합니다.
- 다음으로는 “
- “와 함께 제공됩니다. 목록 내부 ” 목록 블록 내부에 지정된 목록 항목 마커를 배치하는 클래스입니다.
- “ 목록-이미지-[url({이미지 URL})] ” 클래스는 요소에 목록 항목 마커로 이미지를 제공하는 데 사용됩니다.
- “ space-y-{숫자} ” 클래스는 목록 항목 사이에 수직 공간을 제공합니다.
- “ 반올림-MD ” 클래스는 목록 블록의 모서리를 둥글게 만듭니다.
- “ bg-{색상}-{번호} ” 클래스는 목록 블록에 배경색을 제공하는 데 사용됩니다.
- “ p-2 ” 클래스는 목록 요소에 테두리를 제공합니다.
- '를 사용하여 세 개의 목록 항목이 생성됩니다. <저것> ” 태그.
산출:
출력에서 손 포인터 이미지가 목록 항목의 마커로 설정되어 있음을 볼 수 있습니다.
Tailwind에서 목록 스타일 이미지 클래스와 함께 상태 변형 사용
Tailwind는 대화형 디자인을 만드는 데 도움이 되는 hover, focus, active와 같은 다양한 상태 변형을 제공합니다. 이러한 상태와 함께 목록 스타일 이미지 클래스를 사용하려면 다음 구문이 사용됩니다.
< 울 수업 = '{상태}:목록-이미지-{없음 또는 이미지 URL}' > < / 울 >위에서 정의한 구문을 사용하여 ' 호버링 '라고 Tailwind에 표시됩니다. 이 데모에서는 목록 표시로 이미지가 목록에 제공됩니다. 그러나 “ 호버링 ” 상태이면 이미지가 제거됩니다.
< div 수업 = ' 플렉스 정렬 센터 ' >
< 울 수업 = ' 목록 내부 목록 이미지-[url(handpointer.png)] hover:목록-이미지-없음 space-y-2 rounded-md bg-green-400 p-2' >
샘플 목록
< 저것 >첫 번째 항목입니다< / 저것 >
< 저것 >두 번째 항목입니다< / 저것 >
< 저것 >세 번째 항목입니다< / 저것 >
< / 울 >
< / div >위의 코드에서 “ hover:list-image-none ” 클래스는 이전에 목록 마커로 설정된 이미지를 제거합니다.
산출:
아래 출력에서 목록 스타일 이미지는 ' 없음 ” 사용자가 마우스 커서를 해당 항목 위로 가져가면 표시됩니다. 이로 인해 목록 표시로 사용되던 이미지가 제거되었습니다.
Tailwind에서 목록 스타일 이미지 클래스와 함께 중단점 사용
중단점은 Tailwind의 요소에 대해 사전 설정된 미디어 쿼리입니다. 다양한 화면 크기에 반응하는 디자인을 만드는 데 사용됩니다. 이러한 중단점에는 sm, md, lg, xl 및 2xl이 포함됩니다. 중단점과 함께 목록 스타일 이미지 클래스를 사용하려면 다음 구문을 사용합니다.
< 울 수업 = '{중단점}:목록-이미지-{없음 또는 이미지 URL}' > < / 울 >위에 정의된 구문을 사용하여 목록 마커를 '에서 변경해 보겠습니다. 영상 ' 에게 ' 없음 ” 중단점을 사용합니다. 이 예에서는 화면 크기가 '의 너비를 늘리면 이미지 마커가 제거됩니다. MD ” 중단점:
< div 수업 = ' 플렉스 정렬 센터 ' >
< 울 수업 = ' 목록 내부 목록 이미지-[url(handpointer.png)] md:list-image-none space-y-2 rounded-md bg-green-400 p-2' >
샘플 목록
< 저것 >첫 번째 항목입니다< / 저것 >
< 저것 >두 번째 항목입니다< / 저것 >
< 저것 >세 번째 항목입니다< / 저것 >
< / 울 >
< / div >위의 코드에서 “ md:목록-이미지-없음 ” 클래스는 화면 크기가 “ MD ” 중단점.
산출:
아래 출력에서는 화면 크기가 md 중단점에 도달하면 이미지 마커가 제거됩니다.
이것이 Tailwind에서 목록 스타일 이미지를 설정하는 것입니다.
결론
Tailwind에는 요소의 목록 마커를 이미지에 제거하거나 설정하기 위한 사전 정의된 목록 스타일 이미지 클래스 두 개가 있습니다. “ 목록-이미지-[url({이미지 URL})] ” 클래스는 지정된 이미지를 목록 마커로 제공합니다. “ 목록-이미지-없음 ” 클래스는 이전에 목록 마커로 제공된 이미지를 제거합니다. 이 도움말에서는 Tailwind에서 목록 스타일 유형을 설정하는 절차를 제공했습니다.