Search Effect 04

Search Effect04

이번 시간에는 find()를 활용하여 만든 검색 프로그램에 대해 알아보겠습니다.
속성을 검색하면 설명이 나옵니다.
+속성박스를 클릭하면 설명이 나옵니다.

---

원본 사이트 보기 원본 소스 보기

01. HTML

스크립트로 불러오기 위해서 search__list를 삭제했고 search__desc가 추가되었습니다.

코드 보기

{
    <main id="main">
    <div class="search__wrap">
        <span>find()를 이용하여 속성을 검색하면 설명 보여주기</span>
        <h1>CSS 속성 검색하기</h1>
    <div class="search__box">
        <label for="search">검색하기</label>
        <input type="text" id="search" placeholder="CSS 속성 및 유형을 입력해주세요!">
    </div>
  
    <div class="search__desc">
            속성을 검색하시면 화면이 표시됩니다!!!
    </div>
    <div class="search__info">
        <div>전체 속성 갯수 : <span class="num">0</span></div>
    </div>
    <div class="search__list">
        
    </div>
  </main>
}

02. CSS

박스와 돋보기에 대한 CSS가 추가 되었습니다.

코드 보기

{
    /* main */
    #main {
        margin: 50px 10px;
    }
    .search__wrap {
        max-width: 1400px;
        margin: 0 auto;
        border: 3px solid #223547;
        border-radius: 20px;
        background-color: #F1F3F6;
        padding: 30px;
        text-align: center;
    }
    .search__wrap > span {
        font-size: 20px;
        margin-bottom: 20px;
        display: inline-block;
    }
    .search__wrap > h1 {
        font-family: 'Tmon';
        color: #223547;
        font-size: 6vw;
        margin-bottom: 10px;
    }
    .search__box {
        margin-bottom: 40px;
    }
    .search__box label {
        position: absolute;
        clip: rect(0 0 0 0);
        width: 1px;
        height: 1px;
        margin: -1px;
        overflow: hidden;
    }
    .search__box input {
        border: 2px solid #223547;
        padding: 15px 40px;
        width: 70%;
        border-radius: 50px;
        font-size: 20px;
    }
    
    .search__list li {
        text-align: left;
        line-height: 1.7;
    }
    .search__list li.hide {
        display: none;
    }
    .search__list li.show {
        display: block;
    }
    .search__list span {
        display: inline-block;
        padding: 10px 20px;
        border: 1px solid var(--htmlColor);
        border-radius: 50px;
        margin-bottom: 5px;
        text-align: left;
        transition: all 0.3s;
        cursor: pointer;
    }
    .search__list span:hover {
        background-color: var(--htmlColor);
        color: #fff;
    }
    .search__info {
        text-align: right;
        margin-bottom: 30px;
        padding-bottom: 10px;
        border-bottom: 1px dashed var(--htmlColor);
    }
    .search__info .type {
        text-align: center;
        margin-bottom: 10px;
    }
    .search__info  .keyword {
        text-align: center;
        margin-bottom: 10px;
    }
    .search__info  .keyword span {
        border: 2px solid var(--htmlColor);
        border-radius: 50px;
        padding: 10px;
        display: inline-block;
        margin-bottom: 4px;
    }
    .search__info  .keyword span:hover {
        background-color: var(--htmlColor);
        color: #fff;
        cursor:pointer;
    }
    .search__desc {
        padding: 20px 40px 20px 60px;
        margin-bottom: 50px;
        border-radius: 50px;
        display: inline-block;
        background: var(--htmlColor);
        color: #fff;
        background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='11' cy='11' r='8' stroke='%23ffffff' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M16.5 16.958L21.5 21.958' stroke='%23ffffff' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: 22px 17px;
    }
}

03. JAVASCRIPT

1. 출력 : map() 메서드를 이용해서 전체속성 개수와 cssProperty 데이터를 출력합니다.
2. 입력 : searchBox에 addEventListener("keyup")을 걸고 searchBox의 value값을 저장시켜서 findProperty에 넣어줍니다.
3. 속성 찾기 : findProperty 함수를 만들고 그 안에서 cssProperty안에 있는 데이터(name)에 대해서 find() 메서드를 이용해서 찾아줍니다.
조건문을 걸어서 일치하는 데이터를 찾지 못한 경우에는 "해당 속성은 존재하지 않습니다. 다시 검색해주세요!" 메시지를 출력해주고 return으로 종료시킵니다.
4. 미션 : 1번에서 출력된 데이터를 선택해서 searchListspan 변수를 만들어주고 forEach와 addEventListener를 돌려서 속성박스 클릭시 desc박스에 cssProperty 설명이 나오게 출력해줍니다.

