Tailwind CSS에서 ' 상자 장식 휴식 ” 속성은 요소가 여러 줄이나 열에 걸쳐 있을 때 요소의 배경, 테두리 및 안쪽 여백의 렌더링을 결정합니다. 두 개의 클래스가 있습니다. 일부분 ' 그리고 ' 클론 '. 사용자는 중단점 및 미디어 쿼리와 함께 'box-decoration-break' 속성을 사용하여 장치의 너비에 따라 요소의 레이아웃 및 모양이 어떻게 변경되는지 결정하고 중단점을 기반으로 다른 스타일을 적용할 수 있습니다.
이 기사에서는 중단점 및 미디어 쿼리와 함께 상자 데코레이션 중단을 사용하는 방법을 보여줍니다.
Tailwind에서 중단점 및 미디어 쿼리와 함께 Box Decoration Break를 사용하는 방법은 무엇입니까?
중단점 및 미디어 쿼리와 함께 상자 데코레이션 중단을 사용하려면 HTML 프로그램에서 다양한 화면 크기에 대해 다양한 값과 스타일을 정의해야 합니다. 그런 다음 확인을 위해 HTML 프로그램을 실행하여 웹 페이지를 봅니다.
더 나은 이해를 위해 아래 언급된 단계를 확인하십시오.
1단계: 상자 장식 나누기와 함께 중단점 및 미디어 쿼리 사용
HTML 프로그램을 생성하고 다양한 화면 크기에 대해 다양한 값과 스타일을 지정합니다. 예를 들어 ' 메릴랜드 ' 그리고 ' 엘지 ” 스타일이 있는 중단점:
< 몸 >< 기간 수업 = 'bg-teal-600 box-decoration-clone md:bg-yellow-500 lg:box-decoration-slice text-white text-3xl px-2' >
안녕하세요 < br />
리눅스 < br />
힌트
기간 >
몸 >
여기:
- “ bg-청록-600 ”는 청록색을 배경으로 설정합니다.
- “ 상자 장식 클론 ”는 복제 상자 장식에 사용되는 사용자 지정 클래스입니다.
- “ md:bg-노란색-500 ”는 요소에 노란색 배경색을 적용합니다. 메릴랜드 ” 중단점(중형 화면).
- “ lg:박스 장식 슬라이스 '는 '의 상자 장식에 슬라이싱 효과를 설정합니다. 엘지 ” 중단점(대형 화면).
- “ 텍스트 흰색 ”는 텍스트에 흰색을 설정합니다.
- “ 텍스트-3xl ”는 글꼴 크기를 3xl로 설정합니다.
- “ px-2 ”는 요소에 2픽셀의 가로 패딩을 추가합니다.
2단계: 출력 확인
중단점과 미디어 쿼리가 성공적으로 적용되었는지 확인하려면 HTML 프로그램을 실행하고 웹 페이지를 봅니다.
어떤 중단점과 미디어 쿼리가 정의되었는지에 따라 웹 페이지가 변화하고 있음을 알 수 있습니다.
결론
Tailwind에서 중단점 및 미디어 쿼리와 함께 상자 데코레이션 중단을 사용하려면 먼저 HTML 파일을 만듭니다. 그런 다음 다양한 화면 크기에 대해 다양한 값과 스타일을 지정하여 HTML 프로그램에서 중단점과 미디어 쿼리를 사용합니다. 확인을 위해 HTML 프로그램을 실행하고 웹 페이지를 봅니다. 이 기사에서는 중단점 및 미디어 쿼리와 함께 상자 데코레이션 중단을 사용하는 방법을 설명했습니다.