![](http://i1.daumcdn.net/thumb/T650x650/?fname=https://blog.kakaocdn.net/dn/cz1myM/btrsIaBeWPO/T2kjaXgXu2yWOqGrFFUGak/img.jpg)
const searchBox = document.querySelector("#search-box"); //변수 searchBox에 #search-box(input태그)담는다. const cssList = document.querySelectorAll(".list ul li"); //변수 cssList에 li태그(css속성저장된 li태그들) 담는다. const cssCount = document.querySelector(".count em") //변수 csscount에 em태그(전체속성갯수나타내는태그) 담는다. cssList.forEach((e, index) => { //문서 내 li태그들을 하나씩 순회한다. e.classList.add("show"); //모든 li태그에 class = "show"를 추가..
![](http://i1.daumcdn.net/thumb/T650x650/?fname=https://blog.kakaocdn.net/dn/WU97a/btrsHGAu1WI/IylYqSyJ0H5Jnq6FCobv70/img.jpg)
searchBox.addEventListener("keyup", () => { //input를 클릭했을 때 이벤트 설정 const searchWord = searchBox.value; //사용자가 입력한 데이터 저장소 console.log(searchWord); //사용자가 입력한 데이터 저장소 변수에 저장 cssList.forEach(el => { //다수의 li을 const cssName = el.dataset.name; //CSS 속성 값을 변수에 저장 if(cssName.indexOf(searchWord)){ //사용자가 입력한 값에 데이터가 있는지 확인 el.classList.add("hide"); //데이터가 있으면 클래스 hide를 추가 } else { el.classList.remove("..