📖 한국경영교육연구소 AI ACADEMY · 용어·통역 사전

전환 효과 / 호버 (transition / hover)

중급CSS(옷)

💬 쉬운 뜻

hover는 '마우스를 올렸을 때'의 상태를 말하고, transition은 색이나 크기가 바뀔 때 '뚝' 끊기지 않고 부드럽게 스르륵 변하게 해주는 거예요. 버튼에 마우스를 올리면 색이 천천히 진해지는 그 느낌이 바로 둘의 조합입니다. 방 조명을 스위치로 '딱' 켜는 게 아니라, 디머로 서서히 밝히는 것과 같아요.

⌨️ 이럴 땐 이렇게 입력

버튼에 마우스를 올리면 색이 0.2초 동안 부드럽게 진해지게 해줘
이 버튼이 죽어 있는 느낌이야. 마우스 올리면 살짝 커지고 색도 부드럽게 바뀌게 해줘

🔮 AI가 이렇게 답하면 = 이런 뜻

AI가 "hover 상태에 transition을 줬어요"라고 하면 = 마우스를 올렸을 때 색·크기가 끊기지 않고 부드럽게 변하도록 해서 버튼이 '살아있는' 느낌이 나게 했다는 뜻이에요.

➡️ 다음엔 이렇게

변화가 너무 빠르거나 느리면 "더 천천히(0.3초)", "더 빠르게(0.1초)"로 시간을 조절하면 됩니다. 마우스를 올려도 아무 반응이 없으면 "마우스 올려도 변화가 없어, 호버 효과 확인해줘"라고 하세요.

📖 사전에서 인터랙티브로 보기 → 전체 용어 목록

한국경영교육연구소 · AI ACADEMY — 외부강사 김지백 · 시연 교실 홈