search effect06 - sort()를 이용하여 내림/오름차순 검색하기 (완료)

        //데이터를 변수(명)에 저장
        const cssProperty = [ //CSS 속성 목록
            //a
            {num:1, name:"all", desc:"all 속성은 CSS 속성을 재설정하는데 사용할 수 있는 약식 속성입니다."},
            {num:2, name:"animation", desc:"animation 속성은 애니메이션 속성을 설정하기 위한 약식 속성입니다."},
            {num:3, name:"animation-delay", desc:"animation-delay 속성은 애니메이션이 시작되는 시간을 설정합니다."},
            {num:4, name:"animation-direction", desc:"animation-direction 속성은 애니메이션이 움직이는 방향을 설정합니다."},
            {num:5, name:"animation-duration", desc:"animation-duration 속성은 애니메이션이 움직이는 시간을 설정합니다."},
            {num:6, name:"animation-fill-mode", desc:"animation-fill-mode 속성은 애니메이션이 끝난 후의 상태를 설정합니다."},
            {num:7, name:"animation-iteration-count", desc:"animation-iteration-count 속성은 애니메이션 반복 횟수를 설정합니다."},
            {num:8, name:"animation-name", desc:"animation-name 속성은 애니메이션 키프레임 이름을 설정합니다."},
            {num:9, name:"animation-play-state", desc:"animation-play-state 속성은 애니메이션의 진행상태를 설정합니다."},
            {num:10, name:"animation-timing-function", desc:"animation-timing-function 속성은 애니메이션 움직임의 속도를 설정합니다."},
            {num:11, name:"appearance", desc:"appearance 속성은 기본 양식 컨트롤이 렌더링되는 방식을 제어합니다."}
        ];

        //변수 설정
        const seacrhBox = document.querySelectorAll(".search span");    //버튼
        const cssList = document.querySelector(".list ul");             //속성 리스트
        const cssCount = document.querySelector(".count")               //css 속성 갯수

        //1~100까지 for을 이용해서 출력하기
        // for(let i=2; i<=100; i+=2){ //짝수로 출력
        //     console.log(i)
        // };

        //데이터 출력
        const  updateList = function(){
            let listHTML = '';

            //forEach cssProperty name값을 출력하세요!
            // cssProperty.forEach(data => {
            //     listHTML += `${data.name}`;
            // })
            // cssList.innerHTML = listHTML;

            cssProperty.forEach(data => {
                //CSS속성 리스트 출력
                listHTML += `${data.num}. ${data.name} : ${data.desc}`;
                //전체 (리스트) 갯수 출력하기
                cssCount.innerHTML = `전체 목록 갯수 : ${data.num}개`
            })
            cssList.innerHTML = listHTML;  //화면에 출력하기

        }
        updateList();


        //배열 메서드 - sort()
        //정렬대상: cssProperty

        //반대 정렬
        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();
        });