WEB/CSS
Tailwind - 컬러 및 배경, 보더 처리
lumana
2025. 2. 13. 00:02
Tailwind - 컬러 및 배경, 보더 처리
#Web/CSS
배경색 설정(background-color)
<div class="bg-blue-500 p-6 text-white">
배경색이 파란색입니다.
</div>
<div class="bg-gray-100 p-6 text-black">
배경색이 연한 회색입니다.
</div>
텍스트 색상 설정(text-color)
<p class="text-red-500">이 문장은 빨간색 텍스트입니다.</p>
<p class="text-green-500">이 문장은 녹색 텍스트입니다.</p>
<p class="text-blue-600">이 문장은 파란색 텍스트입니다.</p>
보더 스타일 설정(border)
보더 두께, 색상, 모양 등을 쉽게 설정할 수 있다.
예: 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>