반응형 디자인

/* sm-dn */
@media (max-width: 768px) {
  .sm-dn {
    display: none;
  }
}

<!-- 데스크탑에서만 표시 (768px 이하에서 숨김) -->
<div class="db sm-dn">데스크탑 전용 콘텐츠</div>

<!-- 모바일에서만 표시 (768px 이하에서만 보임) -->
<div class="dn sm-db">모바일 전용 콘텐츠</div>

<!-- 태블릿 이하에서만 표시 -->
<div class="dn md-db">태블릿/모바일 전용</div>

<!-- Flex 방향 전환: 가로 → 세로 -->
<div class="df md-fdc gap2rem">
  <div>좌측 영역</div>
  <div>우측 영역 → 태블릿 이하에서 아래로 이동</div>
</div>

<!-- Grid 열 수 축소: 3열 → 2열 → 1열 -->
<div class="dg gtcr3-1fr md-gtcr2-1fr sm-gtc1fr gap2rem">
  <div>Card 1</div>
  <div>Card 2</div>
  <div>Card 3</div>
</div>

<!-- 제목: 데스크탑 24px → 태블릿 20px → 모바일 16px -->
<h1 class="fs2-4rem md-fs2rem sm-fs1-6rem fw800">반응형 제목</h1>

<!-- 본문: 데스크탑 16px → 모바일 14px -->
<p class="fs16px sm-fs14px lh1-7">본문 텍스트</p>

<!-- 패딩: 데스크탑 40px → 태블릿 20px → 모바일 16px -->
<div class="p4rem md-p2rem sm-p16px">
  넓은 화면에서는 넉넉한 여백, 모바일에서는 최소 여백
</div>

<!-- Gap: 데스크탑 32px → 태블릿 20px → 모바일 12px -->
<div class="df fdc gap3-2rem md-gap2rem sm-gap12px">
  <div>Item 1</div>
  <div>Item 2</div>
</div>

<!-- 4열 → 3열 → 2열 → 1열 -->
<div class="dg gtcr4-1fr lg-gtcr3-1fr md-gtcr2-1fr sm-gtc1fr gap2rem">
  <div>Card 1</div>
  <div>Card 2</div>
  <div>Card 3</div>
  <div>Card 4</div>
</div>

<!-- 데스크탑 스타일을 먼저 쓰고, 작은 화면에서 변경할 부분만 추가 -->
<div class="dg gtcr3-1fr gap2rem  md-gtcr2-1fr  sm-gtc1fr sm-gap16px">
  <!--  ↑ 데스크탑: 3열     ↑ 태블릿: 2열    ↑ 모바일: 1열 + 좁은 간격 -->
  <div>Card 1</div>
  <div>Card 2</div>
  <div>Card 3</div>
</div>

<!-- 반응형 헤더 -->
<header class="df jcsb aic px2rem py16px">
  <!-- 로고: 항상 표시 -->
  <div class="fs2rem fw800 cFAFAFA">Logo</div>

  <!-- 데스크탑 네비게이션: 모바일에서 숨김 -->
  <nav class="df gap2rem sm-dn">
    <a class="cA1A1AA hover-cFAFAFA tdn">Home</a>
    <a class="cA1A1AA hover-cFAFAFA tdn">About</a>
    <a class="cA1A1AA hover-cFAFAFA tdn">Contact</a>
  </nav>

  <!-- 햄버거 버튼: 모바일에서만 표시 -->
  <button class="dn sm-db bg0000 bn cFAFAFA fs2rem cp">☰</button>
</header>

<!-- 4열 → 2열 → 1열 카드 그리드 -->
<div class="dg gtcr4-1fr md-gtcr2-1fr sm-gtc1fr gap2rem md-gap16px">
  <div class="bg18181B p2rem sm-p16px br8px">
    <h3 class="fs16px fw700 cFAFAFA mb8px">카드 제목</h3>
    <p class="fs14px c71717A lh1-7">카드 내용이 여기에 들어갑니다.</p>
  </div>
  <div class="bg18181B p2rem sm-p16px br8px">
    <h3 class="fs16px fw700 cFAFAFA mb8px">카드 제목</h3>
    <p class="fs14px c71717A lh1-7">카드 내용이 여기에 들어갑니다.</p>
  </div>
  <div class="bg18181B p2rem sm-p16px br8px">
    <h3 class="fs16px fw700 cFAFAFA mb8px">카드 제목</h3>
    <p class="fs14px c71717A lh1-7">카드 내용이 여기에 들어갑니다.</p>
  </div>
  <div class="bg18181B p2rem sm-p16px br8px">
    <h3 class="fs16px fw700 cFAFAFA mb8px">카드 제목</h3>
    <p class="fs14px c71717A lh1-7">카드 내용이 여기에 들어갑니다.</p>
  </div>
</div>

<!-- 사이드바 + 메인 → 세로 스택 -->
<div class="dg gtc25rem-1fr md-gtc1fr gap2rem">
  <aside class="bg18181B p2rem br8px md-order2">
    <h3 class="fs16px fw700 cFAFAFA mb16px">사이드바</h3>
    <nav class="df fdc gap8px">
      <a class="c71717A hover-cFAFAFA tdn">메뉴 1</a>
      <a class="c71717A hover-cFAFAFA tdn">메뉴 2</a>
      <a class="c71717A hover-cFAFAFA tdn">메뉴 3</a>
    </nav>
  </aside>
  <main class="bg27272A p2rem br8px md-order1">
    <h2 class="fs2rem fw700 cFAFAFA mb16px">메인 콘텐츠</h2>
    <p class="fs14px c71717A lh1-7">여기에 메인 콘텐츠가 들어갑니다.</p>
  </main>
</div>

<!-- 히어로 제목 -->
<h1 class="fs4-8rem lg-fs4rem md-fs3-2rem sm-fs2-4rem fw800 lh1-2">
  큰 제목이 여기에
</h1>

<!-- 섹션 제목 -->
<h2 class="fs3-2rem md-fs2-4rem sm-fs2rem fw700 lh1-3">
  섹션 제목
</h2>

<!-- 부제목 -->
<h3 class="fs2rem md-fs1-8rem sm-fs1-6rem fw600 lh1-4">
  부제목
</h3>

<!-- 본문 -->
<p class="fs16px sm-fs14px lh1-7">
  본문 텍스트는 작은 변화만 줘도 충분합니다.
</p>

<!-- 여러 브레이크포인트를 동시에 적용 -->
<div class="p4rem lg-p3-2rem md-p2-4rem sm-p16px">
  화면 크기에 따라 padding이 단계적으로 줄어듭니다.
</div>