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

서치 프로그램2

서치 프로그램을 만들어보았습니다.
이번 프로그램에서는 검색 하였을 때 각각 유형별로 출력할 수 있도록 만들었습니다.
includes()메서드를 사용하여 작업하였습니다.

CSS

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;
}
.search__list li.show {
    display: block;
}

.search__info {
    text-align: right;
    margin-bottom: 30px;
    padding-bottom: 10px;
    border-bottom: 2px dashed var(--htmlColor);
}
.search__info {
    text-align: center;
    margin-bottom: 10px;
}

@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입니다. includes() 메서드를 사용해서 작업하였습니다. includes() 메서드의 특성인 문자열에서 원하는 문자열을 찾고 포함되어 있으면 출력하는 방식을 사용하였습니다.
또한 각 목록마다 유형별로 데이터 이름을 주었고 유형의 이름을 입력해도 유형에 속해있는 메서드들을 출력할 수 있도록 하였습니다.

javascript보기

//선택자
const searchBox = document.querySelector(".search__box input");         //검색 영역
const searchList = document.querySelectorAll(".search__list ul li");    //목록 리스트
const ListNumber = document.querySelector(".search__info span");        //리스트 갯수
const searchInfo = document.querySelector(".search__info .num")         //전체 갯수

//전체 갯수 구하기
searchInfo.textContent = searchList.length;

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

    searchList.forEach(el => {
        const cssName = el.dataset.name; //CSS속성 모든 값
        const cssType = el.dataset.type //CSS유형의 모든 값
        // console.log(cssName)

        if (cssName.includes(searchWord) || cssType.includes(searchWord)) {
            el.classList.remove("hide");
        } else {
            el.classList.add("hide");    //indexOf()값이 0(false)이되는 값만 hide를 지워줍니다.
        }
    })
})

HTML

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

