모바일 우선 반응형 디자인

반응형 디자인 혁명, 미디어 쿼리가 사라지다

화면 크기마다 CSS 파일을 새로 작성하던 고단한 시대는 끝났습니다. Tailwind CSS는 모바일 우선(Mobile-First) 아키텍처를 채택하여, 기본적으로 정의된 클래스는 모바일에 적용되고, sm:, md:, lg: 등의 접두사 단어로 스마트폰, 태블릿, PC 해상도를 한 줄에 통제합니다.

⚠️ 주의: Mobile-First 아키텍처 작성 방향

처음부터 lg:w-1/2만 단독으로 쓰지 마세요. Tailwind는 모바일 우선이므로 기본 너비를 지정하지 않으면 100%가 되며, md:w-1/2, lg:w-1/3 형태로 화면이 점진적으로 커지는 순서로 조립해야 디자이너의 레이아웃이 깨지지 않습니다.

중단점 접두사	최소 가로 너비 (Minimum Width)	대체 타겟 기기군
(Default)	0px ~ 639px	일반 모든 스마트폰 세로 뷰포트
`sm:`	640px 이상	대형 스마트폰 가로 뷰포트
`md:`	768px 이상	아이패드, 갤럭시탭 등 태블릿 세로 및 가로 뷰포트
`lg:`	1024px 이상	노트북 및 일반 데스크톱 화면
`xl:`	1280px 이상	대형 와이드 모니터 뷰포트
`2xl:`	1536px 이상	초대형 울트라 와이드 시네마 스크린

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>Mobile First Responsive Demo</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-slate-900 min-h-screen p-8 flex flex-col items-center justify-center font-sans">
  
  <div class="max-w-4xl w-full bg-slate-800 rounded-3xl p-6 border border-slate-700 shadow-2xl space-y-6">
    <div class="border-b border-slate-700 pb-4 text-center">
      <h2 class="text-3xl font-black text-white">Responsive Cards</h2>
      <p class="text-sm text-slate-400 mt-1" id="viewport-label">브라우저 창 크기를 좌우로 늘리고 줄여 보강 효과를 확인하세요!</p>
    </div>

    <!-- Responsive Columns Container -->
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 bg-slate-950 p-6 rounded-2xl">
      <div class="bg-slate-800 border border-slate-700 p-6 rounded-xl shadow-lg">
        <h3 class="font-bold text-white text-lg">Card A</h3>
        <p class="text-slate-400 text-sm mt-2">모바일에서는 세로로 1열 정렬됩니다.</p>
      </div>
      <div class="bg-slate-800 border border-slate-700 p-6 rounded-xl shadow-lg">
        <h3 class="font-bold text-white text-lg">Card B</h3>
        <p class="text-slate-400 text-sm mt-2">태블릿 (md 이상)에서는 가로 2열 배열됩니다.</p>
      </div>
      <div class="bg-slate-800 border border-slate-700 p-6 rounded-xl shadow-lg md:col-span-2 lg:col-span-1">
        <h3 class="font-bold text-white text-lg">Card C</h3>
        <p class="text-slate-400 text-sm mt-2">데스크탑 (lg 이상)에 도달하면 나란히 3열이 완성됩니다.</p>
      </div>
    </div>
  </div>

</body>
</html>

🔒 localhost:8000/preview

반응형 디자인 혁명, 미디어 쿼리가 사라지다

⚠️ 주의: Mobile-First 아키텍처 작성 방향

중단점 접두사	최소 가로 너비 (Minimum Width)	대체 타겟 기기군
(Default)	0px ~ 639px	일반 모든 스마트폰 세로 뷰포트
`sm:`	640px 이상	대형 스마트폰 가로 뷰포트
`md:`	768px 이상	아이패드, 갤럭시탭 등 태블릿 세로 및 가로 뷰포트
`lg:`	1024px 이상	노트북 및 일반 데스크톱 화면
`xl:`	1280px 이상	대형 와이드 모니터 뷰포트
`2xl:`	1536px 이상	초대형 울트라 와이드 시네마 스크린