문제 8: 푸터 ⭐⭐

⏱️ 15-20분 🎯 flex-col 전체 레이아웃, flex-1 공간 분배, 하단 고정

페이지를 스크롤해서 하단의 푸터를 확인하세요.

📝 코드 보기

<!-- body에 flex flex-col 추가 -->
<body class="flex flex-col min-h-screen">
  
  <!-- 메인 컨텐츠 (flex-1로 공간 차지) -->
  <div class="flex-1">
    컨텐츠...
  </div>

  <!-- 푸터 (항상 하단) -->
  <footer class="bg-gray-800 text-white p-8">
    <div class="flex justify-between">
      <div>© 2024 MyCompany</div>
      <div class="flex gap-4">
        <a href="#">이용약관</a>
        <a href="#">개인정보처리방침</a>
      </div>
    </div>
  </footer>
  
</body>

💡 핵심 포인트

• body에 flex flex-col min-h-screen 적용
• 메인 컨텐츠에 flex-1로 남은 공간 모두 차지
• 푸터는 자동으로 최하단 배치

← 이전 다음 →