728x90
728x90
※ <head> 내에 viewport 메타 태그가 포함되어 있는지 확인
<meta name="viewport" content="width=device-width, initial-scale=1.0">
미디어 쿼리 적용하기
<!-- {중단점}:{대상클래스} -->
<img class="w-16 md:w-32 lg:w-48" src="...">
중단점 접두사 | 최소 너비 | CSS |
sm | 640px | @media (min-width: 640px) { ... } |
md | 768px | @media (min-width: 768px) { ... } |
lg | 1024px | @media (min-width: 1024px) { ... } |
xl | 1280px | @media (min-width: 1280px) { ... } |
2xl | 1536px | @media (min-width: 1536px) { ... } |
# 특정 범위를 설정해서 적용하기
<!-- md부터 xl까지의 너비일 때만 적용 -->
<div class="md:max-xl:flex">
...
</div>
Modifier | CSS |
max-sm | @media not all and (min-width: 640px) { ... } |
max-md | @media not all and (min-width: 768px) { ... } |
max-lg | @media not all and (min-width: 1024px) { ... } |
max-xl | @media not all and (min-width: 1280px) { ... } |
max-2xl | @media not all and (min-width: 1536px) { ... } |
# 중단점 정의하기
- 기존 중단점을 재정의하거나, 새로운 중단점을 생성해서 사용할 수 있음
- tailwind.config.js
module.exports = {
theme: {
screens: {
'tablet': '640px',
// => @media (min-width: 640px) { ... }
'laptop': '1024px',
// => @media (min-width: 1024px) { ... }
'desktop': '1280px',
// => @media (min-width: 1280px) { ... }
},
}
}
# 임의의 값으로 일회성 중단점 사용하기
<div class="min-[320px]:text-center max-[600px]:bg-sky-300">
...
</div>
320x100
반응형
'Tailwind CSS' 카테고리의 다른 글
[TailwindCSS] 자주 쓰이는 유틸리티 클래스 모음 (2) | 2024.11.04 |
---|---|
[TailwindCSS] 사용자 정의 스타일 (0) | 2024.11.02 |
[TailwindCSS] 가상 클래스와 가상 요소를 활용하여 스타일 적용하기 (9) | 2024.11.01 |