SearchEffect04 - find()

        const searchBox = document.querySelector('#search-box');
        const cssCount = document.querySelector('.count');
        const cssDesc = document.querySelector('.desc');
        const cssList = document.querySelector('.list');

        cssProperty.map((ele, idx) => {
            cssCount.innerText = "전체 목록 갯수 : " + (idx + 1) + "개";
            cssList.innerHTML += "" + ele.name + "";
        })

        searchBox.addEventListener("keyup", () => {
            const searchWord = searchBox.value;
            findProp(searchWord);
        })

        function findProp(searchProp) {
            const targetData = cssProperty.find((data) => data.name === searchProp)

            //찾는 데이터가 없을 때
            if(targetData == null){
                cssDesc.textContent = "해당 속성은 존재하지 않습니다. 다시 검색해주세요!";
                return
            }
            cssDesc.innerHTML = targetData.desc;

        }
        document.querySelectorAll('.list span').forEach( () => addEventListener('click', (el) => {
            const listProp = el.target.innerText;
            findProp(listProp);
        }));