[Search Effect] 검색 이펙트 03

검색 이펙트 만들기 03

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

자, 그럼 시작해볼까요?

HTML 소스 보기

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

<body>
    <header id="header">
        <h1>Search</h1>
        <nav>
            <ul>
                <li><a href="searchEffect01.html">01</a></li>
                <li><a href="searchEffect02.html">02</a></li>
                <li class="active"><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>charAt()를 이용하여 검색하기</span>
            <h1>CSS 속성 첫 글자 검색하기</h1>
            <div class="search__info">
                <div class="keyword">
                    <span>a</span>
                    <span>b</span>
                    <span>c</span>
                    <span>d</span>
                    <span>e</span>
                    <span>f</span>
                    <span>g</span>
                    <span>h</span>
                    <span>i</span>
                    <span>j</span>
                    <span>k</span>
                    <span>l</span>
                    <span>m</span>
                    <span>n</span>
                    <span>o</span>
                    <span>p</span>
                    <span>q</span>
                    <span>r</span>
                    <span>s</span>
                    <span>t</span>
                    <span>u</span>
                    <span>v</span>
                    <span>w</span>
                    <span>x</span>
                    <span>y</span>
                    <span>z</span>
                </div>
                <div>전체 속성 개수 : <span class="num">0</span></div>
            </div>
            <div class="search__list">
                <div class="css">
                    <ul>
                        <li><strong>accent-color</strong> : 다른 페이지로의 이동을 설정함</li>
                        <li><strong>align-content</strong> : 콘텐츠 아이템의 상하관계 정렬 상태를 설정</li>
                        <li><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 소스 보기

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

// 선택자
const searchKeyword = document.querySelectorAll(".search__info .keyword span");   // 알파벳
const searchList = document.querySelectorAll(".search__list ul li");    // 목록 리스트
const searchInfo = document.querySelector(".search__info .num");        // 전체 개수
let count = 0;

// 전체 개수 구하기
searchInfo.textContent = searchList.length; // CSS 속성 총 개수 출력
    
searchKeyword.forEach(el => {
    el.addEventListener("click", () => {
        const searchWord = el.innerText;    // 사용자가 클릭한 알파벳
        searchWord.textContent = searchInfo.length  // 선택한 알파벳 개수
        // console.log(searchWord);

        searchList.forEach(el => {
            const cssName = el.querySelector("strong").innerText;   // CSS 속성 텍스트
            // console.log(cssName);

            // 알파벳 첫글자 == CSS 속성의 첫글자
            if(searchWord.charAt(0) === cssName.charAt(0)) {
                el.classList.remove("hide");
                count++;    // 개수 더해줌
            } else {
                el.classList.add("hide");
            }
            searchInfo.textContent = count; // 검색한 CSS의 속성 개수에 count 저장해서 출력함
        });
        count = 0;  // 개수 초기화
    });
});

원본(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] 검색 이펙트 02 (2)	2022.08.17
[Search Effect] 검색 이펙트 01 (8)	2022.08.16

코딩공책📚

[Search Effect] 검색 이펙트 03

검색 이펙트 만들기 03

HTML 소스 보기

JavaScript 소스 보기

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

댓글

Reference Book

JavaScript

HTML

CSS

티스토리툴바

[Search Effect] 검색 이펙트 03

검색 이펙트 만들기 03

HTML 소스 보기

JavaScript 소스 보기

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

관련글

댓글

Reference Book

JavaScript

HTML

CSS

티스토리툴바