강의 목표

• Tailwind CSS의 유틸리티 클래스를 사용하여 배경색, 텍스트 색상, 보더 스타일을 설정하는 방법을 학습합니다.
• 카드 컴포넌트를 예시로, 다양한 컬러 및 보더 속성을 적용하는 실습을 진행합니다.

주요 학습 내용

배경색 설정 (background-color)

• Tailwind CSS의 배경색 유틸리티 클래스를 사용하여 다양한 배경색을 적용할 수 있습니다.
• 예: bg-white, bg-gray-100, bg-blue-500, bg-green-500

<div class="bg-blue-500 p-6 text-white">
  배경색이 파란색입니다.
</div>
<div class="bg-gray-100 p-6 text-black">
  배경색이 연한 회색입니다.
</div>

텍스트 색상 설정 (text-color)

• 텍스트의 색상을 Tailwind CSS의 유틸리티 클래스를 통해 쉽게 변경할 수 있습니다.
• 예: text-black, text-gray-700, text-blue-600, text-red-500

<p class="text-red-500">이 문장은 빨간색 텍스트입니다.</p>
<p class="text-green-500">이 문장은 녹색 텍스트입니다.</p>
<p class="text-blue-600">이 문장은 파란색 텍스트입니다.</p>

보더 스타일 설정 (border)

• Tailwind CSS는 보더 두께, 색상, 모양 등을 쉽게 설정할 수 있는 다양한 유틸리티 클래스를 제공합니다.
• 예: border, border-2, border-gray-300, rounded-lg, rounded-full

<div class="border border-gray-300 p-6 rounded-lg">
  이 상자는 회색 보더와 둥근 모서리를 가지고 있습니다.
</div>
<div class="border-2 border-blue-500 p-6 rounded-full">
  이 상자는 파란색 보더와 완전히 둥근 모서리를 가지고 있습니다.
</div>

실습: 카드 컴포넌트에 배경과 보더 스타일 적용

실습 목표