Web's study ! 지선

const cssProperty = [ {num: 5, name: "all", desc: "all 속성은 CSS 속성을 재설정하는 데 사용할 수 있는 약식 속성입니다."}, {num: 2, name: "animation", desc: "animation 속성은 애니메이션 속성을 설정하기 위한 약식 속성입니다."}, {num: 3, name: "animation-delay", desc: "animation-delay 속성은 애니메이션이 시작되는 시간을 설정합니다."}, {num: 9, name: "animation-direction", desc: "animation-direction 속성은 애니메이션이 움직이는 방향을 설정합니다."}, {num: 1, name: "animation-duration", de..

const searchBox = document.querySelectorAll(".search span"); //조회수 버튼 const cssList = document.querySelector(".list ul"); //속성 리스트 const cssCount = document.querySelector(".count em"); //속성 갯수 //목록 보여주기 let listHTML =''; //HTML에 보여줄 리스트를 전역 변수로 지정. function upDataList(list){ //목록 보여주기 함수. listHTML =''; for(const data of list){ //어디에 있는 목록인지 listHTML += `${data.name} : ${data.desc} ${data.view}`;..

const cssProperty = [ {name: "all", desc: "all 속성은 CSS 속성을 재설정하는데 사용할 수 있는 양식 속성입니다."}, {name: "animation", desc: "animation 속성은 애니메이션 사용할 수 있는 양식 속성입니다."}, {name: "animation-delay", desc: "animation-delay 속성은 애니메이션이 시작되는 시간을 설정합니다."}, {name: "animation-direction", desc: "animation-direction 속성은 애니메이션이 움직이는 방향을 설정합니다."}, {name: "animation-fill-mode", desc: "animation-fill-mode 속성은 애니메이션이 끝난 후의 상..

const searchBox = document.querySelectorAll(".search span"); //알파벳 버튼들 const cssList = document.querySelectorAll(".list ul li"); //CSS속성 리스트 const cssCount = document.querySelector(".count em") //속성 갯수 //알파벳을 클릭하면 클릭한 데이터 값을 가져와야 한다. //searchBox.addEventListener is not a function // searchBox.addEventListener("click", function(){ // alert("ddd"); // }); cssList.forEach((li, index) => { li.classL..

const searchBox = document.querySelector("#search-box");//search-box 변수에 저장한다. const cssList = document.querySelectorAll(".list ul li");//다수의 li를 변수에 저장한다. const cssCount = document.querySelector(".count em") cssList.forEach((e, index) => {//forEach를 이용해 모든 li의 index 를 불러온다. e.classList.add("show");//불러온 index에 CSS.show 클래스를 부여한다. console.log(index); cssCount.innerHTML = index + 1;//index는 0번째 부..

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 =>{//다수의 li한테 적용 //console.log(el.dataset.name) const cssName = el.dataset..