webplacidcy

const cssProperty = [ {num: 1, name:"all", desc: "CSS 속성을 재설정하는데 사용하는 약식 속성이다"}, {num: 2, name:"animation", desc: "애니메이션 속성을 설정하기 위한 통합 속성이다"}, {num: 3, name:"animation-delay", desc: "애니메이션이 시작되는 시간을 설정한다"}, {num: 4, name:"animation-direction", desc: "애니메이션이 움직이는 방향을 설정한다"}, {num: 5, name:"animation-fill-mode", desc: "애니메이션이 실행 중인 시간 외에 적용되는 값을 정의한다"}, {num: 6, name:"animation-iteration-count", ..

const cssProperty = [ {view:"10", name:"all", desc: "CSS 속성을 재설정하는데 사용하는 약식 속성이다"}, {view:"10", name:"animation", desc: "애니메이션 속성을 설정하기 위한 통합 속성이다"}, {view:"10", name:"animation-delay", desc: "애니메이션이 시작되는 시간을 설정한다"}, {view:"10", name:"animation-direction", desc: "애니메이션이 움직이는 방향을 설정한다"}, {view:"10", name:"animation-fill-mode", desc: "애니메이션이 실행 중인 시간 외에 적용되는 값을 정의한다"}, {view:"10", name:"animation-..

// html 태그로 직접 입력하지 않고 배열 안에 객체를 선언해서 span 태그를 자바스크립트로 추가 const cssProperty = [ {name: "all", desc: "all 속성은 CSS 속성을 재설정하는데 사용하는 약식 속성이다"}, {name: "animation", desc: "animation 속성은 애니메이션 속성을 설정하기 위한 통합 속성이다"}, {name: "animation-delay", desc: "animation 속성은 애니메이션이 시작되는 시간을 설정한다"}, {name: "animation-direction", desc: "animation-direction 속성은 애니메이션이 움직이는 방향을 설정한다"}, {name: "animation-fill-mode", de..

const searchBox = document.querySelectorAll(".search span"); // search 클래스 안의 알파벳 버튼 const cssList = document.querySelectorAll(".list ul li"); // 속성 목록(li 태그) const cssCount = document.querySelector(".count em"); // 속성 개수 // 모든 데이터 보여주기 cssList.forEach((li, index) => {// css 속성 목록에 있는 데이터들을 전부 접근 li.classList.add("show");// 속성 목록 전부에 show 클래스 이름 추가 cssCount.innerHTML = index + 1;// css 속성 개수를 배열..

const searchBox = document.querySelector("#search-box"); // 사용자의 입력 칸에 대한 태그의 search-box 아이디 이름을 불러온다 const cssList = document.querySelectorAll(".list ul li"); // li의 data-name(검색할 속성의 데이터) 값 const cssCount = document.querySelector(".count em"); // 전체 속성의 개수 cssList.forEach((element, index) => { // 검색할 전체 속성의 데이터(element), 속성이 저장된 값의 배열 인덱스(index) element.classList.add("show"); // 요소에 show 클래스 이..

const searchBox = document.querySelector("#search-box"); // 사용자의 입력칸에 해당하는 태그의 id(search-box)를 불러와 입력 이벤트를 저장 const cssList = document.querySelectorAll(".list ul li"); // li의 data-name(검색할 데이터 이름) searchBox.addEventListener("keyup", () => { // 키를 눌렀다가 떼었을때 이벤트 const searchWord = searchBox.value; // 사용자가 입력한 데이터를 searchWord 변수에 저장 cssList.forEach(ele => {// cssList의 요소들(찾을 데이터 이름)을 foreach문으로 접근 ..