Today

프로젝트

• 모바일 반응형 작업 중
  

---

Learn

반응형 웹페이지

• Tailwind CSS 프레임워크 사용
  sm (small): 작은 화면 (예: 모바일) - 일반적으로 640px 이하
  md (medium): 중간 화면 (예: 태블릿) - 일반적으로 768px 이하
  lg (large): 큰 화면 (예: 데스크탑) - 일반적으로 1024px 이하

세팅

// tailwind.config.ts
theme: {
  extend: {
    screens: {
      sm: { max: "640px" },
      md: { min: "641px", max: "1024px" },
      lg: { min: "1025px" },
    },
  },
},

사용법

// 하나의 태그
<div class="bg-blue-500 sm:bg-green-500 md:bg-yellow-500 lg:bg-red-500">
  박스 : 화면 크기에 따라 색상이 변함
</div>

// 화면 크기에 맞춰 유동적으로 조정
<div class="sm:block md:hidden lg:hidden">
  작은 화면에서는 보이고, 중간과 큰 화면에서는 숨김
</div>

<div class="sm:hidden md:block lg:block">
  작은 화면에서는 숨기고, 중간과 큰 화면에서는 보임
</div>

---

주절주절

기운이 없다.. 조금만 쉬었다 갈까