searchEffect04 - find()

   // html 태그로 직접 입력하지 않고 배열 안에 객체를 선언해서 span 태그를 자바스크립트로 추가
   const cssProperty = [
            {name: "all", desc: "all 속성은 CSS 속성을 재설정하는데 사용하는 약식 속성이다"},
            {name: "animation", desc: "animation 속성은 애니메이션 속성을 설정하기 위한 통합 속성이다"},
            {name: "animation-delay", desc: "animation 속성은 애니메이션이 시작되는 시간을 설정한다"},
            {name: "animation-direction", desc: "animation-direction 속성은 애니메이션이 움직이는 방향을 설정한다"},
            {name: "animation-fill-mode", desc: "animation-fill-mode 속성은 애니메이션이 실행 중인 시간 외에 적용되는 값을 정의한다"},
            {name: "animation-iteration-count", desc: "animation-iteration-count 속성은 애니메이션이 중지되기 전에 애니메이션의 주기가 재생되는 횟수를 지정하는 데 사용된다"},
            {name: "backdrop-filter", desc: "CSS를 사용하여 요소 뒤의 콘텐츠에 필터 효과를 적용할 수 있다"},
            {name: "backface-visibility", desc: "backface-visibility 속성은 뷰어를 향할 때 변형된 요소의 뒷면이 보이는지 여부를 결정한다"},
            {name: "caption-side", desc: "caption-side 속성은 테이블 자체에 대한 테이블 캡션(caption)의 위치를 지정한다 캡션이 배치될테이블의 어느 쪽에 있는지 지정한다"},
            {name: "flex", desc: "요소의 배치에 대한 전체적인 설정"},
            {name: "grid", desc: "요소들을 격자 모양으로 나누어 설정한다, "},
            {name: "justify-content", desc: "요소들을 가로축(중심축)으로 정렬한다"},
            {name: "left", desc: "요소의 왼쪽 위치를 설정한다"},
            {name: "margin", desc: "요소의 바깥쪽 여백 크기를 설정한다"}
        ];

        const searchBox = document.querySelector("#search-Box");            // 검색 창에 대한 정보
        const cssCount = document.querySelector(".count");                  // css 요소의 개수 부분
        const cssDesc = document.querySelector(".desc");                    // css 속성 설명 부분
        const cssList = document.querySelector(".list");                    // css 속성 목록

        cssProperty.map((element, index) => {                               // css 이름과 속성이 저장되어 있는 배열의 요소와 인덱스 접근
            cssCount.innerText = "전체 목록 개수 " + (index + 1) + "개";     // css 속성 개수(인덱스 수)를 텍스트로 사이트에 표시 
            cssList.innerHTML += "<span>"+ element.name +"</span>";         // span 태그 추가, 속성의 이름 표시
        });

        searchBox.addEventListener("keyup", () => {                         // 사용자가 검색할 값을 입력한 뒤(키를 눌렀다가 떼었을때)
            const searchWord = searchBox.value;                             // 사용자가 검색할 값을 searchWord 변수에 저장

            findProperty(searchWord);                                           // 입력한 속성값을 찾는 함수 실행
        });

        document.querySelectorAll(".list span").forEach(span => {           // css 속성 버튼에 대한 태그들에 접근
            span.addEventListener("click", () => {                          // 버튼을 클릭하는 이벤트

                const listProperty = span.innerText;                        // span 태그의 속성 이름을 listProperty에 저장
                findProperty(listProperty);                                     // 클릭한 속성 이름을 찾는다
            });
        });

        function findProperty(searchProperty) {
            const targetData = cssProperty.find((data) => data.name === searchProperty);    // css 속성 정보가 들어있는 배열에서 찾는 값이 들어 있는지 확인
            																				//(같은 값이 있으면 반환, 없으면 undefined)
              
            if(targetData == null) {                                                        // 찾는 데이터가 없을때
                cssDesc.textContent = "해당 속성은 존재하지 않습니다, 다시 검색해 주세요";      // 해당 속성이 존재하지 않는다는 텍스트 표시
                return;                                                                     // if문 종료
            }

            cssDesc.innerHTML = targetData.desc;                                            // css 설명에 찾을 값을 저장(.list 태그에 설명 값을 표시)
        }

find() 참고