인라인 CSS로 호버 효과 구현하는 방법

때때로 HTML 이메일 템플릿처럼 인라인 CSS를 작성해야 하는 상황이 생깁니다. 사용하는 이메일·뉴스레터 서비스 제공업체에 따라 스타일을 태그 안에 직접 삽입해야 하기 때문입니다.

그렇다면 인라인 CSS만으로 호버(hover) 효과를 구현할 수 있을까요?

결론부터 말하면 불가능합니다. 인라인 style 속성은 :hover 같은 가상 클래스(pseudo-class)를 지원하지 않기 때문입니다. 대신 JavaScript의 onMouseOver와 onMouseOut 메서드를 활용하면 동일한 호버 효과를 만들어낼 수 있습니다.

예를 들어, 링크에 마우스를 올렸을 때 글자색을 파란색에서 빨간색으로 바꾸고 싶다면 아래와 같이 작성합니다.

<a href="#your-url-path"
onMouseOver="this.style.color='red'"
onMouseOut="this.style.color='green'">여기를 클릭해 구독하세요</a>

실행 결과는 다음과 같습니다.

여기를 클릭해 구독하세요

마우스 포인터를 링크 위에 올리면 글자색이 빨간색으로 변경되고, 포인터를 치우면 초록색으로 돌아갑니다. 즉, CSS의 :hover 없이도 자바스크립트 이벤트 핸들러만으로 똑같은 시각적 반응을 구현할 수 있는 것입니다.

마무리

일반적으로 인라인 CSS는 유지보수성과 재사용성이 떨어지기 때문에 권장되지 않습니다. 하지만 이메일 템플릿처럼 외부 스타일시트나 <style> 태그 사용이 제한되는 환경에서는, 이처럼 덜 이상적인 코드라도 문제를 해결하기 위해 어쩔 수 없이 사용해야 할 때가 있습니다.