[Search Effect] 검색 이펙트 02

검색 이펙트 만들기 02

이번 시간에는 그 동안 배웠던 JavaScript를 이용하여 검색 이펙트를 만들어보도록 하겠습니다.
이번 학습 내용을 잘 활용하여 그동안 배웠던 CSS 속성들을 검색창 형식으로 원하는 결과가 나오도록 만들어보도록 합시다. 나중에 모르는 게 생겼을 때 공부하기 편하게 말이죠!

자, 그럼 시작해볼까요?

HTML 소스 보기

검색 이펙트 02의 HTML 소스와 부연 설명(주석 처리됨)이다.
CSS 소스를 함께 보고 싶다면 맨 아래의 'CSS 소스 보기' 버튼을 누를 것.

<body>
    <header id="header">
        <h1>Search</h1>
        <nav>
            <ul>
                <li><a href="searchEffect01.html">01</a></li>
                <li class="active"><a href="searchEffect02.html">02</a></li>
                <li><a href="searchEffect03.html">03</a></li>
                <li><a href="searchEffect04.html">04</a></li>
                <li><a href="searchEffect05.html">05</a></li>
                <li><a href="searchEffect06.html">06</a></li>
            </ul>
        </nav>
    </header>
    <!-- // header -->

    <main id="main">
        <div class="search__wrap">
            <span>indexOf()를 이용하여 검색하기</span>
            <h1>CSS 속성 검색하기</h1>
            <div class="search__box">     <!-- 검색상자 -->
                <label for="search">검색하기</label>    <!-- 스크린리더기에 읽히지만 겉으로는 안보이게 CSS 속성으로 처리 -->
                <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"><strong>accent-color</strong> : 다른 페이지로의 이동을 설정함</li>
                        <li data-name="align-content" data-type="플렉스"><strong>align-content</strong> : 콘텐츠 아이템의 상하관계 정렬 상태를 설정</li>
                        <li data-name="align-items" data-type="플렉스"><strong>align-items</strong> : 콘텐츠 아이템의 내부 상하관계 정렬 상태를 설정함</li>
                        <!-- … 길어지므로 이하 생략 -->
                    </ul>
                </div>            
            </div>
        </div>
    </main>
    <!-- // main -->

    <footer id="footer">
        <a href="mailto:kde66034@gmail.com">kde66034@gmail.com</a>
    </footer>
    <!-- // footer -->
</body>

JavaScript 소스 보기

검색 이펙트 02의 JavaScript 소스와 부연 설명(주석 처리됨)이다.

// 선택자 : 상수 const를 필요한 만큼 선언 후 HTML 영역의 div, 시맨틱태그 등의 class명과 연결
const searchBox = document.querySelector(".search__box input");   // 검색 영역
const searchList = document.querySelectorAll(".search__list ul li");    // 목록 리스트
const searchInfo = document.querySelector(".search__info .num");        // 전체 개수

// 전체 개수 구하기
searchInfo.textContent = searchList.length; // CSS 속성 총 개수 출력

// 전체 개수 구하기 : for문 (복잡, 권장하지 않음)
// for(let i = 0; i <= searchList.length; i++) {
//     const searchInfo = document.querySelector(".search__info .num");
    
//     searchInfo.innerText = i;
// }

// 검색영역
searchBox.addEventListener("keyup", () => {
    const searchWord = searchBox.value;     // 사용자가 입력한 키워드

    searchList.forEach(el => {
        const cssName = el.dataset.name;    // CSS 속성 모든 값

        if(cssName.includes(searchWord)) {
            el.classList.remove("hide");   // 일치값이 있으면 보여줌(숨김 효과를 제거)
        } else {
            el.classList.add("hide");    // 없으면 사라지게 하기(숨김 효과 활성화)
        }
    });
});

원본(HTML/JS) 소스 보기

CSS 소스 보기

'Effect > Search Effect' 카테고리의 다른 글

[Search Effect] 검색 이펙트 06 (1)	2022.10.21
[Search Effect] 검색 이펙트 05 (4)	2022.09.29
[Search Effect] 검색 이펙트 04 (3)	2022.09.28
[Search Effect] 검색 이펙트 03 (7)	2022.08.22
[Search Effect] 검색 이펙트 01 (8)	2022.08.16

코딩공책📚

[Search Effect] 검색 이펙트 02

검색 이펙트 만들기 02

HTML 소스 보기

JavaScript 소스 보기

'Effect > Search Effect' 카테고리의 다른 글

댓글

Reference Book

JavaScript

HTML

CSS

티스토리툴바

[Search Effect] 검색 이펙트 02

검색 이펙트 만들기 02

HTML 소스 보기

JavaScript 소스 보기

'Effect > Search Effect' 카테고리의 다른 글

관련글

댓글

Reference Book

JavaScript

HTML

CSS

티스토리툴바