<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<script
src="https://kit.fontawesome.com/1a36b4460f.js"
crossorigin="anonymous"
></script>
<script>
window.onload = function () {
let list = document.getElementById("list");
list.addEventListener("click", function (e) {
if (e.target.tagName == "UL") {
return;
}
let iconElement =
e.target.tagName == "LI" ? e.target.children[0] : e.target;
iconElement.classList.toggle("fa-regular");
iconElement.classList.toggle("fa-solid");
});
};
</script>
<style>
li {
font-size: 50px;
user-select: none;
}
</style>
</head>
<body>
<ul id="list">
<li>list1<i class="fa-regular fa-heart"></i></li>
<li>list2<i class="fa-regular fa-heart"></i></li>
<li>list3<i class="fa-regular fa-heart"></i></li>
</ul>
</body>
</html>font-awesome 아이콘 이용하기
<script src="https://kit.fontawesome.com/1a36b4460f.js" crossorigin="anonymous"></script>
이거 복사 붙여넣기 하면 된다.
font-awesome 홈페이지 : https://fontawesome.com/
ul 태그에 스타일 전염되는 거 방지하기
window.onload = function () { let list = document.getElementById("list"); list.addEventListener("click", function (e) { if (e.target.tagName == "UL") { return; } // 이 부분임 let iconElement = e.target.tagName == "LI" ? e.target.children[0] : e.target; iconElement.classList.toggle("fa-regular"); iconElement.classList.toggle("fa-solid"); }); };
드래그했을 때 리스트가 파랗게 하이라이트 되는 거 방지하기
<style> li { font-size: 50px; user-select: none; } </style>
user-select 속성을 none으로 서정해주면 됨
나는 컴퓨터를 좋아함