Tailwind에서 배경 클립과 함께 중단점 및 미디어 쿼리를 사용하는 방법

Tailwindeseo Baegyeong Keullibgwa Hamkke Jungdanjeom Mich Midieo Kwolileul Sayonghaneun Bangbeob



웹 페이지에서 다양한 섹션을 생성하는 동안 프로그래머가 콘텐츠를 축적하기 위해 배경을 자르거나 수정해야 하는 시나리오가 있을 수 있습니다. 이 방법은 추가된 콘텐츠를 효과적으로 관리하고 다양한 페이지 섹션의 스타일을 지정하는 데 도움이 됩니다.

이 블로그에서는 다음과 같은 핵심 개념을 자세히 설명합니다.

Tailwind에서 배경 클립과 함께 중단점 및 미디어 쿼리를 사용/활용하는 방법은 무엇입니까?

“ bg-clip-{키워드} ” 유틸리티는 요소 배경의 경계 상자를 설정하는 데 사용됩니다. 이 유틸리티는 다음과 같은 여러 속성과 함께 사용할 수 있습니다. 패딩박스 ', ' 테두리 상자 ', ' 콘텐츠 상자 ', 그리고 ' 텍스트 상자 '.





예 1: Tailwind에서 배경 클립으로 중단점 적용

이 예에서는 적용된 '를 통해 배경 클립에 중단점을 적용합니다. bg-clip-{키워드} ” 유틸리티 “ MD ” 즉, 중간 크기의 화면과 “ LG ” 즉, 대형 화면 클래스:




< HTML >
< 머리 >
< 메타 문자셋 = 'utf-8' >
< 메타 이름 = '뷰포트' 콘텐츠 = '너비=장치 너비, 초기 크기=1' >
< 스크립트 소스 = 'https://cdn.tailwindcss.com' >< / 스크립트 >
< / 머리 >
< 몸 >
< 텍스트 영역 수업 = 'bg-클립-테두리 p-6 bg-노란색-500 테두리-4 테두리-빨간색-500 테두리-점선 md:bg-clip-text lg:bg-clip-padding' > 테일윈드 CSS 입니다 < / 텍스트 영역 >
< / 몸 >
< / HTML >

다음 코드 줄에 따르면:



  • 먼저 Tailwind 기능을 활용하려면 CDN 경로를 지정하세요.
  • 그런 다음 '로 구성된 '