searchEffect06 - sort()

{
  const searchBox = document.querySelectorAll(".search span")     //버튼
        const cssList = document.querySelector(".list ul")          //속성 리스트
        const cssCount = document.querySelector(".count")       //css 갯수

        //데이터 출력

        const updataList = function() {
            let listHTML = '';

            cssProperty.forEach((data, index) => {
                listHTML += `${data.num}. ${data.name} : ${data.desc}`;        //li목록 보이게
                cssCount.innerHTML = `전체 목록 갯수 : ${index+1}개`;  //전체목록갯수 보이게
            })
            cssList.innerHTML = listHTML
        }
        updataList();

        //반대 정렬
        function reverse(){
            cssProperty.reverse()
        updataList();
        }

        //오른차순 정렬
        function sortAscending(){
            cssProperty.sort((a,b) => {
                return a.num - b.num;
            })
        updataList();
        }
        //내림차순 정렬
        function sortDescending(){
            cssProperty.sort((a,b) => {
                return b.num - a.num;
            })
        updataList();
        }
        //알파벳 정렬 (a~z)
        function sortAlphabet(){
            cssProperty.sort((a,b)=>{
                let x = a.name;
                let y = b.name;
                return x.localeCompare(y);
            })
        updataList();
        }
        //알파벳 정렬 (z~a)
        function sortAlphabetZ(){
            cssProperty.sort((a,b)=>{
                let x = a.name;
                let y = b.name
                return y.localeCompare(x);
        })
        updataList();
     }

        //반대로
        document.querySelector(".btn1").addEventListener("click", ()=> {
            reverse()
        })
        //오른차순 버튼 
        document.querySelector(".btn2").addEventListener("click", ()=>{
            sortAscending();
        })
        //내림차순 버튼 클릭시
        document.querySelector(".btn3").addEventListener("click", ()=>{
            sortDescending();
        })

        //알바펫 정렬 (a~z)
        document.querySelector(".btn4").addEventListener("click", ()=>{
            sortAlphabet();
        })

        //알파벳 정렬(z~a)
        document.querySelector(".btn5").addEventListener("click", ()=> {
            sortAlphabetZ();
        })
}

sort() 참고