강의 목표

• Tailwind CSS에서 제공하는 Flexbox와 Grid 시스템의 기본 개념과 유틸리티 클래스를 이해하고, 이를 활용한 레이아웃 구성 방법을 학습합니다.
• Flexbox를 통해 아이템을 수평 및 수직으로 정렬하는 방법을 익히고, Grid 시스템을 사용하여 3x3 그리드 레이아웃을 구성합니다.
• gap, justify, align과 같은 클래스를 효과적으로 활용하여 유연한 레이아웃을 만드는 방법을 실습합니다.

Flexbox

• Flexbox는 수평 및 수직 정렬을 위한 CSS 레이아웃 모델입니다. 주로 단일 행이나 열에서 아이템을 정렬할 때 유용합니다.
• Tailwind CSS는 Flexbox 기능을 쉽게 사용할 수 있도록 다양한 유틸리티 클래스를 제공합니다.

주요 Flexbox 유틸리티 클래스

• flex: Flexbox 컨테이너를 활성화합니다.
• justify-start, justify-center, justify-end: 아이템을 수평으로 정렬.
• items-start, items-center, items-end: 아이템을 수직으로 정렬.
• gap-x-N, gap-y-N: Flexbox 아이템 간의 간격 조절.

실습: Flexbox로 헤더 네비게이션 바 만들기

• Flexbox를 사용하여 좌측에는 로고, 중앙에는 네비게이션 링크, 우측에는 로그인 버튼이 있는 간단한 header 네비게이션 바를 만드는 실습을 진행합니다.

예시 코드:

<header class="bg-gray-100 p-6 rounded-lg mb-6">
  <nav class="flex justify-between items-center">
    <!-- 좌측: 로고 -->
    <div class="text-2xl font-bold">MyWebsite</div>

    <!-- 중앙: 네비게이션 링크 -->
    <ul class="flex gap-4">
      <li>
        <a href="#" class="text-gray-700 hover:text-gray-900">Home</a>
      </li>
      <li>
        <a href="#" class="text-gray-700 hover:text-gray-900">About</a>
      </li>
      <li>
        <a href="#" class="text-gray-700 hover:text-gray-900">Services</a>
      </li>
      <li>
        <a href="#" class="text-gray-700 hover:text-gray-900">Contact</a>
      </li>
    </ul>

    <!-- 우측: 로그인 버튼 -->
    <div>
      <button
        class="bg-blue-500 text-white py-2 px-4 rounded hover:bg-blue-700"
        type="button"
      >
        Login
      </button>
    </div>
  </nav>
</header>

Grid 시스템