
const searchBox = document.querySelector("#search-box"); //input 서치박스를 지정. const cssList = document.querySelectorAll(".list ul li"); // 모든 li에 대해서 지정. const cssCount = document.querySelector(".count em"); // 서치박스 우측 전체 속성 갯수에 대해서 지정. cssList.forEach((element, index)=>{ //forEach를 이용해서 모든 li의 index를 불러온다. element.classList.add("show"); // 불러온 index에 CSS .show 클래스를 부여해준다. //밑에 있는 조건문이 적용되기 전 첫 화면에..

const searchBox = document.querySelector("#search-box"); // input 서치 박스를 지정. const cssList = document.querySelectorAll(".list ul li"); // 모든 li를 지정. searchBox.addEventListener("keyup", ()=>{ // input 서치박스를 key up 했을 때를 지정. const searchWord = searchBox.value;//사용자가 입력한 데이터 저장소 cssList.forEach(el=>{ console.log(el.dataset.name); // 입력한 데이터 저장소가 올바르게 되었는지 콘솔로그로 확인. const cssName = el.dataset.name; ..