SearchEffect - filter()

        const cssProperty = [
            {view: "10", name: "all", desc: "all 속성은 CSS속성을 재설정하는데 사용할 수 있는 약식 속성입니다."},
            {view: "20", name: "animation", desc: " animation 속성은 애니메이션 속성을 설정하기 위한 약식 속성입니다."},
            {view: "40", name: "animation-delay", desc: "animation-delay 속성은 애니메이션이 시작되는 시간을 설정합니다."},
            {view: "10", name: "animation-direction", desc: "animation-direction 속성은 애니메이션이 움직이는 방향을 설정합니다."},
            {view: "50", name: "animation-duration", desc: "animation-duration 속성은 애니메이션이 움직이는 시간을 설정합니다."},
            {view: "30", name: "animation-fill-mode", desc: "animation-fill-mode 속성은 애니메이션이 끝난 후의 상태를 설정합니다."},
            {view: "20", name: "animation-iteration-count", desc: "animation-iteration-count 속성은 애니메이션 반복 횟수를 설정합니다."},
            {view: "10", name: "nimation-play-state", desc: "animation-play-state 속성은 애니메이션의 진행 상태를 설정합니다."},
            {view: "50", name: "backdrop-filter", desc: "backdrop-filter 속성은 요소 뒤에 필터효과를 설정합니다."},
            {view: "50", name: "caption-side", desc: "caption-side 속성은 테이블 캡션 설정합니다."},
            {view: "30", name: "margin", desc: "margin 속성은 요소의 바같쪽 여백을 설정합니다."},
            {view: "30", name: "margin-bottom", desc: "margin-bottom 속성은 요소의 아래 바같쪽 여백을 설정합니다."},
            {view: "40", name: "mask-border", desc: "mask-border 속성은 테두리 마스크 이미지를 요소에 적용하는 데 사용됩니다."},
            {view: "20", name: "opacity", desc: "opacity 속성은 요소의 투명도를 설정합니다."},
            {view: "10", name: "padding", desc: "padding 속성은 요소의 안쪽 여백을 설정합니다."}
        ];
        
        const searchBox = document.querySelectorAll(".search span");	 //조회수 버튼 변수지정
        const cssList = document.querySelector(".list ul");				//list 변수 지정
        const cssCount = document.querySelector(".conut em");			//총갯수 변수지정
        let listHtml = "";		//전역변수 설정

        //목록 보여주기
        function updateList(list) {
            let listHtml = "";
            
            for(const data of list) {
                listHtml += `<li>${data.name} : ${data.desc} <span>${data.view}</span></li>`;	//템플릿 문자열 사용
            }
            cssList.innerHTML = listHtml; //매개변수 함수 설정
        }
        updateList(cssProperty); 함수 cssProperty 사용
        
        //버튼 클릭하기
        searchBox.forEach(span => {	
            span.addEventListener("click", () => {		//버튼을 클릭시 실행하는 이벤트
                const target = span.dataset.view;		//HTML의 view값
                const filterList = cssProperty.filter(data => data.view >= target)   //filter()를 사용하여 view값을 변환

                updateList(filterList);  //함수 filterList 사용
            });
        })

        //변수(데이터 저장 + 변경 + 추가 + 전역/지역)
        //배열(순차적으로 여러개 데이터저장)
        //객체(데이터 저장(키와 값))
        //함수(실행문 집합체, 재활용)

        //CSS 리스트 출력하기
        //function upDataList(){
            //let list = "";

            // for(let i = 0; i < cssProperty.length; i++) {                              //for문으로 name값 변수(list)에 전달
            //     list += "<li>"+ cssProperty[i].name+"</li>";
            // };

            // cssProperty.forEach((data) => {
            //     list += "<li>"+ data.name+"</li>";							//forEach문으로 name값 변수(list)에 전달
            // });

            // cssProperty.map((data) => {
            //     list += "<li>"+ data.name+"</li>"; 							//map으로 name값 리스트에 변수(list)전달
            // });

            //for(let data of cssProperty) {													
           	//	  list += "<li>"+ data.name + "</li>";							//forof문으로 name값 리스트에 전달
            //    list += `<li>${data.name} : ${data.desc} : <span>${data.view}</span>`;		// forof문을 사용하고 탬플릿 문자열을 사용하여 변수(list)에 name, desc, view 값 전달
            // }

            //cssList.innerHTML = list;   //변수(list)값을 cssList로 출력 
        //}
        //upDataList();

filter( ) 참조

자바스크립트

 

 

https://parkjongho1.github.io/webs_ho/javascript/effect/searchEffect05.html

Search Effect