코딩 공부 코딩 공부

const cssProperty = [ //'CSS 속성 설명' 데이터를 cssProperty 배열에 객체 형태로 저장 //a {num:1, name:"all", desc:"all 속성은 CSS 속성을 재설정하는데 사용할 수 있는 약식 속성입니다."}, {num:2, name:"animation", desc:"animation 속성은 애니메이션 속성을 설정하기 위한 약식 속성입니다."}, {num:3, name:"animation-delay", desc:"animation-delay 속성은 애니메이션이 시작되는 시간을 설정합니다."}, {num:4, name:"animation-direction", desc:"animation-direction 속성은 애니메이션이 움직이는 방향을 설정합니다."}, {nu..

const cssProperty = [ //'CSS 속성 설명' 데이터를 cssProperty 배열에 객체 형태로 저장 //a {view:9, name:"all", desc:"all 속성은 CSS 속성을 재설정하는데 사용할 수 있는 약식 속성입니다."}, {view:20, name:"animation", desc:"animation 속성은 애니메이션 속성을 설정하기 위한 약식 속성입니다."}, {view:30, name:"animation-delay", desc:"animation-delay 속성은 애니메이션이 시작되는 시간을 설정합니다."}, {view:40, name:"animation-direction", desc:"animation-direction 속성은 애니메이션이 움직이는 방향을 설정합니다...

const cssProperty = [ //'CSS 속성 설명' 데이터를 cssProperty 배열에 객체 형태로 저장 {name: "all", desc: "all 속성은 CSS 속성을 재설정하는데 사용할 수 있는 약식 속성입니다."}, {name: "animation", desc: "animation 속성은 애니메이션 속성을 설정하기 위한 약식 속성입니다."}, ]; const searchBox = document.querySelector("#search-box"); //searchBox에 id="search-box" 태그 저장 const cssCount = document.querySelector(".count"); //cssCount에 class="count" 태그 저장 const cssDesc =..

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"); //변수 searchBox에 #search-box(input태그)담는다. const cssList = document.querySelectorAll(".list ul li"); //변수 cssList에 li태그(css속성저장된 li태그들) 담는다. const cssCount = document.querySelector(".count em") //변수 csscount에 em태그(전체속성갯수나타내는태그) 담는다. cssList.forEach((e, index) => { //문서 내 li태그들을 하나씩 순회한다. e.classList.add("show"); //모든 li태그에 class = "show"를 추가..

searchBox.addEventListener("keyup", () => { //input를 클릭했을 때 이벤트 설정 const searchWord = searchBox.value; //사용자가 입력한 데이터 저장소 console.log(searchWord); //사용자가 입력한 데이터 저장소 변수에 저장 cssList.forEach(el => { //다수의 li을 const cssName = el.dataset.name; //CSS 속성 값을 변수에 저장 if(cssName.indexOf(searchWord)){ //사용자가 입력한 값에 데이터가 있는지 확인 el.classList.add("hide"); //데이터가 있으면 클래스 hide를 추가 } else { el.classList.remove("..