SearchEffect01

스크립트를 이용한 서치효과 만들기 01

스크립트를 이용하여 HTML 태그를 검색하는 효과를 만들 수 있습니다.

원본 소스 보기

Script

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

searchBox.addEventListener("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를 지워줍니다.
        }
    });
});

"문자열".indexOf(검색값)
"문자열".indexOf(검색값, 위치값)

indexOf()를 이용하여 시용자가 입력한 데이터와 search__list의 데이터가 일치시킵니다. 이때, indexOf()의 값이 '0'(false)일때 hide를 지워서 검색 결과만 나오게 만들어 줍니다.

HTML

<div class="search_wrap">
    <span>indexOf()를 이용하여 검색하기</span>
     <h1>HMTL 태그 검색하기</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이 사용할 기준 URL을 지정합니다.</li>
                <li data-name="bdi"><strong>bdi</strong> : bdi 태그는 주위의 텍스트들과는 다른 방향으로 써지는 텍스트 영역을 정의할 때 사용합니다.</li>
                <li data-name="bdo"><strong>bdo</strong> : bdo 태그는 현재 텍스트의 쓰기 방향을 덮어쓰고 다른 방향으로 렌더링 할 때 사용합니다.</li>
                <li data-name="bgsound"><strong>bgsound</strong> : bgsound 태그는 홈페이지 배경음악 삽입할때 사용합니다. 지금은 사용하지 않습니다.</li>
                <li data-name="big"><strong>big</strong> : big 태그는 글자 크기가 큰 텍스트를 정의 할 때 사용합니다. 지금은 사용하지 않습니다.</li>
                <li data-name="blink"><strong>blink</strong> : blink 태그는 텍스트를 깜빡이는게 설정합니다. 지금은 사용하지 않습니다. </li>
                <li data-name="blockquotea"><strong>blockquote</strong> : blockquote 태그는 긴 문장의 인용문을 설정합니다.</li>
            </ul>
        </div>
     </div>
</div>

CSS

css보기

/* header */
#header nav {
    margin: 10px;
}
#header nav li {
    display:inline;
    position: relative;
}
#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: 'Hallym';
}
#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 > h1 {
    font-family: 'Tmon';
    color: var(--htmlColor);
    font-size: 6vw;
    margin-bottom: 10px;
}
.search_wrap > span {
    font-size: 20px;
    margin-bottom: 20px;
    display: inline-block;
}
.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(--htmlColor);
    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 */
@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;
    }
}