반응형 웹사이트를 디자인하면서 Tailwind “ 중단점 ' 그리고 ' 미디어 쿼리 ”은 다양한 화면 크기에 편리하게 적용할 수 있는 다양한 기능을 적용하는 데 핵심적인 역할을 합니다. 이러한 기능은 다양한 클래스를 통해 지정됩니다. md(중형 화면)”, “lg(대형 화면)” 또는 “@media를 통해 ” 지정된 조건에 따라 기능을 추가하는 규칙입니다.
이 문서에서는 다음 내용을 다룹니다.
- Tailwind 중단점 및 미디어 쿼리를 사용하여 텍스트 장식 두께를 적용하는 방법은 무엇입니까?
- Tailwind 중단점을 사용하여 텍스트 장식 두께 적용
- Tailwind 미디어 쿼리를 사용하여 텍스트 장식 두께 적용.
Tailwind 중단점 및 미디어 쿼리를 사용하여 텍스트 장식 두께를 적용하는 방법은 무엇입니까?
“ 텍스트 장식 두께 '는 '의 도움을 받아 적용할 수 있습니다. 텍스트 장식 두께 ” 속성 뒤에 목표 두께 값(픽셀)이 옵니다. 이 픽셀은 “ 1px', '2px', '4px' 또는 '8px '. “ 중단점 '를 이용하여 사용자의 화면 크기에 맞춰 다양한 응용 기능을 적용할 수 있습니다. md(중형화면)”, “lg(대형화면)” ” 수업 등 “ 미디어 쿼리 '를 통해 브라우저 및 OS 매개변수 집합을 기반으로 조건부 구현 스타일을 활성화합니다. 미디어 ' 규칙.
예 1: Tailwind 중단점을 사용하여 텍스트 장식 두께 적용
이 예에서는 화면 크기에 따라 다양한 스타일을 적용하기 위해 다양한 지점의 텍스트 장식 두께를 설정합니다.
< HTML >
< 머리 >
< 메타 문자셋 = 'utf-8' >
< 메타 이름 = '뷰포트' 콘텐츠 = '너비=장치 너비, 초기 크기=1' >
< 제목 >< / 제목 >
< 스크립트 소스 = 'https://cdn.tailwindcss.com' >< / 스크립트 >
< / 머리 >
< 몸 >
< 텍스트 영역 수업 = '밑줄 md:장식-8 lg:상자-장식-슬라이스 텍스트-검정색 텍스트-2xl' ID = '온도' > 리눅스힌트 입니다 < / 텍스트 영역 >
< / 몸 >
< / HTML >
이 코드 조각에 따라 아래 단계를 적용하세요.
- 먼저 Tailwind 기능을 적용할 CDN 경로를 포함합니다.
- 그런 다음 “< 텍스트 영역 >” 요소를 사용하고 “를 통해 기본 및 중간 화면에 명시된 텍스트 장식 두께 수준을 통합합니다. MD ” 수업을 각각 듣습니다.
- “ 텍스트-검정색 ' 그리고 ' 텍스트-2xl ” 클래스는 텍스트에 색상(검은색)과 글꼴 크기(예: 2xl)를 각각 할당합니다.
산출
이 결과로부터 텍스트 장식 두께가 다양한 화면 크기에 적절하게 적용되었음을 암시할 수 있습니다.
예 2: Tailwind 미디어 쿼리를 사용하여 텍스트 장식 두께 적용
“@ 미디어 ” 규칙은 미디어 쿼리에서 다양한 미디어 유형/장치에 대한 다양한 스타일을 구현하는 데 활용됩니다. 이 특정 데모에서는 다음 미디어 쿼리를 사용하여 지정된 매개변수/조건에 따라 텍스트 두께를 장식합니다.
< HTML >
< 머리 >
< 메타 문자셋 = 'utf-8' >
< 메타 이름 = '뷰포트' 콘텐츠 = '너비=장치 너비, 초기 크기=1' >
< 제목 >< / 제목 >
< 스크립트 소스 = 'https://cdn.tailwindcss.com' >< / 스크립트 >
< / 머리 >
< 몸 >
< h1 ID = '온도' >리눅스힌트입니다< / h1 >
< / 몸 >
< / HTML >
< 스타일 유형 = '텍스트/CSS' >
#온도 {
텍스트 장식: 밑줄;
텍스트- 맞추다 : 중앙;
}
@ 미디어 ( 최대 너비 :550px ) {
#온도 {
텍스트 장식 두께: 4px;
} }
< / 스타일 >
이 코드 블록에서는 아래에 제공된 방법론을 고려하세요.
- 마찬가지로 CDN 경로를 포함합니다.
- 그런 다음 “< h1 >” 요소에는 “id”가 명시되어 있습니다.
- 코드의 CSS 부분에서 “< 스타일 >” 태그를 사용하면 포함된 제목의 스타일을 지정할 수 있습니다.
- 또한 “@ 미디어 ” 화면 너비가 “ 550px ”, 텍스트 장식 두께는 “ 4 ” 픽셀.
- 화면 너비가 이 제한을 초과하면 텍스트에 밑줄이 그어지게 됩니다.
산출
이는 화면 너비에 맞춰 “@media” 규칙, 즉 미디어 쿼리가 적용되었음을 의미합니다.
결론
Breakpoints와 Media Queries를 텍스트 장식 두께로 적용하여 '등의 다양한 클래스를 이용하여 사용자의 화면 크기에 맞춰 적용된 기능을 표시할 수 있습니다. MD', 'LG ” 또는 “@ 미디어 ” 규칙을 따릅니다. 후자의 접근 방식은 “ CSS ” 대상 요소를 호출하고 설정된 매개변수/조건에 따라 장식하는 코드입니다. 이 가이드에서는 Tailwind Breakpoint 및 미디어 쿼리를 사용하여 텍스트 장식 두께를 적용하는 방법을 자세히 설명했습니다.