Search Effect01

Search Effect

검색기능입니다. 쉽게 말해서 input박스를 만든 뒤에 input 박스에 사용자가 입력한 결과 값을 미리 만들어 놓은 리스트와 한글자씩 비교해 가면서 같은 단어들만 보이게 만드는 기능입니다.

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

---

HTML 작성

사용자가 이용 하기 위한 input 박스를 만들어 줍니다. 검색 대상도 데이터 이름으로 설정해 둡니다.

<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="aaplet"><strong>aaplet</strong> : aaplet 태그는 는 자바 애플릿을 보이게 하는 곳에 쓰입니다.</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> : blockquote 태그는 긴 문장의 인용문을 설정합니다.</li>
            </ul>
        </div>                
    </div>
</div>
</main>

CSS 작성

스타일시트를 이용해서 글자 크기와 디자인을 완성시켜줍니다. 폰트는 링크를 넣어 font-family를 이용했습니다.

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'NexonLv1Gothic';
    color: #223547;
}

*,
*:before,
*:after {
    box-sizing: border-box;
}

a {
    color: var(--htmlColor);
    text-decoration: none;
}

li {
    list-style: none;
}

/* header */
#header {}
#header nav {
    margin: 10px;
}
#header nav ul {}
#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: var(--htmlColor);
    color: #fff;
}
#header nav li .sub {
    position: absolute;
    left: 0;
    top: 35px;
    width: 400px;
}
#header nav li .sub li a {
    width: auto;
    background-color: transparent;
    color: var(--htmlColor);
    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 var(--htmlColor);
    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: var(--htmlColor);
    font-size: 6vw;
    margin-bottom: 10px;
}
.search__box {
    margin-bottom: 20px;
}
.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 var();
    padding: 15px 40px;
    width: 70%;
    border-radius: 50px;
    font-size: 20px;
}
.search__list {}
.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;
}

JS 작성

스크립트 부분은 오히려 간단했습니다. input박스와 미리 작성해 둔 목록 리스트를 querySelector를 이용해서 배열로 저장한뒤, addEventListener를 사용해 keyup(키를 누르고 떼었을 때) if 문을 사용해 indexOf()값이 0(false)이되는 값만 else문을 이용해 hide를 지워줍니다.

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

// 검색 영역 이벤트
searchBox.addEventListener("keyup", () => { // 사용자가 검색 영역에 keyup 했을 때(키를 눌렀다가 떼었을 때)
    const searchWord = searchBox.value;     //사용자가 입력한 키워드

    searchList.forEach(el => {
        const cssName = el.dataset.name;    // 데이터 세팅



        if (cssName.indexOf(searchWord)) {
            el.classList.add("hide");
        } else {
            el.classList.remove("hide");    //indexOf()값이 0(false)이되는 값만 hide를 지워줍니다.
        }

    });

});