SearchEffect - sort( ) , reverse( )

 const cssProperty = [
            {num: 1, name: "align-content", desc: "align-content 속성은 콘텐츠 아이템의 상하관계 정렬 상태를 설정합니다."},
            {num: 2, name: "align-items", desc: "align-items 속성은 콘텐츠 아이템의 내부 상하관계 정렬 상태를 설정합니다."},
            {num: 3, name: "align-self", desc: "align-self 속성은 개별적인 콘텐츠 아이템의 정렬 상태를 설정합니다."},
            {num: 4, name: "all", desc: "all 속성은 요소의 속성을 초기화 또는 상속을 설정합니다."},
            {num: 5, name: "animation", desc: "animation 속성은 애니메이션과 관련된 속성을 일괄적으로 설정합니다."},
            {num: 6, name: "animation-delay", desc: "animation-delay 속성은 애니메이션 지연 시간을 설정합니다."},
            {num: 7, name: "animation-direction", desc: "animation-direction 속성은 애니메이션 움직임 방향을 설정합니다."},
            {num: 8, name: "animation-duration", desc: "animation-duration 속성은 애니메이션 움직임 시간을 설정합니다."},
            {num: 9, name: "animation-fill-mode", desc: "animation-fill-mode 속성은 애니메이션이 끝난 후의 상태를 설정합니다."},
            {num: 10, name: "animation-iteration-count", desc: "animation-iteration-count 속성은 애니메이션 반복 횟수 설정합니다."},
            {num: 11, name: "animation-name", desc: "animation-name 속성은 애니메이션 keyframe 이름을 설정합니다."},
            {num: 12, name: "animation-play-state", desc: "animation-play-state 속성은 애니메이션 진행상태를 설정합니다."},
            {num: 13, name: "animation-timing-function", desc: "animation-timing-function 속성은 애니메이션 움직임의 속도를 설정합니다."},
            {num: 14, name: "appearance", desc: "속성은 기본 양식 컨트롤이 렌더링되는 방식"},
            {num: 15, name: "backdrop-filter", desc: "backdrop-filter 속성은 배경에 그래픽 효과를 설정합니다."},
            {num: 16, name: "backface-visibility", desc: "backface-visibility 속성은 요소의 뒷면을 설정합니다."},
            {num: 17, name: "background", desc: " background 속성은 백그라운드 속성을 일괄적으로 설정합니다."},
            {num: 18, name: "background-attachment", desc: "background-attachment 속성은 배경 이미지의 고정 여부를 설정합니다."},
            {num: 19, name: "background-blend-mode", desc: "background-blend-mode 속성은 배경을 혼합했을 때의 상태를 설정합니다."},
            {num: 20, name: "background-clip", desc: "속성은 백그라운드 이미지의 위치 기준점을 설정하기 위한 속성입니다."},
            {num: 21, name: "background-color", desc: "background-color 속성은 백그라운드 색을 설정합니다."},
            {num: 22, name: "background-image", desc: "background-image 속성은 백그라운드 이미지 및 배경 속성을 설정합니다."},
            {num: 23, name: "background-origin", desc: "background-origin 속성은 백그라운드 이미지의 위치 기준점을 설정하기 위한 속성입니다."},
            {num: 24, name: "background-position", desc: "background-position 속성은 백그라운드 이미지의 위치 영역을 설정합니다."},
            {num: 25, name: "z-index", desc: "z-index 속성은 요소의 위치가 겹칠 경우 순서를 정의합니다."}
            ];
            
        const searchBox = document.querySelectorAll(".search sapn");  //버튼
        const cssList = document.querySelector(".list ul");           //속성 리스트
        const cssCount = document.querySelector(".count")             //CSS 갯수

        //데이터 출력
        const updateList = function() {		//updataList라는 함수를 만들어서 사용하고 싶을때 사용
            let listHTML = '';				// 변수listHTML 생성
            
            cssProperty.forEach((data,index) => {
                listHTML += `${data.num}. ${data.name} : ${data.desc}`;	//속성리스트 num, name, desc값
                // cssCount.textContent = `전체 목록 갯수 : ${data.num}개`; 
                cssCount.textContent = `전체 목록 갯수 : ${index + 1}개`; 	// 갯수(index)값 뽑아내서 cssCount 대입
            })

            cssList.innerHTML = listHTML;		//listHTML에 저장된 요소값들을 cssList에 대입
        }
        updateList();
        //// 반대정렬 : reverse() 
        function sortReverse(){
            cssProperty.reverse();
            updateList();
        }
        //오름차순 정렬 : sort()
        function sortSscending(){
            cssProperty.sort((a,b) => {
                return a.num - b.num
            })
            updateList();
        }
        //내림차순 정렬 : sort() a와 b를 반대로 사용
        function sortDescending(){
            cssProperty.sort((a,b) => {
                return b.num - a.num
            })
            updateList();
        }
        //알파벳 정렬(a~z) :  sort(){.localeCompare}를 사용
        function sortAlphabet(){
            cssProperty.sort((a,b) => {
                let x = a.name;
                let y = b.name;
                return x.localeCompare(y);
            })
            updateList();
        }
        //알파벳 정렬(z~a) : sort(){.localeCompare} 사용 변수x 값과 y값을 위 예제와 반대로 사용
        function sortAlphabetZ(){
            cssProperty.sort((a,b) => {
                let x = a.name;
                let y = b.name;
                return y.localeCompare(x);
            })
            updateList();
        }
        //반대로 버튼 클릭시
        document.querySelector(".btn1").addEventListener("click", () => {
            sortReverse();
        })
        //오른차순 버튼 클릭시
        document.querySelector(".btn2").addEventListener("click", () => {
            sortSscending();
        })
        //내림차순 버틀 클릭시
        document.querySelector(".btn3").addEventListener("click", () => {
            sortDescending();
        })
       
        //알파벳 정렬(a~z) 버튼 클릭시
        document.querySelector(".btn4").addEventListener("click", () => {
            sortAlphabet();
        })
          //알파벳 정렬 거꾸로(z~a) 버튼 클릭시
        document.querySelector(".btn5").addEventListener("click", () => {
            sortAlphabetZ();
        })

sort() / reverse() 참조

자바스크립트

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

Search Effect