🎞️ 호버 효과, 클릭 효과, 토글 효과 – 상태별 인터랙션 스타일링

🎞️ 호버 효과, 클릭 효과, 토글 효과 – 상태별 인터랙션 스타일링

사용자가 요소에 마우스를 올리거나 클릭할 때, 시각적인 반응을 주는 것은 UX에서 매우 중요합니다. 이 글에서는 :hover, :active, :focus, :checked 등 상태 기반의 CSS 인터랙션 스타일링을 예제와 함께 정리합니다.

---

1️⃣ :hover – 마우스를 올렸을 때

.button:hover {
  background-color: #0056b3;
  transform: translateY(-2px);
}

• 마우스를 올리면 색상 변경, 그림자 추가, 살짝 들림 등 효과 적용

---

2️⃣ :active – 클릭 순간

.button:active {
  transform: scale(0.98);
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.2);
}

• 클릭 시 눌리는 듯한 효과로 피드백 제공

---

3️⃣ :focus – 키보드 접근 또는 클릭 포커스

input:focus {
  border-color: #007bff;
  outline: none;
  box-shadow: 0 0 0 2px rgba(0,123,255,0.25);
}

👉 접근성을 위해 포커스 스타일은 생략하지 않는 것이 좋습니다.

---

4️⃣ :checked – 체크박스, 라디오의 토글 상태

.toggle input[type="checkbox"]:checked + .label {
  background-color: #28a745;
  color: white;
}

커스텀 토글 버튼 제작 시 자주 사용되는 방식입니다.

---

5️⃣ 상태별 애니메이션 조합

.card {
  transition: all 0.3s ease;
}

.card:hover {
  transform: translateY(-6px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.1);
}

• 호버 시 부드럽게 떠오르는 카드 UI 구현

---

6️⃣ 토글 아이콘 전환 예제

HTML:

  
  ☰

CSS:

.menu-toggle input {
  display: none;
}

.menu-toggle .icon {
  font-size: 24px;
  transition: transform 0.3s;
}

.menu-toggle input:checked + .icon {
  transform: rotate(90deg);
  color: #007bff;
}

👉 햄버거 메뉴가 회전하는 토글 효과를 구현할 수 있습니다.

---

📌 정리 요약

• :hover → 마우스 올릴 때
• :active → 클릭 누르고 있을 때
• :focus → 키보드 접근 또는 클릭 포커스
• :checked → 토글 상태 (체크박스, 라디오)
• 이 상태들을 조합하면 동적인 UI 인터랙션을 쉽게 구현 가능

---

📌 다음 글 예고

다음 글: @media, @supports, @keyframes 등 CSS at-rule 종합 정리에서는 CSS의 특수 지시문(at-rule)의 종류와 사용처를 정리합니다.