자바스크립트 활용5 - search 이펙트

서치 프로그램

서치 프로그램을 만들어보았습니다.
CSS, JAVASCRIPT, HTML 페이지를 각각 만들어서 서치할 수 있도록 하였습니다.

CSS

CSS입니다.
header, main, footer로 나누어서 작업하였습니다.

css보기

:root {
    --htmlColor : #223547;
    --cssColor : #472222;
    --javascriptColor : #224736;
    }

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'NexonLv1Gothic';
    color: var(--htmlColor);
    }
*, *:before, *:after {
    box-sizing:border-box;
    }
a {
    color: var(--htmlColor);
    text-decoration: none;
    }
li {
    list-style: none;
    }

/* header */
#header {
    display: flex;
    justify-content: space-between;
    }
#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: 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(--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 (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;
    }

javascript

javascript입니다. indexOf() 메서드를 사용해서 작업하였습니다. indexOf() 메서드의 특성인 문자열에서 특정 문자열을 찾고
원하는 문자가 맨처음 나오면 0을 출력하기 때문에 false를 출력하면 class에 hide를 지워서 출력하는 방식을 사용하였습니다.
javascript와 html, css를 각각 나누어서 검색할 수 있도록 하였습니다.

javascript보기

 //선택자
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를 지워줍니다.
        }
    });
});

HTML

검색되는 요소에 data를 지정하여 각각 값을 지정하였습니다.
마찬가지로 javascript와 css에서도 같은 방식을 사용하였습니다.

html보기

<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>

결과

원본 소스 보기