이 문서에서는 Tailwind CSS에서 중단점 및 미디어 쿼리와 함께 '브레이크 애프터'를 활용하는 방법을 보여줍니다.
Tailwind에서 중단점 및 미디어 쿼리와 함께 '브레이크 애프터'를 활용하는 방법은 무엇입니까?
중단점 및 미디어 쿼리와 함께 'Break-After'를 활용하려면 HTML 프로그램의 'Break-After' 유틸리티를 사용하여 다양한 화면 크기에 대해 서로 다른 값과 스타일을 정의하십시오. 그런 다음 HTML 웹 페이지를 보고 출력을 확인합니다.
실제 구현을 살펴보겠습니다.
1단계: 'break-after' 유틸리티로 중단점 및 미디어 쿼리 사용
HTML 프로그램을 생성하고 'break-after' 유틸리티를 사용하여 다양한 화면 크기에 대해 다양한 값과 스타일을 지정합니다. 예를 들어 ' 메릴랜드 ” 중단점을 ' 열 후 휴식 ' 유틸리티 및 ' 엘지 ” 중단점을 ' 휴식 후 회피 ' 공익사업:
< 몸 >
< 사업부 수업 = '열-2 bg-teal-400' >
< 피 수업 = 'md:열 후 중단 lg:회피 후 중단' > 안녕하세요... < / 피 >
< 피 > 잘 왔어... < / 피 >
< 피 > Tailwind CSS에 대해 알아보기... < / 피 >
< 피 > CSS 프레임워크입니다... < / 피 >
< 피 > 안녕... < / 피 >
< / 사업부 >
< / 몸 >
여기:
- “ md:열 뒤 나누기 ” 클래스는 '에서 이 특정
요소 다음에 열 나누기가 발생해야 함을 나타냅니다 메릴랜드 ” 중단점(중간 화면 크기).
- “ lg: 중단 후 회피 ' 클래스는 요소가 ' 엘지 ” 중단점(대형 화면 크기).
2단계: 출력 확인
HTML 웹 페이지를 보고 중단점 및 미디어 쿼리가 적용되었는지 확인합니다.
위의 웹 페이지에서는 중간 화면에서 지정된 요소에 열 나누기가 발생했으며 큰 화면에서는 break-after를 피했습니다.
결론
Tailwind에서 중단점 및 미디어 쿼리와 함께 'Break-After'를 활용하려면 먼저 HTML 파일을 만듭니다. 그런 다음 다른 화면 크기에 대해 다른 값과 스타일을 지정하여 'break-after' 유틸리티와 함께 중단점 및 미디어 쿼리를 사용합니다. 확인을 위해 HTML 프로그램을 실행하고 웹 페이지를 봅니다. 이 문서에서는 Tailwind CSS에서 중단점 및 미디어 쿼리와 함께 '중단 후'를 활용하는 방법을 설명했습니다.