Search Effect 01

Search Effect01

이번 시간에는 오늘 배운 indexOf()를 활용하여 만든 검색 프로그램에 대해 알아보겠습니다.
키워드를 입력하면 그와 관련된 태그들과 함께 설명이 나옵니다.

---

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

01. HTML

search__list에 있는 li에 data-name을 주어 검색으로 찾을 수 있게 해줍니다.

코드 보기

{
    <main id="main">
        <div class="search__wrap">
            <span>indexOf()를 이용하여 검색하기</span>
            <h1>HTML 태그 검색하기</h1>

            <div class="search__box">
                <label for="search">검색하기</label>
                <input type="text" id="search" placeholder="HTML 태그를 입력해주세요!">
            </div>
            <div class="search__list">
                <div class="html">
                    <ul>
                        <li data-name="a"><strong>a</strong> : a 태그는 다른 페이지 이동을 설정합니다.</li>
                        <li data-name="abbr"><strong>abbr</strong> : abbr 태그는 줄임말이나 머리글자를 표현하는데 사용합니다.</li>
                        <li data-name="acronym"><strong>acronym</strong> : acronym 태그는 줄임말이나 머리글자를 표현하는데 사용합니다.</li>
                        <li data-name="address"><strong>address</strong> : address 태그는 웹 페이지의 연락처 정보를 설정합니다</li>
                        <li data-name="applet"><strong>applet</strong> : applet 태그는 애플랫 요소를 설정합니다. 현재는 사용하지 않습니다.</li>
                        <li data-name="area"><strong>area</strong> : area 태그는 이미지 맵의 영역을 정의합니다. </li>
                        <li data-name="article"><strong>article</strong> : article 태그는 사이트의 독립적인 컨텐츠 섹션을 설정합니다.</li>
                        <li data-name="aside"><strong>aside</strong> : aside 태그는 주요 콘텐츠의 보조적 컨텐츠 섹션을 설정합니다.</li>
                        <li data-name="audio"><strong>audio</strong> : audio 태그는 오디오 파일을 설정합니다.</li>
                        <li data-name="b"><strong>b</strong> : b 태그는 다른 텍스트와 구별 할 때 설정합니다.</li>
                        <li data-name="base"><strong>base</strong> : base 태그는 모든 문서의 기본이 되는 URL을 설정합니다.</li>
                        <li data-name="basefont"><strong>basefont</strong> : basefont 태그는 문서의 기본 폰트, 사이즈, 종류를 설정합니다.</li>
                        <li data-name="bdi"><strong>bdi</strong> : bdi 태그는 텍스트의 출력 방향 영역을 설정합니다.</li>
                        <li data-name="bdo"><strong>bdo</strong> : bdo 태그는 텍스트의 방향을 설정합니다.</li>
                        <li data-name="big"><strong>big</strong> : big 태그는 텍스트의 크기를 크게 설정합니다.</li>
                        <li data-name="blockquote"><strong>blockquote</strong> : 태그는 긴 문장의 인용문을 설정합니다.</li>
                    </ul>
                </div>
            </div>
        </div>
    </main>
}

02. CSS

HTML로 짜놓은 틀에 CSS를 입힙니다.

코드 보기

{
    :root {
        --htmlColor : #223547;
        --cssColor : #472222;
        --javscriptColor : #224736;
    }
    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        font-family: 'NexonLv1Gothic';
        color: #223547;
    }
    *, *:before, *:after {
        box-sizing:border-box;
    }
    a {
        color: #223547;
        text-decoration: none;
    }
    li {
        list-style: none;
    }
    
    /* header */
    #header {
        display: flex;
        justify-content: space-between;
    }
    #header h1 {
        margin: 10px;
        font-family: 'Tmon';
        font-size: 40px;
    }
    #header nav {
        margin: 10px;
    }
    #header nav li {
        position: relative;
        display: inline;
    
    }
    #header nav li a {
        width: 30px;
        height: 30px;
        border: 1px solid var(--htmlColor);
        border-radius: 50%;
        display: inline-block;
        text-align: center;
        line-height: 30px;
        font-family: 'NexonLv1Gothic';
    }
    #header nav li.active a {
        background-color: #223547;
        color: #fff;
    }
    #header nav li .sub {
        position: absolute;
        left: 0;
        top: 35px;
        width: 400px;
    }
    #header nav li .sub a {
        width: auto;
        background-color: transparent;
        color: #223547;
        border: 0;
        text-align: left;
        line-height: 1.2;
    }
    #header nav li .sub li.active a {
        text-decoration: underline;
    } 
    /* 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;
    }
    @media (max-width: 600px){
        .search__wrap {
            padding: 20px;
        }
        .search__wrap > span {
            font-size: 16px;
            margin-bottom: 10px;
        }
        .search__wrap > h1 {
            font-size: 44px;
        }
        .search__box input {
            font-size: 16px;
            padding: 12px 30px;
        }
    }
    /* footer */
    #footer {
        text-align: center;
    }
    #footer a {
        color: #000;
        font-family: 'NexonLv1Gothic';
        padding-bottom: 50px;
    }
    #footer a:hover {
        text-decoration: underline;
    }

03. JAVASCRIPT

querySelector를 통해 선택자를 지정합니다.
addEventListener에 keyup 이벤트를 넣어 키를 누르고 뗐을 때 event를 발생시킵니다.
forEach문을 돌려 search__list의 모든 el을 순환합니다.
마지막으로 if문안에 indexOf 메서드를 넣어주어 맞는 값(키워드를 포함한 값)은 0을 반환하여 hide를 지워주고 나머지는 추가한 hide를 남겨줍니다.
결과적으로 indpxOf로 0을 반환한 값이 출력됩니다.

{
    //선택자
    const searchBox = document.querySelector(".search__box input");         //검색 영역
    const searchList = document.querySelectorAll(".search__list ul li");    //목록 리스트

    searchBox.addEventListener("keyup", () => { //키 누르고 땠을 때 event 발생
        const searchWord = searchBox.value;     //사용자가 입력한 키워드

        searchList.forEach(el => {
            const cssName = el.dataset.name;    //forEach문을 이용하여 search__list의 el 순환
            
            if(cssName.indexOf(searchWord)){    //searchWord(사용자 입력값)이 맞을 경우 indexOf가 0을 반환합니다.
                el.classList.add("hide");       
            } else {                            //0 은 false로
                el.classList.remove("hide");    //indexOf()값이 0(false)이되는 값만 hide를 지워줍니다.
            }
        });
    });
}