Background Color Editing Guide

페이지, 레이아웃, 버튼 등 다양한 요소에 배경 색상을 설정하여 사용자의 디자인 스타일에 맞게 커스터마이징할 수 있습니다. 배경 색상은 bg-color-명도 형식을 사용하여 쉽게 설정할 수 있습니다.

배경 색상 설정 기본 규칙

배경 색상은 bg-color-명도 형식으로 설정되며, 색상과 명도를 조합하여 원하는 스타일을 적용할 수 있습니다.

설정 가능한 색상

• 기본 색상 팔레트
  slate, gray, zinc, neutral, stone, red, orange, amber, yellow, lime, green, emerald, teal, cyan, sky, blue, indigo, violet, purple, fuchsia, pink, rose 등 다양한 색상을 제공합니다.

설정 가능한 명도

• 명도 (Lightness)
  배경 색상은 50에서 950까지 명도를 선택할 수 있으며, 숫자가 높을수록 색상이 짙어지고 낮을수록 밝아집니다. 예: bg-blue-100은 밝은 파란색, bg-blue-900은 짙은 파란색입니다.

특수 색상 설정

• 흰색과 검정
  흰색과 검정은 bg-white, bg-black으로 설정할 수 있습니다.

• 다크 모드 배경 색상
  다크 모드에서 다른 배경 색상을 사용하려면 dark: 접두사를 사용해 색상을 설정합니다. 예: dark:bg-indigo-600

• 커스텀 색상
  정의된 색상 외의 특정 색상을 배경에 적용하려면 bg-[#custom_color] 형식으로 설정할 수 있습니다. 예: bg-[#ff5733]

배경 그라데이션 설정

배경에 그라데이션 효과를 추가하려면, bg-gradient-to-r (오른쪽 방향으로 그라데이션)와 from-, via-, to- 클래스를 조합하여 설정할 수 있습니다.

<div class="bg-gradient-to-r from-indigo-500 via-purple-500 to-pink-500 h-64 w-full">
    그라데이션 배경
</div>

예시

<div class="bg-blue-500 dark:bg-blue-700 p-4 rounded-lg">
    버튼 배경
</div>

<div class="bg-gray-100 dark:bg-gray-800 p-6 rounded-lg">
    카드 레이아웃 배경
</div>

이 가이드를 통해 다양한 요소에 배경 색상과 그라데이션을 적용하여 맞춤형 디자인을 완성할 수 있습니다.