{
    const cssProperty = [
    { name: "accent-color", desc: "특정 요소에 색상을 지정할 때 사용됩니다." },
    { name: "align-content", desc: "콘텐츠 아이템의 상하관계 정렬 상태를 설정합니다." },
    { name: "align-items", desc: "콘텐츠 아이템의 내부 상하관계 정렬 상태를 설정합니다." },
    { name: "align-self", desc: "개별적인 콘텐츠 아이템의 정렬 상태를 설정합니다." },
    { name: "all", desc: "요소의 속성을 초기화 또는 상속을 설정합니다." },
    { name: "animation", desc: "애니메이션과 관련된 속성을 일괄적으로 설정합니다." },
    { name: "animation-delay", desc: "애니메이션 지연 시간을 설정합니다." },
    { name: "animation-direction", desc: "애니메이션 움직임 방향을 설정합니다." },
    { name: "animation-duration", desc: "애니메이션 움직임 시간을 설정합니다." },
    { name: "animation-fill-mode", desc: "애니메이션이 끝난 후의 상태를 설정합니다." },
    { name: "animation-iteration-count", desc: "애니메이션의 반복 횟수를 설정합니다." },
    { name: "animation-name", desc: "애니메이션 keyframe 이름을 설정합니다." },
    { name: "animation-play-state", desc: "애니메이션 진행상태를 설정 합니다." },
    { name: "animation-timeline", desc: "x" },
    { name: "animation-timing-function", desc: "애니메이션 움직임의 속도를 설정 합니다." },
    { name: "appearance", desc: "운영체제 및 브라우저에 기본적으로 설정되어 있는 테마를 기반으로 요소를 표현합니다." },
    { name: "aspect-ratio", desc: "요소의 크기를 비율대로 조정할 수 있게 합니다." },
    { name: "backdrop-filter", desc: "요소 뒤 영역에 흐림이나 색상 시프트 등 그래픽 효과를 적용할 수 있는 속성입니다." },
    { name: "backface-visibility", desc: "입체적인 모습의 뒷면의 가시성을 결정하는 속성이다." },
    { name: "background", desc: "백그라운드 속성을 일괄적으로 설정 합니다." },
    { name: "background-attachment", desc: "배경 이미지의 고정 여부를 설정 합니다." },
    { name: "background-blend-mode", desc: "배경을 혼합했을 때 그래픽 효과를 설정 합니다." },
    { name: "background-clip", desc: "백그라운드 이미지의 위치 기준점을 설정 합니다." },
    { name: "background-color", desc: "백그라운드 색을 설정 합니다." },
    { name: "background-image", desc: "백그라운드 이미지 속성을 설정 합니다." },
    { name: "background-origin", desc: "백그라운드 이미지의 위치 기준점을 설정하기 위한 속성입니다." },
    { name: "background-position", desc: "백그라운드 이미지의 위치 영역을 설정 합니다." },
    { name: "background-position-x", desc: "백그라운드 이미지의 x축 위치 영역을 설정 합니다." },
    { name: "background-position-y", desc: "백그라운드 이미지의 y축 위치 영역을 설정 합니다." },
    { name: "background-repeat", desc: "백그라운드 이미지 반복 여부를 설정 합니다." },
    { name: "background-size", desc: "백그라운드 이미지 사이즈를 설정 합니다." },
    { name: "block-size", desc: "기록 모드에 따라서, 요소의 블록의 수평과 수직 크기를 정의합니다." },
    { name: "border", desc: "테두리 속성을 일괄적으로 설정 합니다." },
                                            ...
    ];
    // 선택자
    const searchList = document.querySelector(".search__list");
    const searchNum = document.querySelector(".search__info .num");
    const searchBox = document.querySelector(".search__box input");
    const searchDesc = document.querySelector(".search__desc");

    // 출력하기
    cssProperty.map((element, index) => {
        searchNum.innerText = index + 1;
        searchList.innerHTML += `<span>${element.name}</span>`;
    });

    // 입력하기
    searchBox.addEventListener("keyup", ()=>{
        const searchWord = searchBox.value;
        // console.log(searchWord);
        findProperty(searchWord);
    });

    // 속성 찾기
    function findProperty(searchData){
       const targetData = cssProperty.find((data) => data.name === searchData);

        if(targetData == null){
            searchDesc.textContent = "해당 속성은 존재하지 않습니다. 다시 검색해주세요!"
            return;
        }
       searchDesc.textContent = targetData.desc;           
    };

    // 미션(클릭시 설명 나오게)
    const searchListspan = document.querySelectorAll(".search__list span");
    searchListspan.forEach((e, i) => {
        e.addEventListener("click", () => {
            searchDesc.textContent = cssProperty[i].desc;
        });
    });
}