
const cssProperty = [ {num:"1", name:"all", desc:"all 속성은 CSS 속성을 재설정하는데 사용할 수 있는 약식 속성입니다."}, {num:"2", name:"animation", desc:"animation 속성은 애니메이션 속성을 설정하기 위한 약식 속성입니다."}, {num:"3", name:"animation-delay", desc:"animation-delay 속성은 애니메이션이 시작되는 시간을 설정합니다."}, //중략... ] const searchBox = document.querySelectorAll(".search span"); //검색버튼(#search_box)을 변수(searchBox)에 저장 const cssList = document.que..

const cssProperty = [ {name: "accent-color", desc: "accent-color 속성은 일부 사용자 인터페이스 컨트롤의 액센트 색상을 설정합니다."}, {name: "align-content", desc: "align-content 속성은 콘텐츠 항목 사이 및 주위의 공간 분포를 설정합니다."}, {name: "align-items", desc: "align-items 속성은 모든 직계 자식의 align-self 값을 그룹으로 설정합니다."}, //중략... ] const searchBox = document.querySelectorAll(".search span"); //검색버튼(#search_box)을 변수(searchBox)에 저장 const cssList = d..

const cssProperty = [ {name: "accent-color", desc: "accent-color 속성은 일부 사용자 인터페이스 컨트롤의 액센트 색상을 설정합니다."}, {name: "align-content", desc: "align-content 속성은 콘텐츠 항목 사이 및 주위의 공간 분포를 설정합니다."}, {name: "align-items", desc: "align-items 속성은 모든 직계 자식의 align-self 값을 그룹으로 설정합니다."}, //중략... ] const searchBox = document.querySelector("#search_box"); //input박스(#search_box)를 변수(searchBox)에 저장 const cssCount = d..

const searchBox = document.querySelectorAll(".search span"); //다수의 검색목록(.search span)를 변수(searchBox)에 저장 const cssList = document.querySelectorAll(".list ul li"); //다수의 리스트를 변수(cssList)에 저장 const cssCount = document.querySelector(".count em"); //전체 속성 갯수(.count)를 변수(cssCount)에 저장 //모든 데이터 보이기 cssList.forEach((li, index) => { li.classList.add("show"); //초기값으로 cssList에 클래스 add("show")를 실행 cssCount..

const searchBox = document.querySelector("#search_box"); //input(#search_box)를 변수(searchBox)에 저장 const cssList = document.querySelectorAll(".list ul li"); //다수의 li를 변수(cssList)에 저장 const cssCount = document.querySelector(".count em"); //전체 속성 갯수(.count)를 변수(cssCount)에 저장 cssList.forEach((eleement, index) => { eleement.classList.add("show"); //초기값으로 cssList에 클래스 add("hide")를 실행 cssCount.innerHTML..

const searchBox = document.querySelector("#search_box"); //input(#search_box)를 변수(searchBox)에 저장 const cssList = document.querySelectorAll(".list ul li"); //다수의 li를 변수(cssList)에 저장 searchBox.addEventListener("keyup", () => { //searchBox에 keyup 했을 때 이벤트(addEventListener) 실행 const searcWord = searchBox.value; //input(searchBox)에 사용자가 입력한 데이터를 변수(searcWord)에 저장 cssList.forEach(el => { const cssName..