Text Color Editing Guide

텍스트 색상은 다양한 컬러 팔레트를 사용하여 쉽게 설정할 수 있으며, 다크 모드와 커스텀 색상, 그라데이션 효과까지 적용할 수 있습니다.

텍스트 색상 설정 기본 규칙

텍스트 색상은 text-color-명도 형식으로 설정됩니다. 예를 들어, text-indigo-500은 인디고 계열의 중간 밝기를 가진 색상을 의미합니다.

설정 가능한 색상

• 기본 색상 팔레트
  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까지 숫자로 설정할 수 있으며, 숫자가 높을수록 진해지고, 낮을수록 밝아집니다. 예: text-blue-100은 밝은 파란색, text-blue-900은 짙은 파란색입니다.

특수 색상 설정

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

• 다크 모드 색상
  다크 모드에서 다른 색상을 사용하고 싶다면 dark: 접두사를 붙여 설정할 수 있습니다. 예: dark:text-indigo-600

• 커스텀 색상
  정의된 팔레트 외의 색상을 사용하려면, text-[#custom_color] 형식으로 설정합니다. 예: text-[#ff5733]

그라데이션 텍스트 설정

텍스트에 그라데이션 효과를 추가하려면, Tailwind CSS의 bg-gradient-to-r(오른쪽 방향으로 그라데이션)와 text-transparent, bg-clip-text 클래스를 조합하여 적용할 수 있습니다.

<div class="text-3xl font-bold bg-gradient-to-r from-indigo-500 via-purple-500 to-pink-500 text-transparent bg-clip-text">
    그라데이션 텍스트
</div>

이 가이드를 통해 텍스트 색상과 다크 모드, 그라데이션 효과를 쉽게 설정하고 커스터마이징할 수 있습니다.