search effect05 - filter()

 //데이터를 변수(명)에 저장
        const cssProperty = [ //CSS 속성 목록
            {view: "10", name: "all", desc: "all 속성은 CSS 속성을 재설정하는데 사용할 수 있는 약식 속성입니다."},
            {view: "20", name: "animation", desc: "animation 속성은 애니메이션 속성을 설정하기 위한 약식 속성입니다."},
            {view: "13", name: "animation-delay", desc: "animation-delay 속성은 애니메이션이 시작되는 시간을 설정합니다."},
            {view: "40", name: "animation-direction", desc: "animation-direction 속성은 애니메이션이 움직이는 방향을 설정합니다."},
            {view: "20", name: "animation-duration", desc: "animation-duration 속성은 애니메이션이 움직이는 시간을 설정합니다."},
            {view: "40", name: "animation-fill-mode", desc: "animation-fill-mode 속성은 애니메이션이 끝난 후의 상태를 설정합니다."},
            {view: "15", name: "animation-iteration-count", desc: "animation-iteration-count 속성은 애니메이션 반복 횟수를 설정합니다."},
            {view: "14", name: "animation-name", desc: "animation-name 속성은 애니메이션 키프레임 이름을 설정합니다."},
            {view: "30", name: "animation-play-state", desc: "animation-play-state 속성은 애니메이션의 진행상태를 설정합니다."},
            {view: "50", name: "backdrop-filter", desc: "backdrop-filter 속성은 요소 뒤에 필터효과를 설정합니다."},
            {view: "49", name: "backface-visibility", desc: "backface-visibility 속성은 요소 뒷면 출력 여부 설정합니다."},
            {view: "20", name: "caption-side", desc: "caption-side 속성은 테이블 caption의 위치를 설정합니다."},
            {view: "40", name: "direction", desc: "direction 속성은 문장의 방향을 설정합니다."},
            {view: "15", name: "filter", desc: "filter 속성은 그래픽 효과를 설정합니다."},
            {view: "13", name: "flex", desc: "flex 속성은 콘텐츠의 성질을 flex로 정의합니다."},
            {view: "15", name: "grid-template-columns", desc: "grid-template-columns 속성은 가로 컬럼의 크기와 위치 설정합니다."},
        ];

        // 변수 정의
        const searchBox = document.querySelectorAll(".search span");  //알파벳 버튼들  //input 박스   //1.클릭 이벤트 - 다중(a-h:span):querySelectorAll, forEach
        const cssList = document.querySelector(".list ul"); //속성 리스트 - 다중
        const cssCount = document.querySelector(".count em")      //속성 갯수

        //각각의 버튼을 클릭했을 때
        searchBox.forEach(span => {
            span.addEventListener("click", () => {
                alert("dd")
            })
        });

    //CSS 리스트 출력하기 - 데이터 뿌려주기
    function upDataList(){
            let list = "";
            for(let data of cssProperty){
                list += `${data.name}: ${data.desc} ${data.view}`
            }
            cssList.innerHTML = list;
        }
        upDataList()