seungbostoryhappy

https://boseungdl.github.io/webs_class/javascript/effect/searchEffect06.html const searchBox =document.querySelector(".search span"); //버튼 const cssList = document.querySelector(".list ul"); //속성 리스트 const cssCount = document.querySelector(".count") //css 갯수 //데이터 출력 const updateList = function (){ let listHTML = ''; // for(let i=0; i { listHTML += `${data.num}. ${data.name} : ${data.desc}`; cou..

https://boseungdl.github.io/webs_class/javascript/effect/searchEffect05.html const searchBox = document.querySelectorAll(".search span"); //모든 span 태그에 대해 const cssList = document.querySelector(".list ul"); //ul에 대해 const cssCount = document.querySelector(".count em"); //em에 대해 listHTML = ""; //목록 보여주기 //리스트가 뜨기 위해서는 리스트가 있어야한다. 리스트를 만들어주고 넣을 위치에 집어 넣어줘야한다. function updataList(list){ //updataLis..

https://boseungdl.github.io/webs_class/javascript/effect/searchEffect04.html const searchBox = document.querySelector("#search-box"); //검색박스 const cssCount = document.querySelector(".count"); //전체 목록 갯수 const cssDesc = document.querySelector(".desc"); //css 설명 영역 const cssList = document.querySelector(".list"); //css 속성 리스트 //css 속성 값 출력하기 cssProperty.map((element, index) => { //cssProperty 안의 e..

https://boseungdl.github.io/webs_class/javascript/effect/searchEffect03.html const searchBox = document.querySelectorAll(".search span"); //알파벳 버튼들 const cssList = document.querySelectorAll(".list ul li"); //속성 리스트 const cssCount = document.querySelector(".count em"); //속성 갯수 //모든 데이터 보이기 cssList.forEach((li, index) => { //모든 li값에대해 li.classList.add("show"); //li의 classlist에 add클래스추가 cssCount.in..

https://boseungdl.github.io/webs_class/javascript/effect/searchEffect02.html const searchBox = document.querySelector("#search-box"); //#seachbox 선택 const cssList = document.querySelectorAll(".list ul li"); //.list ul li 모두선택 const cssCount = document.querySelector(".count em"); //.count em 선택 cssList.forEach((element, index) => {//cssList에 있는 모든 li태그에 show 클래스를 추가하고 element.classList.add("show"..

https://boseungdl.github.io/webs_class/javascript/effect/searchEffect01.html const searchBox = document.querySelector("#search-box");//search-box 변수에 저장 const cssList = document.querySelectorAll(".list ul li");//다수의 li를 변수에 저장 searchBox.addEventListener("keyup", () => {//input 클릭했을 때 이벤트 설정 const searchWord = searchBox.value;//사용자가 입력한 데이터 저장소 변수에 저장 //console.log(searchWord); cssList.forEach(el..