이 기사에서는 Tailwind CSS의 그리드 자동 흐름 유틸리티에 호버 효과를 적용하는 방법을 예시합니다.
Tailwind에서 그리드 자동 흐름에 호버를 적용하는 방법은 무엇입니까?
Tailwind의 그리드 자동 흐름에 호버 효과를 적용하려면 HTML 파일을 만들고 ' 호버링 ' 클래스 ' 그리드 흐름-<키워드> ” HTML 프로그램의 유틸리티. 마우스를 그리드 항목 위로 가져가면 그리드 항목의 위치가 변경됩니다. 마지막으로 웹 HTML 페이지를 보고 그리드 항목에 마우스를 올려 변경 사항을 확인합니다.
실제 구현을 위해 제공된 단계를 살펴보십시오.
1단계: HTML 프로그램에서 행 그리드와 함께 Hover 속성 사용
HTML 프로그램을 만들고 ' 호버링 ” 속성이 원하는 “ 그리드 흐름-<키워드> ' 공익사업. 예를 들어 ' 호버:격자 흐름 행 ” 클래스를 사용하여 호버에서 그리드 항목의 배치를 열에서 행으로 변경합니다.
< 몸 >
< 사업부 수업 = 'grid grid-flow-col hover:grid-flow-row gap-3 m-3 text-center' >
< 사업부 수업 = 'bg-teal-500 p-5' > 1 < / 사업부 >
< 사업부 수업 = 'bg-teal-500 p-5' > 2 < / 사업부 >
< 사업부 수업 = 'bg-teal-500 p-5' > 삼 < / 사업부 >
< 사업부 수업 = 'bg-teal-500 p-5' > 4 < / 사업부 >
< 사업부 수업 = 'bg-teal-500 p-5' > 5 < / 사업부 >
< 사업부 수업 = 'bg-teal-500 p-5' > 6 < / 사업부 >
< / 사업부 >
< / 몸 >
여기:
- “ 그리드 ” 클래스는 요소를 그리드 컨테이너로 설정합니다.
- “ 그리드 흐름 열 ” 열에서 그리드 항목의 흐름을 정의합니다.
- “ 호버:격자 흐름 행 ” 클래스는 마우스가 컨테이너 위에 있을 때 그리드 항목의 흐름을 행으로 변경합니다.
- “ 갭-3 ”는 그리드 항목 사이에 3단위의 간격을 추가합니다.
- “ m-3 ”는 그리드 컨테이너 주변에 3단위의 여백을 추가합니다.
- “ 텍스트 센터 ”는 그리드 항목 내부의 텍스트 콘텐츠를 중앙에 정렬합니다.
2단계: 출력 확인
호버 효과가 그리드 자동 흐름에 적용되었는지 확인하려면 웹 페이지를 보고 그리드 항목 위로 마우스를 이동합니다.
처음에는 그리드 항목의 흐름이 열에 있고 마우스를 마우스로 가져가면 흐름이 행으로 변경되는 것을 볼 수 있습니다. 그리드 자동 흐름에 호버 효과가 성공적으로 적용되었음을 나타냅니다.
결론
Tailwind의 그리드 자동 흐름에 호버 효과를 적용하려면 ' 호버링 ” 클래스를 원하는 “ 그리드 흐름-<키워드> ” HTML 프로그램의 유틸리티. 마우스를 그리드 항목 위로 가져가면 그리드 항목의 위치가 변경됩니다. 변경 사항을 확인하려면 웹 HTML 페이지를 보고 그리드 항목을 마우스로 가리킵니다. 이 기사에서는 Tailwind CSS의 그리드 자동 흐름 유틸리티에 호버 효과를 적용하는 방법을 예시했습니다.