html보기

 <main id="main">
    <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"></span></div>
        </div>
        <div class="search__list">
            <div class="css">
                <ul>
                    <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-name" data-type="애니메이션"><strong>animation-name</strong> : animation-name 속성은 이 애니메이션의 중간 상태를 지정합니다. 중간 상태는 @keyframes 규칙을 이용하여 기술합니다.</li>
                    <li data-name="animation-play-state" data-type="애니메이션"><strong>animation-play-state</strong> : animation-play-state 속성은 애니메이션을 멈추거나 다시 시작할 수 있습니다.</li>
                    <li data-name="animation-timing-function" data-type="애니메이션"> <strong>animation-timing-function</strong> : animation-timing-function 속성은 중간 상태들의 전환을 어떤 시간간격으로 진행할지 지정합니다.</li>
                    <li data-name="animation-fill-mode" data-type="애니메이션"><strong>animation-fill-mode</strong> : animation-fill-mode 애니메이션이 시작되기 전이나 끝나고 난 후 어떤 값이 적용될지 지정합니다..</li>
                    <li data-name="animation-iteration-count" data-type="애니메이션"> <strong>animation-iteration-count</strong> :animation-iteration-count 속성은 애니메이션이 몇 번 반복될지 지정합니다. infinite로 지정하여 무한히 반복할 수 있습니다.</li>


                    <li data-name="animation-timeline" data-type="애니메이션"><strong>animation-timeline</strong> : animation-timeline 속성은 요소에 적용할 스크롤 애니메이션을 설명하는 하나 이상의 at-규칙 이름을 지정합니다</li>
                    <li data-name="appearance" data-type="UI"><strong>appearance</strong> :appearance 속성은 운영 체제의 테마를 기반으로 하는 UI 컨트롤의 기본 모양을 제어하는 ​​데 사용됩니다.</li>
                    <li data-name="aspect-ratio" data-type="애니메이션"><strong>aspect-ratio</strong> : aspect-ratio 속성은 자동 크기 및 기타 레이아웃 기능 계산에 사용되는 상자의 기본 종횡비를 설정 합니다.</li>
                    <li data-name="backdrop-filter" data-type="애니메이션"><strong>backdrop-filter</strong> : backdrop-filter 속성은 요소 뒤 영역에 흐림 또는 색상 이동과 같은 그래픽 효과를 적용할 수 있습니다</li>
                    <li data-name="animation-play-state" data-type="애니메이션"><strong>backdrop-filter</strong> : backdrop-filter 속성은 사용자를 향할 때 요소의 뒷면을 볼 수 있는지 여부를 설정합니다</li>
                    <li data-name="backface-visibility"><strong>backface-visibility</strong> : backface-visibility 속성은 애니메이션 지연 시간을 설정합니다.</li>
                    <li data-name="background"><strong>background</strong> : background 속성은 색상, 이미지, 원점 및 크기 또는 반복 방법과 같은 모든 배경 스타일 속성을 한 번에 설정합니다.</li>
                    <li data-name="background-attachment"><strong>background-attachment</strong> : background-attachment 속성은 배경 이미지의 위치가 뷰포트 내에서 고정되는지 또는 포함하는 블록과 함께 스크롤되는지 여부를 설정합니다.</li>
                    <li data-name="background-blend-mode"><strong>background-blend-mode</strong> : background-blend-mode 속성은 요소의 배경 이미지가 서로 그리고 요소의 배경색과 어떻게 혼합되어야 하는지를 설정합니다</li>
                    <li data-name="background-clip"><strong>background-clip</strong> : background-clip 속성은 요소의 배경이 테두리 상자, 패딩 상자 또는 콘텐츠 상자 아래로 확장되는지 여부를 설정합니다.</li>
                    <li data-name="background-color"><strong>background-color</strong> :background-color 요소의 배경색을 설정합니다.</li>
                    <li data-name="background-image"><strong>background-image</strong> : background-image 속성은  요소에 하나 이상의 배경 이미지를 설정합니다.</li>
                    <li data-name="background-origin"><strong>background-origin</strong> : background-origin 속성은  배경의 원점을 설정합니다: 경계 시작부터, 경계 내부 또는 패딩 내부.</li>
                    <li data-name="background-position"><strong>background-position</strong> : background-position 속성은 각 배경 이미지의 초기 위치를 설정합니다. 위치는 에서 설정한 위치 레이어를 기준으로 합니다 .</li>
                    <li data-name="background-position-x"><strong>background-position-x</strong> : background-position-x 속성은  각 배경 이미지의 초기 수평 위치를 설정합니다. 위치는 에서 설정한 위치 레이어를 기준으로 합니다 .</li>
                    <li data-name="background-position-y"><strong>background-position-y</strong> : background-position-y 속성은 각 배경 이미지의 초기 수직 위치를 설정합니다. 위치는 에서 설정한 위치 레이어를 기준으로 합니다 .</li>
                    <li data-name="background-repeat"><strong>background-repeat</strong> : background-repeat 속성은 배경 이미지가 반복되는 방식을 설정합니다. 배경 이미지는 가로 및 세로 축을 따라 반복되거나 전혀 반복되지 않을 수 있습니다.</li>
                    <li data-name="animation-play-state"><strong>background-size</strong> : background-size 요소의 배경 이미지 크기를 설정합니다. 사용 가능한 공간에 맞게 이미지를 원래 크기로 유지하거나 늘리거나 제한할 수 있습니다.</li>
                    <li data-name="block-size"><strong>block-size</strong> : block-size 쓰기 모드에 따라 요소 블록의 가로 또는 세로 크기를 정의합니다. 의 값에 따라 또는 속성에 해당 합니다</li>
                    <li data-name="border"><strong>border</strong> : border 요소의 테두리를 설정합니다</li>
                    <li data-name="border-block"><strong>border-block</strong> : border-block  개별 논리적 블록 테두리 속성 값을 스타일 시트의 한 위치에 설정하기 위한 약식 속성 입니다.</li>
                    <li data-name="border-block-color"><strong>border-block-color</strong> : border-block-color 요소의 쓰기 모드, 방향 및 텍스트 방향에 따라 물리적 테두리 색상에 매핑되는 요소의 논리적 블록 테두리 색상을 정의합니다.</li>
                    <li data-name="border-block-end"><strong>border-block-end</strong> : border-block-end  개별 논리적 블록 끝 테두리 속성 값을 스타일 시트의 한 위치에 설정하기 위한 약식 속성 입니다.</li>
                    <li data-name="border-block-end-color"><strong>border-block-end-color</strong> : border-block-end-color 요소의 쓰기 모드, 방향 및 텍스트 방향에 따라 물리적 테두리 색상에 매핑되는 요소의 논리적 블록 끝 테두리 색상을 정의합니다.</li>
                    <li data-name="background-color"><strong>background-color</strong> :background-color 요소의 배경색을 설정합니다.</li>

                </ul>
            </div>
        </div>
    </div>
</main>

결과

원본 소스 보기