참고: https://www.tutorialspoint.com/how-to-toggle-between-a-like-dislike-button-with-css-and-javascript
토글 버튼은 기능을 켜고 끄거나 설정을 변경하는 것 처럼 많은 기능에 사용할 수 있습니다. 이 포스트에서는 CSS와 JavaScript를 사용하여 좋아요 버튼과 싫어요 버튼이 토글되는 프로그램을 작성해 보겠습니다. 이를 위해 HTML, CSS, JavaScript 세 개의 파일을 만들겠습니다.
TL;DR
다음은 좋아요 토글 버튼 전체 스크립트입니다.
See the Pen toggle like by shinyks (@shinyks) on CodePen.
HTML (index.html)
버튼, 제목, 태그 등을 생성하려면 HTML 파일이 필요합니다. HTML 파일은 .html 확장자를 사용하여 저장합니다. 다음은 HTML 코드입니다.
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="style.css">
<script src="index.js"></script>
<title>Toggle</title>
</head>
<body>
<div class="toggle">
<button id='btn'>
<i class="fa fa-thumbs-up"></i>
</button>
</div>
</body>
</html>CSS (style.css)
다음은 CSS 파일이며 파일 확장자는 .css로 저장합니다. CSS에서는 전체 HTML 페이지의 스타일을 관리하는 코드를 작성할 것 입니다.
다음은 HTML 파일에 추가할 CSS를 연결하는 코드입니다.
<link rel="stylesheet" href="style.css">다음은 CSS 코드입니다.
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
body{
display: grid;
place-items: center;
height: 100vh;
overflow-x: hidden;
}
.toggle{
width: 500px;
height: 300px;
border: 5px solid black;
border-radius: 10px;
}
button{
width: 100px;
height: 100px;
background-color: blue;
color: white;
border-radius: 50px;
font-size: 60px;
cursor: pointer;
position: relative;
left: 200px;
top: 100px;
}
i{
width: 100px;
height: 100px;
background-color: transparent;
position: relative;
top: 10px;
}
span{
position: relative;
top: 100px;
color: green;
font-weight: 800;
font-size: 20px;
}JavaScript (index.js)
JavaScript에서는 토글을 제어하는 코드를 작성하고 버튼을 가져와 몇 가지 토글 조건을 적용합니다. 파일 확장자는 js로 저장합니다.
다음은 HTML과 JavaScript 파일을 연결하는 코드입니다.
<script src="index.js"></script>다음은 JavaScript 코드 입니다.
window.onload = () => {
const like = document.querySelector('.fa');
document.getElementById('btn').style.background = 'blue';
like.addEventListener("click", (e) => {
e.target.classList.toggle("fa-thumbs-down");
});
};위의 예제에서 볼 수 있듯이 HTML, CSS, JavaScript를 통해 프로그램을 만들었습니다. HTML을 통해 콘텐츠의 전체 구조를 만들고 CSS로 페이지의 스타일을 관리합니다. JavaScript에서는 querySelector를 사용하여 HTML에서 만들 아이콘을 가져오고 addEventListener와 classList.toggle()을 사용하여 좋아요와 싫어요 토글을 했습니다.
관련 글
'dev > javascript' 카테고리의 다른 글
| [javascript] 자바스크립트 배열 삽입 (array insert) (12) | 2023.05.23 |
|---|---|
| [javascript] 자바스크립트 배열 항목 위치 이동 (swap) (8) | 2023.05.23 |
| [javascript] 자바스크립트 배열 추가 (push) (8) | 2023.05.21 |
| [javascript] 자바스크립트 문자열 생략, 길이 제한 (truncate) (11) | 2023.05.19 |
| [javascript] 자바스크립트 마우스 커서 모양 변경 (10) | 2023.05.17 |
댓글