CSS와 JavaScript를 함께 사용하면 클릭 한 번으로 좋아요(👍) 버튼과 싫어요(👎) 버튼을 자유롭게 전환할 수 있습니다. 이 기능은 Font Awesome 아이콘의 클래스를 동적으로 변경하는 방식으로 간단하게 구현할 수 있으며, SNS나 블로그 같은 웹 서비스에서 자주 활용되는 UI 패턴입니다.
구현 원리
핵심 원리는 다음과 같습니다.
1. Font Awesome의 fa-thumbs-up(좋아요)과 fa-thumbs-down(싫어요) 아이콘 클래스를 활용합니다.
2. JavaScript의 classList.toggle() 메서드를 사용해 클릭 시마다 두 클래스를 서로 교체합니다.
3. CSS로 색상 변화(파란색 ↔ 빨간색)와 마우스 오버 시 확대 효과를 추가해 사용자 경험을 향상시킵니다.
전체 예제 코드
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"/>
<style>
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
padding: 20px;
}
.fa {
font-size: 50px;
cursor: pointer;
user-select: none;
}
.fa-thumbs-up {
color: blue;
}
.fa-thumbs-down {
color: red;
}
.fa:hover {
transform: scale(1.2);
}
</style>
</head>
<body>
<h1>좋아요/싫어요 버튼 예제</h1>
<i class="fa fa-thumbs-up"></i>
<script>
document.querySelector(".fa").addEventListener("click", function(event) {
toggleLike(event);
});
function toggleLike(ele) {
ele.target.classList.toggle("fa-thumbs-down");
}
</script>
</body>
</html>코드 설명
1. CSS 스타일 부분
.fa 클래스는 아이콘의 크기를 50px로 지정하고, cursor: pointer;로 클릭 가능함을 알리며, user-select: none;으로 연속 클릭 시 텍스트가 선택되는 현상을 방지합니다.
.fa-thumbs-up은 좋아요 상태의 파란색, .fa-thumbs-down은 싫어요 상태의 빨간색을 적용합니다. 또한 :hover 가상 클래스에 transform: scale(1.2);를 추가하여 마우스를 올릴 때 아이콘이 커지는 인터랙티브 효과를 만듩니다.
2. JavaScript 부분
document.querySelector(".fa")로 아이콘 요소를 선택한 후, addEventListener("click", ...)을 통해 클릭 이벤트를 등록합니다. 클릭이 발생하면 toggleLike() 함수가 실행되어 classList.toggle("fa-thumbs-down")으로 클래스를 전환합니다.
여기서 재미있는 점은 toggle()만 사용했기 때문에 fa-thumbs-down 클래스가 추가되면 해당 스타일(빨간색)이 우선 적용되고, 다시 클릭하면 클래스가 제거되어 원래의 파란색 좋아요 아이콘으로 돌아옵니다.
실행 결과
위 코드를 실행하면 파란색 좋아요(따봉) 아이콘이 화면에 표시됩니다.
버튼을 클릭하면 아이콘이 빨간색 싫어요(거꾸로 된 손가락) 아이콘으로 전환됩니다. 다시 한 번 클릭하면 원래의 좋아요 상태로 되돌아갑니다.
마무리
이처럼 CSS와 JavaScript만으로도 별도의 라이브러리 없이 직관적인 좋아요/싫어요 토글 버튼을 만들 수 있습니다. 실제 프로젝트에서는 여기에 클릭 횟수 카운터, localStorage 저장, 서버 API 연동 등을 추가하여 더 완성도高的 기능을 구현할 수 있습니다.