← 목록으로

문제 10: 종합 레이아웃 (블로그) ⭐⭐⭐

⏱️ 30-40분 🎯 복잡한 다단 레이아웃, 고정/가변 너비 조합, 전체 페이지 구성

Tailwind CSS 시작하기

Tailwind CSS는 유틸리티 우선 CSS 프레임워크입니다...

2024.01.15 더 읽기

Flexbox 완벽 가이드

Flexbox를 사용하면 쉽게 레이아웃을 만들 수 있습니다...

2024.01.10 더 읽기

반응형 디자인 팁

다양한 디바이스에서 잘 보이는 웹사이트를 만드는 방법...

2024.01.05 더 읽기
📝 코드 보기 
<!-- 전체 구조 -->
<nav>상단 네비게이션</nav>

<div class="flex gap-6">
  <!-- 사이드바 (고정 너비) -->
  <aside class="w-64">
    카테고리...
  </aside>

  <!-- 메인 콘텐츠 (남은 공간 차지) -->
  <main class="flex-1">
    <article>포스트 1</article>
    <article>포스트 2</article>
    <article>포스트 3</article>
  </main>
</div>
💡 핵심 포인트
  • • 전체 레이아웃: flex gap-6로 사이드바와 메인 분리
  • • 사이드바: w-64 고정 너비
  • • 메인 콘텐츠: flex-1로 남은 공간 모두 차지
  • • 포스트 카드: 각각 독립적인 article 요소
  • • 카드 내부: flex justify-between로 날짜와 버튼 양쪽 배치
🎯 배운 개념 총정리

이 문제는 지금까지 배운 모든 개념을 종합합니다:

  • ✓ 네비게이션 바 (justify-between)
  • ✓ 2단 레이아웃 (flex + 고정/가변 너비)
  • ✓ 카드 디자인 (shadow, rounded)
  • ✓ 리스트 스타일링 (space-y, hover)
  • ✓ 버튼과 링크 (bg, hover, rounded)
← 이전 완료! 목록으로