마카로닉스

2303 No

css 추천, 비추천 버튼 만들기

2024-10-18 13:11:10 By 라이트 0 300 댓글수 0 포스트 하기

11월 2024
일	월	화	수	목	금	토
					1	2
3	4	5	6	7	8	9
10	11	12	13	14	15	16
17	18	19	20	21	22	23
24	25	26	27	28	29	30

HTML

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>추천/비추천 버튼</title>
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <link rel="stylesheet" href="style.css">
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <style>
        /* CSS goes here */
    </style>
</head>
<body>

<div class="vote-container">
    <button class="btn upvote" id="upvote-btn">
        <span class="material-icons">thumb_up</span> 추천 <span id="upvote-count">0</span>
    </button>
    <button class="btn downvote" id="downvote-btn">
        <span class="material-icons">thumb_down</span> 비추천 <span id="downvote-count">0</span>
    </button>
</div>

<script>
    /* jQuery goes here */
</script>

</body>
</html>

CSS

        body {
    font-family: Arial, sans-serif;
    background-color: #f4f4f4;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

.vote-container {
    display: flex;
    gap: 20px;
}

.vote-container .btn {
    display: flex;
    align-items: center;
    gap: 10px;
    background-color: #e0e0e0;
    border: none;
    border-radius: 30px;
    padding: 10px 20px;
    cursor: pointer;
    font-size: 18px;
    color: #333;
    transition: background-color 0.3s ease;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.vote-container .btn span.material-icons {
    font-size: 24px;
}

.vote-container .btn:hover {
    background-color: #d4d4d4;
}

.vote-container .btn.active {
    background-color: #4caf50;
    color: #fff;
}

.vote-container .btn.downvote.active {
    background-color: #f44336;
}

#upvote-count, #downvote-count {
    font-weight: bold;
}

jQuery (JavaScript)

$(document).ready(function() {
    let upvoteCount = 0;
    let downvoteCount = 0;

    // 추천 버튼 클릭 이벤트
    $('#upvote-btn').click(function() {
        if (!$(this).hasClass('active')) {
            upvoteCount++;
            $('#upvote-count').text(upvoteCount);
            $(this).addClass('active');
            $('#downvote-btn').removeClass('active');
        }
    });

    // 비추천 버튼 클릭 이벤트
    $('#downvote-btn').click(function() {
        if (!$(this).hasClass('active')) {
            downvoteCount++;
            $('#downvote-count').text(downvoteCount);
            $(this).addClass('active');
            $('#upvote-btn').removeClass('active');
        }
    });
});

설명:

HTML 구조:
- 두 개의 버튼을 각각 추천(thumb_up)과 비추천(thumb_down)으로 설정했습니다.
- span 태그를 사용해 아이콘과 카운트가 함께 표시됩니다.
CSS 디자인:
- btn 클래스는 둥근 모서리와 그림자를 적용해 버튼을 입체적으로 보이게 했습니다.
- 버튼이 활성화(active) 상태일 때는 추천(초록색) 또는 비추천(빨간색)으로 배경색이 바뀝니다.
- 마우스를 올렸을 때 색상이 살짝 변하도록 :hover 효과를 추가했습니다.
jQuery 기능:
- 각 버튼을 클릭하면 active 클래스가 추가되어 버튼 색상이 변경됩니다.
- 추천 또는 비추천 중 하나의 버튼만 활성화되도록 설정했습니다.
- 클릭할 때마다 카운트가 증가하며, 버튼 위의 숫자가 갱신됩니다.