Gwni Lab GwniLab

const sreachBox = document.querySelectorAll(".search span"); //버튼 const cssList = document.querySelector(".list ul"); //속성 리스트 const cssCount = document.querySelector(".count"); //CSS 속성 갯수 //데이터 출력 const updateList = function(){ //데이터 출력 함수를 변수로 지정해서 재활용 하겠음. let listHTML = ''; //리스트 출력 초기값 설정. cssProperty.forEach((data,index)=>{ //forEach를 이용해서 데이터와 인덱스를 불러옴 listHTML += `${data.num}. ${data.na..

const searchBox = document.querySelectorAll(".search span"); //조회수 버튼 const cssList = document.querySelector(".list ul"); //속성 리스트 const cssCount = document.querySelector(".count em"); //속성 갯수 //목록 보여주기 let listHTML =''; //HTML에 보여줄 리스트를 전역 변수로 지정. function upDataList(list){ //목록 보여주기 함수. listHTML =''; for(const data of list){ //어디에 있는 목록인지 listHTML += `${data.name} : ${data.desc} ${data.view}`;..

const cssProperty = [ {name: "all", desc:"all 속성은 CSS 속성을 재설정하는 데 사용할 수 있는 약식 속성입니다."}, {name: "animation", desc:"animation 속성은 애니메이션 속성을 설정하기 위한 약식 속성입니다."}, {name: "animation-delay", desc:"animation-delay 속성은 애니메이션이 시작되는 시간을 설정합니다."}, . . 생략. ] const searchBox = document.querySelector("#search-box"); //서치박스를 변수로 지정 const cssCount = document.querySelector(".count"); //갯수가 출력되는 요소를 변수로 지정 const ..

const searchBox = document.querySelectorAll(".search span"); //알파벳 버튼들 const cssList = document.querySelectorAll(".list ul li"); //속성 리스트 const cssCount = document.querySelector(".count em"); //속성 갯수 //1. 처음에 모든 데이터 보여주기 cssList.forEach((li, index) => { //li(element), index(순서- 갯수) li.classList.add("show"); //모든 li를 보여준다. cssCount.innerText = index +1; //인덱스는 0번째 부터 세므로 1를 더해준다. }) //알파벳을 클릭하면 클..

const searchBox = document.querySelector("#search-box"); //input 서치박스를 지정. const cssList = document.querySelectorAll(".list ul li"); // 모든 li에 대해서 지정. const cssCount = document.querySelector(".count em"); // 서치박스 우측 전체 속성 갯수에 대해서 지정. cssList.forEach((element, index)=>{ //forEach를 이용해서 모든 li의 index를 불러온다. element.classList.add("show"); // 불러온 index에 CSS .show 클래스를 부여해준다. //밑에 있는 조건문이 적용되기 전 첫 화면에..

const searchBox = document.querySelector("#search-box"); // input 서치 박스를 지정. const cssList = document.querySelectorAll(".list ul li"); // 모든 li를 지정. searchBox.addEventListener("keyup", ()=>{ // input 서치박스를 key up 했을 때를 지정. const searchWord = searchBox.value;//사용자가 입력한 데이터 저장소 cssList.forEach(el=>{ console.log(el.dataset.name); // 입력한 데이터 저장소가 올바르게 되었는지 콘솔로그로 확인. const cssName = el.dataset.name; ..