seop's study seop's study

const cssProperty = [ // a {view: "10", name: "align-content", desc: "align-content 속성은 콘텐츠의 상하관계 정렬 상태를 정의합니다."}, {view: "15", name: "align-items", desc: "align-items 속성은 요소의 수직 방향 정렬 방식을 설정합니다."}, {view: "20", name: "align-self", desc: "align-self 속성은 콘텐츠의 정렬 상태를 정의합니다."}, {view: "23", name: "all", desc: "all 속성은 CSS 속성을 재설정하는데 사용할 수 있는 약식 속성입니다."}, {view: "28", name: "animation", desc: "anima..

const cssPorperty = [ {name: "all", desc: "all 속성은 CSS 속성을 재설정하는데 사용할 수 있는 약식 속성입니다."}, {name: "align-content", desc: "align-content 속성은 콘텐츠의 상하관계 정렬 상태를 정의합니다."}, {name: "align-items", desc: "align-items 속성은 요소의 수직 방향 정렬 방식을 설정합니다."}, {name: "align-self", desc: "align-self 속성은 콘텐츠의 정렬 상태를 정의합니다."}, {name: "background", desc: "background 속성은 색상, 이미지, 원점, 크기, 반복 등 여러 배경 스타일을 한 번에 지정합니다."}, {name:..

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

const searchBox = document.querySelector("#search-box"); //search-box 변수에 저장 const cssList = document.querySelectorAll(".list ul li"); //다수의 li를 변수에 저장 const cssCount = document.querySelector(".count em"); //전체 li갯수를 표시 cssList.forEach((element, index) => { element.classList.add("show"); cssCount.innerHTML = index + 1; }); searchBox.addEventListener("keyup", () => { //input을 클릭했을 때 이벤트 설정 const ..

const searchBox = document.querySelector("#search-box"); //search-box 변수에 저장 const cssList = document.querySelectorAll(".list ul li"); //다수의 li를 변수에 저장 const cssCount = document.querySelector(".count em"); cssList.forEach((element, index) => { element.classList.add("show"); cssCount.innerHTML = index + 1; }); searchBox.addEventListener("keyup", () => { //input를 클릭했을 때 이벤트 설정 const searchWord = s..