
const cssProperty = [ {num: 1, name: "align-content", desc: "align-content 속성은 콘텐츠 아이템의 상하관계 정렬 상태를 설정합니다."}, {num: 2, name: "align-items", desc: "align-items 속성은 콘텐츠 아이템의 내부 상하관계 정렬 상태를 설정합니다."}, {num: 3, name: "align-self", desc: "align-self 속성은 개별적인 콘텐츠 아이템의 정렬 상태를 설정합니다."}, {num: 4, name: "all", desc: "all 속성은 요소의 속성을 초기화 또는 상속을 설정합니다."}, {num: 5, name: "animation", desc: "animation 속성은 애니메이..

const cssProperty = [ {view: "10", name: "all", desc: "all 속성은 CSS속성을 재설정하는데 사용할 수 있는 약식 속성입니다."}, {view: "20", name: "animation", desc: " animation 속성은 애니메이션 속성을 설정하기 위한 약식 속성입니다."}, {view: "40", name: "animation-delay", desc: "animation-delay 속성은 애니메이션이 시작되는 시간을 설정합니다."}, {view: "10", name: "animation-direction", desc: "animation-direction 속성은 애니메이션이 움직이는 방향을 설정합니다."}, {view: "50", name: "anim..

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"); //속성 갯수 변수에 저장 //모든 데이터 보이기 cssList.forEach((li, index) => { //리스트에 element, index를 정의 li.classList.add("show"); //리스트에 show가 붙은 이벤트 추가 cssCount.innerHTML = index + 1; //총 갯수 카운트 }) //알파벳을 클릭하..

const searchBox = document.querySelector("#search-box"); //search-box를 변수에 저장 const cssList = document.querySelectorAll(".list ul li"); //다수의 li를 변수에 저장 searchBox.addEventListener("keyup", () => { // input 박스를 클릭했을 때 이벤트 설정 const searchWorld = searchBox.value; // 사용자가 입력한 데이터 저장소 변수에 저장 //console.log(searchWorld); cssList.forEach(el => { //다수의 li를 console.log(el.dataset.name) const cssName = el...

const searchBox = document.querySelector("#search-box");//search-box를 변수에 저장 const cssList = document.querySelectorAll(".list ul li");//다수의 li를 변수에 저장 const cssCount = document.querySelector(".count em");//cssCount를 em에 저장 cssList.forEach((element, index) => {//리스트에 element, index를 정의 element.classList.add("show");//리스트에 show가 붙은 이벤트 추가 cssCount.innerHTML = index + 1;//총 갯수 카운트 증가 }); searchBox...