SearchEffect - find( )

        const cssProperty = [
            {name: "all", desc: "all 속성은 CSS속성을 재설정하는데 사용할 수 있는 약식 속성입니다."},
            {name: "animation", desc: " animation 속성은 애니메이션 속성을 설정하기 위한 약식 속성입니다."},
            {name: "animation-delay", desc: "animation-delay 속성은 애니메이션이 시작되는 시간을 설정합니다."},
            {name: "animation-direction", desc: "animation-direction 속성은 애니메이션이 움직이는 방향을 설정합니다."},
            {name: "animation-duration", desc: "animation-duration 속성은 애니메이션이 움직이는 시간을 설정합니다."},
            {name: "animation-fill-mode", desc: "animation-fill-mode 속성은 애니메이션이 끝난 후의 상태를 설정합니다."},
            {name: "animation-iteration-count", desc: "animation-iteration-count 속성은 애니메이션 반복 횟수를 설정합니다."},
            {name: "nimation-play-state", desc: "animation-play-state 속성은 애니메이션의 진행 상태를 설정합니다."},
            {name: "backdrop-filter", desc: "backdrop-filter 속성은 요소 뒤에 필터효과를 설정합니다."},
            {name: "caption-side", desc: "caption-side 속성은 테이블 캡션 설정합니다."},
            {name: "margin", desc: "margin 속성은 요소의 바같쪽 여백을 설정합니다."},
            {name: "margin-bottom", desc: "margin-bottom 속성은 요소의 아래 바같쪽 여백을 설정합니다."},
            {name: "mask-border", desc: "mask-border 속성은 테두리 마스크 이미지를 요소에 적용하는 데 사용됩니다."},
            {name: "opacity", desc: "opacity 속성은 요소의 투명도를 설정합니다."},
            {name: "padding", desc: "padding 속성은 요소의 안쪽 여백을 설정합니다."},
        ]
        const searchBox = document.querySelector("#search-box");        //#search-box 변수 지정
        const cssCount = document.querySelector(".count");              //.count 변수 지정
        const cssDesc = document.querySelector(".desc");                //.desc 변수로 지정
        const cssList = document.querySelector(".list");                //.list를 변수로 지정

        //CSS 속성 값/전체 갯수 출력하기
        cssProperty.map((element, index) => {       //map를 이용해서 element와 index 불러오기
            cssCount.innerText = "전체 목록 갯수 : "+ (index + 1) +"개";
            cssList.innerHTML += "<span>"+ element.name +"</span>";
        });

        //사용자가 검색 한 값
        searchBox.addEventListener("keyup", () => {     //keyup 이벤트 지정 
            const searchWord = searchBox.value;         //서치박스에 들어오는 값(Iiput)을 변수로 전달
            // console.log(searchWord)

            findProp(searchWord);           // findProp 함수 선언하고  매개변수로 매개변수로 searchWord 전달
        });

        document.querySelectorAll(".list span").forEach(span => { 
            span.addEventListener("click", () => {           //리스트를 클릭하면 값이 설명칸에 실행
                //클릭한 데이터 값을 가져오기
                const listProp = span.innerText;				// 속성값에 입력된 값(Text)를 listProp에 저장
                findProp(listProp);			 // findProp 함수 선언하고  매개변수로 매개변수로 listProp 전달								
            })
        })
        

        function findProp(searchProp){ 		//findProp함수 생성하고 매개변수 값 전달받음
            const targetData = cssProperty.find((data) => data.name === searchProp)

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

            cssDesc.innerHTML = targetData.desc;       //설명 영역에 서치박스에 입력한 속성의 설명을 출력.
        }

charAt( ) 참조

자바스크립트

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

Search Effect