강의 목표

• Tailwind CSS에서 제공하는 패딩(padding), 마진(margin), 그리고 공간 조정(space-between) 유틸리티 클래스를 사용하여 요소 간의 간격을 효과적으로 설정하는 방법을 학습합니다.
• 카드 컴포넌트에 이미지를 배치하고 텍스트와의 간격을 조정하는 실습을 진행합니다.

주요 학습 내용

패딩 설정 (padding)

• Tailwind CSS에서 패딩은 p 유틸리티 클래스를 통해 쉽게 설정할 수 있습니다. 사이즈를 숫자로 지정하며, 각 숫자는 Tailwind의 내부 간격 시스템에 의해 정의됩니다.
• 예: p-4는 모든 방향에 1rem의 패딩을 적용하고, px-4는 좌우에만 패딩을 적용합니다.

<div class="p-4 bg-gray-100">
  이 박스는 모든 방향에 1rem 패딩이 있습니다.
</div>
<div class="px-6 py-2 bg-gray-200">
  이 박스는 좌우에 1.5rem, 상하에 0.5rem 패딩이 있습니다.
</div>

마진 설정 (margin)

• 마진은 m 유틸리티 클래스를 사용하여 설정할 수 있습니다. 패딩과 유사하게, 숫자 값으로 크기를 설정하며 각 방향에 맞게 지정할 수 있습니다.
• 예: m-4는 모든 방향에 마진을 적용하고, mt-4는 상단에만 마진을 적용합니다.

<div class="m-4 bg-blue-100">
  이 박스는 모든 방향에 1rem의 마진이 있습니다.
</div>
<div class="mt-6 mb-2 bg-blue-200">
  이 박스는 상단에 1.5rem, 하단에 0.5rem의 마진이 있습니다.
</div>

요소 간의 공간 조정 (space-between)

• 요소 간의 간격을 조정할 때는 space-x(좌우) 또는 space-y(상하) 유틸리티를 사용합니다. 이 클래스를 통해 자식 요소 간의 간격을 자동으로 조정할 수 있습니다.

<div class="flex space-x-4 bg-gray-300 p-4">
  <div class="bg-white p-4">첫 번째 박스</div>
  <div class="bg-white p-4">두 번째 박스</div>
  <div class="bg-white p-4">세 번째 박스</div>
</div>

• 위 예시에서는 space-x-4로 자식 박스들 간의 간격을 1rem로 설정하였습니다.

실습: 간단한 카드 컴포넌트 만들기 (이미지, 텍스트 배치)

실습 목표

Tailwind CSS의 padding, margin, space-between을 활용하여 카드 컴포넌트를 디자인합니다. 이미지를 상단에 배치하고 텍스트를 그 아래에 정렬한 카드 디자인을 완성합니다.