"서치 이펙트" Search 02. includes() 메서드를 활용하여 검색 화면 만들기

서치이펙트 02

includes()을 이용하여 검색 화면을 만들어 봅시다.

---

HTML 태그 검색창 만들기!

실제 사이트보기 원본 소스보기 CSS 소스보기

▶ 카테고리 만들기

카테고리를 만들기 위해 HTML로 먼저 틀을 짜주어야 합니다.

HTML

<header id="header"> 
    <nav>
        <ul>
            <li><a href="searchEffect01.html">1</a>
            <li class="active"><a href="searchEffect02.html">2</a></li>
            <li><a href="searchEffect03.html">3</a></li>
            <li><a href="searchEffect04.html">4</a></li>
            <li><a href="searchEffect05.html">5</a></li>
            <li><a href="searchEffect06.html">6</a></li>
        </ul>
    </nav>
</header>
<!-- header -->

list를 이용하여 목차가 있는 구조로 깔끔하게 카테고리를 짤 수 있습니다.
해당 페이지에 class="active"를 넣어주셔야 어느 페이지에 있는지 쉽게 알 수 있습니다.

CSS

/* 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;
}

완성본 보기

---

▶ 내용 입력

검색창에 치면 나와야 할 내용들을 정리해줍니다.

HTML

<div class="search__wrap">
    <span>includes()을 이용하여 검색하기</span>
    <h1>CSS 속성 검색하기</h1>
    <div class="search__box">
        <label for="search">검색하기</label>
        <input type="text" id="search" placeholder="CSS 속성 및 유형을 입력해주세요!">
    </div>
    <div class="search__info">
        <div class="type">플렉스, 애니메이션, 백그라운드, 기타 등등 유형 별로 검색해보세요!</div>
        <div>전체 속성 갯수 : <span class="num">0</span></div>
    </div>
    <div class="search__list">
        <div class="css">
            <ul>
                <li data-name="accent-color" data-type="플렉스"><strong>accent-color</strong> : accent-color</li>
                <li data-name="align-content" data-type="플렉스"><strong>align-content</strong> : align-content 속성은 콘텐츠 아이템의 상하관계 정렬 상태를 설정합니다.</li>
                <li data-name="align-items" data-type="플렉스"><strong>align-items</strong> : align-items 속성은 콘텐츠 아이템의 내부 상하관계 정렬 상태를 설정합니다.</li>
                <li data-name="align-self" data-type="플렉스"><strong>align-self</strong> : align-self 속성은 개별적인 콘텐츠 아이템의 정렬 상태를 설정합니다.</li>
                <li data-name="all" data-type="기타"><strong>all</strong> : all 속성은 요소의 속성을 초기화 또는 상속을 설정합니다.</li>
                <li data-name="animation" data-type="애니메이션"><strong>animation</strong> : animation 속성은 애니메이션과 관련된 속성을 일괄적으로 설정합니다.</li>
                <li data-name="animation-delay" data-type="애니메이션"><strong>animation-delay</strong> : animation-delay 속성은 애니메이션 지연 시간을 설정합니다.</li>
                <li data-name="animation-direction" data-type="애니메이션"><strong>animation-direction</strong> : animation-direction 속성은 애니메이션 움직임 방향을 설정합니다.</li>
                <li data-name="animation-duration" data-type="애니메이션"><strong>animation-duration</strong> : animation-duration 속성은 애니메이션 움직임 시간을 설정합니다.</li>
                <li data-name="animation-fill-mode" data-type="애니메이션"><strong>animation-fill-mode</strong> : animation-iteration-count 속성은 애니메이션 반복 횟수 설정합니다.</li>
            </ul>
        </div>
    </div>
</div>

1. h1을 통해 제목을 써준 후 .search__box를 통해 label로 검색하기를 넣어준 후 input으로 텍스트를 입력할 수 있는 검색창을 만들어 줍니다.
2. search__info로 후에 자바스크립트를 통해 속성 갯수를 넣어 주기 위해 클래스를 num으로 지정해줍니다.
3. div태그에 클래스명을 search__list로 지정해준 후 그 안에 목록을 구성해야합니다.
4. 데이터들을 입력할 때 HTML에서 사용자가 임의로 지정한 속성값으로 활용할 수 있기 때문에 data name을 입력해주어야 나중에 편리합니다.
5. data-type을 정해주어 나중에 데이터타입을 통해 정보를 찾을 수 있게끔 해줍니다.

CSS

/* 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;
}

완성본 보기

▶ 자바스크립트 활용 (공통)

자바스크립트를 활용하여 검색을 했을 때 검색한 결과가 나올 수 있도록 forEach문과 if문을 이용해서 코딩을 해줍니다.
includes() 메서드를 이용해서

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

//전체 갯수 설정하기 
for(let i=1; i<=searchList.length; i++){
    const searchInfo = document.querySelector(".search__info .num")
    searchInfo.innerHTML = i;
};

//
searchBox.addEventListener("keyup", () => {
    const searchWord = searchBox.value;     //사용자가 입력한 키워드
    searchList.forEach(el => {
        const cssName = el.dataset.name;    //CSS 속성 모든 값 js: dataset.name(데이터 불러오기)
        //console.log(cssName)
        //"all".includes("all")   //true
        if(cssName.includes(searchWord)){   //searchWord값이 포함됐을 때
            el.classList.remove("hide");
        } else {
            el.classList.add("hide");
        }
    })
})
</script>

'Effect(자바스크립트 활용) > Search Effect 서치이펙트' 카테고리의 다른 글

"서치 이펙트" Search 07. 2분 동안 CSS 속성 검색하기 게임 만들기!  (1)	2022.10.21
"서치 이펙트" Search 05. filter() 메서드를 활용하여 검색 화면 만들기  (6)	2022.09.30
"서치 이펙트" Search 04. find() 메서드를 활용하여 검색 화면 만들기  (10)	2022.09.28
"서치 이펙트" Search 03. charAt() 메서드를 활용하여 검색 화면 만들기  (3)	2022.08.23
"서치 이펙트" Search 01. indexOf() 메서드를 활용하여 검색 화면 만들기  (4)	2022.08.16