이 기사에서는 Tailwind의 '지우기' 유틸리티에 중단점 및 미디어 쿼리를 적용하는 방법을 예시합니다.
Tailwind에서 'clear'에 대한 중단점 및 미디어 쿼리를 활용하는 방법은 무엇입니까?
Tailwind의 '지우기' 유틸리티에 특정 중단점 및 미디어 쿼리를 적용하려면 HTML 구조를 만듭니다. 그런 다음 원하는 값을 ' 지우기-<값> '를 사용하여 다양한 화면 크기에 대한 유틸리티 메릴랜드 ' 또는 ' 엘지 ” 중단점. 마지막으로 확인을 위해 웹 페이지의 화면 크기를 변경합니다.
예
이 예에서는 ' 메릴랜드 ” 중단점을 ' 둘 다 지우기 ” 유틸리티 및 “ 엘지 ” 중단점을 ' 명확한 없음 ”의 유틸리티 ” 요소는 중형 및 대형 화면 크기에서 위치를 변경합니다.
< 몸 >
< 사업부 수업 = 'h-96 mx-10 p-8 bg-sky-500' >
< 이미지 소스 = 'tailwindcss_img.png' 수업 = '플로트 왼쪽 p-3 w-28 h-24' 모든 것 = '영상' / >
< 이미지 소스 = 'tailwindcss_img.png' 수업 = '플로트 오른쪽 p-3' 모든 것 = '영상' / >
< 피 수업 = 'text-justify clear-left md:clear-both lg:clear-none' > Tailwind CSS는 요소 주위의 콘텐츠 래핑을 제어하는 '부동' 유틸리티를 제공합니다.
이 예는 Tailwind에서 'clear' 유틸리티로 중단점 및 미디어 쿼리를 사용하는 방법을 보여줍니다. < / 피 >
< / 사업부 >
< / 몸 >
여기:
- '왼쪽으로 뜨다' 클래스는 컨테이너의 왼쪽에 요소를 띄웁니다.
- '플로트 오른쪽' 클래스는 컨테이너의 오른쪽에 요소를 띄웁니다.
- '깨끗한 왼쪽' 클래스는
요소를 컨테이너의 왼쪽 부동 요소 아래로 이동합니다.
- 'md:모두 지우기' 클래스는 중간 화면 크기에서 왼쪽 및 오른쪽 플로트를 모두 지우고 그 아래에
요소를 배치합니다.
- 'lg:클리어-없음' 클래스는
요소에 적용된 모든 지우기를 비활성화하고 요소가 큰 화면 크기에서 컨테이너의 양쪽에 떠 있도록 합니다.
산출
위 출력에 따르면 지정된 중단점과 미디어 쿼리가 'clear' 유틸리티에 성공적으로 적용되었습니다.
결론
Tailwind의 'clear' 유틸리티에 중단점 및 미디어 쿼리를 적용하려면 원하는 값을 ' 지우기-<값> '를 활용하여 다양한 화면 크기에 대한 유틸리티 메릴랜드 ' 또는 ' 엘지 ” 중단점. 확인을 위해 웹 페이지의 화면 크기를 변경하고 변경 사항을 확인합니다. 이 문서에서는 Tailwind의 '지우기' 유틸리티에 특정 중단점 및 미디어 쿼리를 적용하는 예를 보여 주었습니다.