상태 변형 (Hover, Focus, Active)

생동감 있는 인터랙티브 가상 선택자

웹사이트는 사용자의 동작에 실시간 반응하여 살아있음을 느껴야 합니다. Tailwind CSS는 CSS의 가상 클래스(Pseudo-classes)를 hover:bg-blue-600, focus:ring-2 처럼 클래스 접두사(Prefix) 형태로 즉시 적용할 수 있게 획기적인 상태 제어 문법을 제공합니다.

💡 키보드 접근성 팁: focus:ring 필수 권장

마우스 호버만 신경 쓰고 포커스 링을 누락하면 키보드 Tab 키로 탐색하는 장애인/전문가 사용자들의 웹 접근성이 훼손됩니다. focus:outline-none으로 지저분한 아웃라인을 지웠다면, 반드시 세련된 focus:ring-2 focus:ring-indigo-500/50 처럼 투명 링 그림자 링을 활성화하는 것이 프로 웹 퍼블리셔의 기본 덕목입니다.

가상 클래스 접두사	동작 조건	실전 유스케이스 예시
`hover:`	마우스 포인터가 요소 위에 위치할 때	`hover:bg-slate-700 hover:scale-105`
`focus:`	입력란(Input) 선택 및 키보드 Tab 키 포커스 시	`focus:ring-2 focus:ring-indigo-500/50`
`active:`	마우스 클릭 및 모바일 터치 압력이 일어나는 동안	`active:scale-95 active:bg-indigo-700`
`disabled:`	폼 요소가 비활성화(disabled) 상태일 때	`disabled:opacity-50 disabled:cursor-not-allowed`
`group-hover:`	부모 카드에 호버 시 내부 자식 텍스트를 연동해 바꿀 때	부모 카드에 `group` 선언 ➔ 자식 글씨에 `group-hover:text-indigo-400`

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>Interactive States Demo</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-slate-900 min-h-screen p-8 flex flex-col items-center justify-center font-sans">
  
  <div class="max-w-md w-full bg-slate-800 rounded-2xl p-6 border border-slate-700 shadow-2xl space-y-6">
    <div class="border-b border-slate-700 pb-4">
      <h2 class="text-2xl font-extrabold text-white">Variants Playground</h2>
      <p class="text-sm text-slate-400 mt-1">버튼에 마우스를 올리고 클릭(Active)하여 상태 반응을 확인하세요!</p>
    </div>

    <!-- Active Button with Neon Effects -->
    <div class="flex flex-col items-center gap-4 py-4 bg-slate-950 rounded-xl">
      <button onclick="console.log('💥 성공적으로 제출되었습니다.')" class="bg-indigo-600 hover:bg-indigo-500 active:scale-95 text-white font-bold py-3 px-8 rounded-xl transition-all duration-200 shadow-lg shadow-indigo-600/30 hover:shadow-indigo-500/50">
        제출하기
      </button>
      
      <!-- Focus Form Input -->
      <input type="text" placeholder="여기를 클릭하여 Focus해보세요..." class="w-64 px-4 py-2 bg-slate-800 border border-slate-700 rounded-lg outline-none text-white focus:ring-4 focus:ring-indigo-500/50 focus:border-indigo-500 transition-all text-sm placeholder-slate-500" />
    </div>
  </div>

</body>
</html>

🔒 localhost:8000/preview

생동감 있는 인터랙티브 가상 선택자

💡 키보드 접근성 팁: focus:ring 필수 권장

가상 클래스 접두사	동작 조건	실전 유스케이스 예시
`hover:`	마우스 포인터가 요소 위에 위치할 때	`hover:bg-slate-700 hover:scale-105`
`focus:`	입력란(Input) 선택 및 키보드 Tab 키 포커스 시	`focus:ring-2 focus:ring-indigo-500/50`
`active:`	마우스 클릭 및 모바일 터치 압력이 일어나는 동안	`active:scale-95 active:bg-indigo-700`
`disabled:`	폼 요소가 비활성화(disabled) 상태일 때	`disabled:opacity-50 disabled:cursor-not-allowed`
`group-hover:`	부모 카드에 호버 시 내부 자식 텍스트를 연동해 바꿀 때	부모 카드에 `group` 선언 ➔ 자식 글씨에 `group-hover:text-indigo-400`