CSS 속성 검색 페이지 만들기 - 1

검색창을 만들기 위해 사용한 자바스크립트

- 데이터 저장하기 : 변수

- 데이터 실행하기 : if문, 화살표 함수

- 데이터 불러오기 : for()문, forEach()문, 

- 배열 객체 : indexOf(), search()

- 요소 객체 :  querySelector(), querySelectorAll()

- 요소 메서드 : element.style.속성명 : CSS 스타일 설정

- 요소 속성 : textContent, dataset

- 이벤트 객체 : keyup

HTML

<main id="main">
    <div class="search__wrap">
        <div class="search__header">
            <h2 class="title">자바스크립트</h2>
        </div>
        <div class="search__conts">
            <hgroup>
                <h3>CSS 속성 검색하기</h3>
                <h4>indexOf() / search()</h4>
            </hgroup>
            <div class="search__box">
                <label for="search">검색하기</label>
                <input type="text" name="search" id="search" placeholder="CSS속성을 입력해주세요.">
            </div>
            <div class="search__info">
                <div>
                    CSS 속성 갯수 : <span>0</span>개
                </div>
            </div>
            <div class="search__list">
             <ul>
                <li data-name="align-content"><strong>align-content</strong> : 콘텐츠 아이템의 상하관계 정렬 상태를 설정합니다.</li>
   	    </ul>
            </div>
        </div>
    </div>
</main>
<footer id="footer">
    <a href="mailto:dripidea77@gmail.com">dripidea77@gmail.com</a>
</footer>

구조

main이라는 가장 큰 박스를 만들어 주고 그 아래에 search wrap을 만들어 주었습니다.

search wrap 아래로 search header, search conts, search box, search__info, search__list를 만들었습니다.

search__list에는 css속성 여러개를 넣어주었습니다. 편의상 한 개만 표시 했습니다.

---

script

 <script>
    //선택자
    const searchBox = document.querySelector(".search__box input");       //검색
    const searchList = document.querySelectorAll(".search__list li");     //목록

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

        searchList.forEach(el => {
            // const cssName = el.getAttribute("data-name"); //방법1
            const cssName = el.dataset.name;                //방법2

            //if문
            if(cssName.indexOf(userWord)){
                //데이터가 있으면 실행
                el.classList.add("hide");
            } else {
                //데이터가 없을 때 실행
                el.classList.remove("hide");
            }
        })
    });
    document.querySelector(".search__info span").innerHTML =  searchList.length;
<script>

const searchBox = document.querySelector(".search__box input");

검색을 위한 코드입니다. search box(검색창) 안의 input (들어오는 텍스트) 텍스트를 가져옵니다.

const searchList = document.querySelectorAll(".search__list li");

기입해 놓은 속성들(데이터)를 사용하기 위한 코드입니다. search__list (목록) 안의 li(작성해놓은 속성데이터)를 가져옵니다.

 

const userWord = searchBox.value; userWord라는 변수를 정해주고 searchBox.value(값)을 불러옵니다. 

여기서 값은 사용자가 입력한 키워드입니다.

 

if문을 사용하여 주고 데이터가 있을 때와 없을 때를 구분지어 줍니다.

마지막으로 총 갯수를 나타내줍니다.

 

완성화면