![](http://i1.daumcdn.net/thumb/T650x650/?fname=https://blog.kakaocdn.net/dn/bzzsQC/btrtlmWqCBw/vcvhWxJcV9nkGmveXLA900/img.png)
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..
![](http://i1.daumcdn.net/thumb/T650x650/?fname=https://blog.kakaocdn.net/dn/ryqr4/btrtBOQKonz/02jOhCyKCDkN7a1se17Gf1/img.png)
highlightAll(); //highlight.js에 저장된 함수 highlightAll 실행 modal(); //custom.js에 저장된 함수 modal 실행 tabMenu(); //tabMenu.js에 저장된 함수 modal 실행 //sliderType01 const sliderWrap = document.querySelector(".slider__wrap"); //.slider__wrap을 변수(sliderWrap)에 저장 const sliderImg = document.querySelector(".slider__img"); //.slider__img를 변수(sliderImg)에 저장 const slider = document.querySelectorAll(".slider"); //.slide..
![](http://i1.daumcdn.net/thumb/T650x650/?fname=https://blog.kakaocdn.net/dn/0ezR8/btrs2m2HjBd/1lYLIom3bxZ1dK39wBz1dk/img.png)
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..
![](http://i1.daumcdn.net/thumb/T650x650/?fname=https://blog.kakaocdn.net/dn/czPYe4/btrsMAtZfMA/3lcMVBcmCh2P0oz8amHiB1/img.png)
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..
![](http://i1.daumcdn.net/thumb/T650x650/?fname=https://blog.kakaocdn.net/dn/EmZyI/btrsO3IqRas/CdGBJi5Jk1xpZNq5IfKWXk/img.png)
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..
![](http://i1.daumcdn.net/thumb/T650x650/?fname=https://blog.kakaocdn.net/dn/zubzs/btrsH93mWPm/RfIusyhbSlHFpRiLiYB5X1/img.png)
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..
![](http://i1.daumcdn.net/thumb/T650x650/?fname=https://blog.kakaocdn.net/dn/bbQIQq/btrsMz77PR4/8eaEnGiYF8aY6TkqZcq7gK/img.png)
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..