[TailwindCSS] Pseudo classes - hover, focus, active, visited, focus-within, focus-visible

1. Hover

hover 수정자는 사용자가 마우스 커서를 요소 위에 올렸을 때 스타일을 적용한다.

예시:

<button class="bg-violet-500 hover:bg-violet-600 ...">
  Save changes
</button>

위의 예시에서는 버튼이 기본적으로 보라색(bg-violet-500)이고, 마우스를 올렸을 때 조금 더 진한 보라색(bg-violet-600)으로 변경된다.

2. Focus

focus 수정자는 요소가 포커스를 받았을 때 스타일을 적용한다.

예시:

<button class="bg-violet-500 focus:outline-none focus:ring focus:ring-violet-300 ...">
  Save changes
</button>

위의 예시에서는 버튼이 포커스를 받을 때 외곽선이 사라지고(focus:outline-none), 보라색 테두리(focus:ring, focus:ring-violet-300)가 생긴다.

3. Active

active 수정자는 요소가 클릭되었을 때 스타일을 적용한다.

예시:

<button class="bg-violet-500 active:bg-violet-700 ...">
  Save changes
</button>

위의 예시에서는 버튼이 클릭되었을 때 더 진한 보라색(bg-violet-700)으로 변경된다.

4. Visited

visited 수정자는 사용자가 이미 방문한 링크를 스타일링하는 데 사용된다.

예시:

<a href="https://example.com" class="text-blue-600 visited:text-purple-600 ...">
  Visit Site
</a>

위의 예시에서는 링크가 기본적으로 파란색(text-blue-600)이고, 방문한 후에는 보라색(visited:text-purple-600)으로 변경된다.

5. Focus-within

focus-within 수정자는 요소 또는 그 자손 요소가 포커스를 가질 때 스타일을 적용한다.

예시:

<div class="focus-within:shadow-lg ...">
  <input type="text" class="border-gray-300 ..." />
</div>

위의 예시에서는 div 요소 내부의 입력 필드가 포커스를 받을 때 div 요소에 그림자(focus-within:shadow-lg)가 추가된다.

6. Focus-visible

focus-visible 수정자는 키보드로 포커스된 요소를 스타일링하는 데 사용된다.

예시:

<button class="focus:outline-none focus-visible:ring focus-visible:ring-violet-300 ...">
  Submit
</button>

위의 예시에서는 버튼이 키보드로 포커스를 받을 때 외곽선이 사라지고(focus:outline-none), 보라색 테두리(focus-visible:ring, focus-visible:ring-violet-300)가 생긴다.