이 문서에서는 Tailwind의 위치 속성과 함께 중단점 및 미디어 쿼리를 사용하는 방법을 설명합니다.
위치 속성으로 중단점 및 미디어 쿼리를 활용하는 방법은 무엇입니까?
중단점은 최고의 반응형 디자인을 만들기 위한 핵심 블록입니다. 레이아웃을 다양한 화면 크기에 맞게 조정하는 데 사용됩니다. 미디어 쿼리는 화면 해상도에 따라 요소에 지정된 스타일을 적용하는 데 사용됩니다. 위치 속성을 이와 함께 적용하여 출력을 더욱 최적화할 수 있습니다.
1단계: 중단점 및 미디어 쿼리를 사용하여 위치 속성 적용
이 단계에서는 선택한 '에 대한 중단점 또는 미디어 쿼리를 따라 위치 속성을 적용하는 프로그램이 삽입됩니다. 피 ' 요소:
< 몸 수업 = 'bg-slate-500' >
< div 수업 = '텍스트-노란색-300 p-4 lg:p-8' >
< 피 수업 = '상대 md:절대 md:text-lg md:translate-x-4 md:translate-y-4 lg:text-xl lg:static lg:translate-x-4 lg:translate-y-4 ' > 이 텍스트는 화면 크기에 따라 글꼴 크기가 다릅니다. 작은 화면에서는 더 작고, 중간 화면에서는 중간 크기, 큰 화면에서는 더 커집니다. < / 피 >
< / div >
< / 몸 >
이 코드에서는:
- “ bg-slate-500 ” 배경색을 회색으로 설정합니다.
- “ 텍스트-노란색-300 ” 텍스트 색상을 노란색으로 변경합니다.
- “ p-4 ” 4px의 패딩을 추가합니다.
- “ LG: p-8' 대형 화면에서는 8px의 패딩을 추가합니다.
- 초기 위치는 '를 사용하여 상위 페이지를 기준으로 설정됩니다. 상대적인 ' 수업.
- “ md:텍스트-lg ”는 중간 크기 화면에서 텍스트를 크게 만듭니다.
- 'md:절대' 중간 크기 화면에서 텍스트 위치를 상대 위치에서 절대 위치로 수정합니다.
- “ md:translate-x-4” 그리고 'md:translate-y-4' 중간 화면 크기에서 텍스트를 4px 아래 오른쪽으로 이동합니다.
- “ lg:텍스트-xl ”는 큰 화면에서 텍스트 크기를 특대형으로 변경합니다.
- “ LG:정적 '는 대형 화면에서 상위 페이지에 대한 텍스트 위치를 절대 위치에서 정적으로 변경합니다.
- “ LG:번역-x-4 ' 그리고 ' LG:번역-y-4 ” 큰 화면 크기에서 텍스트를 4px 아래 오른쪽으로 이동합니다.
2단계: 출력 확인
위 코드로 생성된 웹페이지를 미리 보고 화면 크기를 조정하여 다음과 같이 변경 사항을 확인하세요.
중형 및 대형 화면 크기에서 텍스트가 반응하는 동작을 보이는 것을 볼 수 있습니다.
결론
Tailwind에서 중단점과 미디어 쿼리를 사용하려면 중단점을 적용하고 각 중단점에 미디어 쿼리를 설정하고 화면의 다양한 중단점에서 위치 속성도 변경하세요. 기본 분류는 “ sm ', ' MD ', ' LG ', 그리고 ' 특대 '. 이 블로그에서는 Tailwind의 위치 속성과 함께 중단점 및 미디어 쿼리를 사용하는 방법을 보여주었습니다.