Gentleman'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 cssProperty = [ {view: "10", name: "all", desc: "all 속성은 CSS 속성을 재설정하는 데 사용할 수 있는 약식 속성입니다."}, {view: "20", name: "animation", desc: "animation 속성은 애니메이션 속성을 설정하기 위한 약식 속성입니다."}, {view: "13", name: "animation-delay", desc: "animation-delay 속성은 애니메이션이 시작되는 시간을 설정합니다."}, {view: "19", name: "animation-direction", desc: "animation-direction 속성은 애니메이션이 움직이는 방향을 설정합니다."}, {view: "24", name: "ani..

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-duration", desc: "animation-duration 속성은 애니메이션이 움직이는 ..

const searchBox = document.querySelectorAll(".search span"); // 알파벳 버튼들 const cssList = document.querySelectorAll(".list ul li"); // 속성 리스트 const cssCount = document.querySelector(".count em"); // 속성 갯수 const reset = document.querySelector(".search .reset")// 리셋(all) 버튼 // 모든 데이터 보이기 cssList.forEach((ele, index) => { ele.classList.add("show"); cssCount.innerHTML = index + 1; }); // 버튼을 클릭하면 클릭한 ..

const searchBox = document.querySelector("#search-box");// searchBox 변수에 저장 const cssList = document.querySelectorAll(".list ul li");// 다수의 li를 cssList에 저장 const cssCount = document.querySelector(".count em");// em을 cssCount에 저장 cssList.forEach((element, index) => {// cssList의 각각 요소값에 적용 element.classList.add("show");// 각각의 요소의 클래스 show 추가 cssCount.innerHTML = index + 1;// cssCount 에 인덱스값 + 1 입력..

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.d..