searchEffect02

searchEffect02

includes()를 이용하여 검색하기. 타입 검색 기능 추가.

원본 소스 보기 원본 사이트

---

HTML

데이터 구분을 위해 data-name을 활용합니다.
data-type을 추가하여 타입으로도 검색이 가능하도록 하였습니다.

<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">0</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-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 속성은 애니메이션 반복 횟수 설정합니다.</li>
                    <li data-name="animation-name" data-type="애니메이션"><strong>animation-name</strong> : animation-name 속성은 애니메이션 keyframe 이름을 설정합니다.</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="backdrop-filter" data-type="효과"><strong>backdrop-filter</strong> : backdrop-filter 속성은 배경에 그래픽 효과를 설정합니다.</li>
                    <li data-name="backface-visibility" data-type="기타"><strong>backface-visibility</strong> : backface-visibility 속성은 요소의 뒷면을 설정합니다.</li>
                    <li data-name="background-attachment" data-type="백그라운드"><strong>background-attachment</strong> : background-attachment 속성은 배경 이미지의 고정 여부를 설정합니다.</li>
                    <li data-name="background-blend-mode" data-type="백그라운드"><strong>background-blend-mode</strong> : background-blend-mode 속성은 배경을 혼합했을 때의 상태를 설정합니다.</li>
                    <li data-name="background-clip" data-type="백그라운드"><strong>background-clip</strong> : background-clip 속성은 백그라운드 이미지의 위치 기준점을 설정하기 위한 속성입니다.</li>
                    <li data-name="background-color" data-type="백그라운드"><strong>background-color</strong> : background-color 속성은 백그라운드 색을 설정합니다.</li>
                    <li data-name="background-image" data-type="백그라운드"><strong>background-image</strong> : background-image 속성은 백그라운드 이미지 및 배경 속성을 설정합니다.</li>
                    <li data-name="background-origin" data-type="백그라운드"><strong>background-origin</strong> : background-origin 속성은 백그라운드 이미지의 위치 기준점을 설정하기 위한 속성입니다.</li>
                    <li data-name="background-position" data-type="백그라운드"><strong>background-position</strong> : background-position 속성은 백그라운드 이미지의 위치 영역을 설정합니다.</li>
                    <li data-name="background-repeat" data-type="백그라운드"><strong>background-repeat</strong> : background-repeat 속성은 백그라운드 이미지 반복 여부를 설정합니다.</li>
                    <li data-name="background-size" data-type="백그라운드"><strong>background-size</strong> : background-size 속성은 백그라운드 이미지 사이즈를 설정합니다.</li>
                    <li data-name="background" data-type="백그라운드"><strong>background</strong> : background 속성은 백그라운드 속성을 일괄적으로 설정합니다.</li>
                    <li data-name="border" data-type="테두리"><strong>border</strong> : border 속성은 테두리 속성을 일괄적으로 설정합니다.</li>
                    <li data-name="border-bottom" data-type="테두리"><strong>border-bottom</strong> : border-bottom 속성은 테두리 아래쪽 속성을 일괄적으로 설정합니다.</li>
                    <li data-name="border-bottom-color" data-type="테두리"><strong>border-bottom-color</strong> : border-bottom-color 속성은 테두리 아래쪽 색 속성을 설정합니다.</li>
                    <li data-name="border-bottom-left-radius" data-type="테두리"><strong>border-bottom-left-radius</strong> : border-bottom-left-radius 속성은 아래부분 왼쪽 모서리 굴곡을 설정합니다.</li>
                    <li data-name="border-bottom-right-radius" data-type="테두리"><strong>border-bottom-right-radius</strong> : border-bottom-right-radius 속성은 아래부분 오른쪽 모서리 굴곡을 설정합니다.</li>
                    <li data-name="border-bottom-style" data-type="테두리"><strong>border-bottom-style</strong> : border-bottom-style 속성은 테두리 아래쪽 스타일 속성을 설정합니다.</li>
                    <li data-name="border-bottom-width" data-type="테두리"><strong>border-bottom-width</strong> : border-bottom-width 속성은 테두리 아래쪽 두께 속성을 설정합니다.</li>
                    <li data-name="border-collapse" data-type="테두리"><strong>border-collapse</strong> : border-collapse 속성은 테이블의 테두리 분리 여부를 설정합니다.</li>
                    <li data-name="border-color" data-type="테두리"><strong>border-color</strong> : border-color 속성은 테두리 색 속성을 설정합니다.</li>
                    <li data-name="border-image" data-type="테두리"><strong>border-image</strong> : border-image 속성은 테두리 이미지 속성을 설정합니다.</li>
                    <li data-name="border-image-outset" data-type="테두리"><strong>border-image-outset</strong> : border-image-outset 속성은 테두리 이미지 간격 속성을 설정합니다.</li>
                    <li data-name="border-image-repeat" data-type="테두리"><strong>border-image-repeat</strong> : border-image-repeat 속성은 테두리 이미지 반복 속성을 설정합니다.</li>
                    <li data-name="border-image-slice" data-type="테두리"><strong>border-image-slice</strong> : border-image-slice 속성은 테두리 이미지 크기 속성을 설정합니다.</li>
                    <li data-name="border-image-source" data-type="테두리"><strong>border-image-source</strong> : border-image-source 속성은 테두리 이미지 경로 속성을 설정합니다.</li>
                    <li data-name="border-image-width" data-type="테두리"><strong>border-image-width</strong> : border-image-width 속성은 테두리 이미지 두께 속성을 설정합니다.</li>
                    <li data-name="border-left" data-type="테두리"><strong>border-left</strong> : border-left 속성은 테두리 왼쪽 속성을 일괄적으로 설정합니다.</li>
                    <li data-name="border-left-color" data-type="테두리"><strong>border-left-color</strong> : border-left-color 속성은 테두리 왼쪽 색 속성을 설정합니다.</li>
                    <li data-name="border-left-style" data-type="테두리"><strong>border-left-style</strong> : border-left-style 속성은 테두리 왼쪽 스타일 속성을 설정합니다.</li>
                    <li data-name="border-left-width" data-type="테두리"><strong>border-left-width</strong> : border-left-width 속성은 테두리 왼쪽 두께 속성을 설정합니다.</li>
                    <li data-name="border-radius" data-type="테두리"><strong>border-radius</strong> : border-radius 속성은 모서리 굴곡을 설정합니다.</li>
                    <li data-name="border-right" data-type="테두리"><strong>border-right</strong> : border-right 속성은 테두리 오른쪽 속성을 일괄적으로 설정합니다.</li>
                    <li data-name="border-right-color" data-type="테두리"><strong>border-right-color</strong> : border-right-color 속성은 테두리 오른쪽 색 속성을 설정합니다.</li>
                    <li data-name="border-right-style" data-type="테두리"><strong>border-right-style</strong> : border-right-style 속성은 테두리 오른쪽 스타일 속성을 설정합니다.</li>
                    <li data-name="border-right-width" data-type="테두리"><strong>border-right-width</strong> : border-right-width 속성은 테두리 오른쪽 두께 속성을 설정합니다.</li>
                    <li data-name="border-spacing" data-type="테두리"><strong>border-spacing</strong> : border-spacing 속성은 테이블의 테두리 간격을 설정합니다.</li>
                    <li data-name="border-style" data-type="테두리"><strong>border-style</strong> : border-style 속성은 테두리 스타일 속성을 설정합니다.</li>
                    <li data-name="border-top" data-type="테두리"><strong>border-top</strong> : border-top 속성은 테두리 위쪽 속성을 일괄적으로 설정합니다.</li>
                    <li data-name="border-top-color" data-type="테두리"><strong>border-top-color</strong> : border-top-color 속성은 테두리 위쪽 색 속성을 설정합니다.</li>
                    <li data-name="border-top-left-radius" data-type="테두리"><strong>border-top-left-radius</strong> : border-top-left-radius 속성은 윗부분 왼쪽 모서리 굴곡을 설정합니다.</li>
                    <li data-name="border-top-right-radius" data-type="테두리"><strong>border-top-right-radius</strong> : border-top-right-radius 속성은 윗부분 오른쪽 모서리 굴곡을 설정합니다.</li>
                    <li data-name="border-top-style" data-type="테두리"><strong>border-top-style</strong> : border-top-style 속성은 테두리 위쪽 스타일 속성을 설정합니다.</li>
                    <li data-name="border-top-width" data-type="테두리"><strong>border-top-width</strong> : border-top-width 속성은 테두리 위쪽 두께 속성을 설정합니다.</li>
                    <li data-name="border-width" data-type="테두리"><strong>border-width</strong> : border-width 속성은 테두리 두께 속성을 설정합니다.</li>
                    <li data-name="bottom" data-type="위치"><strong>bottom</strong> : bottom 속성은 위치 요소의 아래쪽 속성을 설정합니다.</li>
                    <li data-name="box-decoration-break" data-type="박스"><strong>box-decoration-break</strong> : box-decoration-break 속성은 컬럼 및 줄바꿈시 테두리와 패딩의 방식을 설정합니다.</li>
                    <li data-name="box-shadow" data-type="박스"><strong>box-shadow</strong> : box-shadow 속성은 박스 요소의 그림자를 설정합니다.</li>
                    <li data-name="box-sizing" data-type="박스"><strong>box-sizing</strong> : box-sizing 속성은 요소 크기에 패딩 포함 여부를 설정합니다.</li>
                    <li data-name="caption-side" data-type="위치"><strong>caption-side</strong> : caption-side 속성은 caption의 위치를 설정합니다.</li>
                    <li data-name="caret-color" data-type="테두리"><strong>caret-color</strong> : caret-color 속성은 input의 커서 색을 정의합니다.</li>
                    <li data-name="clear" data-type="테두리"><strong>clear</strong> : clear 속성은 float 요소의 성질을 차단합니다.</li>
                    <li data-name="clip" data-type="테두리"><strong>clip</strong> : clip 속성은 보이는 영역을 설정합니다.</li>
                    <li data-name="color" data-type="테두리"><strong>color</strong> : color 속성은 글씨 색을 설정합니다.</li>
                    <li data-name="column-count" data-type="테두리"><strong>column-count</strong> : column-count 속성은 컬럼의 수를 정의합니다.</li>
                    <li data-name="column-fill" data-type="테두리"><strong>column-fill</strong> : column-fill 속성은 열의 지정방법을 정의합니다.</li>
                    <li data-name="column-gap" data-type="테두리"><strong>column-gap</strong> : column-gap 속성은 컬럼의 간격을 정의합니다.</li>
                    <li data-name="column-rule" data-type="테두리"><strong>column-rule</strong> : column-rule 속성은 컬럼 라인의 가로값, 스타일, 컬러를 정의합니다.</li>
                    <li data-name="column-rule-color" data-type="테두리"><strong>column-rule-color</strong> : column-rule-color 속성은 컬럼의 라인 색을 정의합니다.</li>
                    <li data-name="column-rule-style" data-type="테두리"><strong>column-rule-style</strong> : column-rule-style 속성은 컬럼 라인의 스타일을 정의합니다.</li>
                    <li data-name="column-rule-width" data-type="테두리"><strong>column-rule-width</strong> : column-rule-width 속성은 컬럼 라인의 가로값을 정의합니다.</li>
                    <li data-name="column-span" data-type="테두리"><strong>column-span</strong> : column-span 속성은 열의 속성을 정의합니다.</li>
                    <li data-name="column-width" data-type="테두리"><strong>column-width</strong> : column-width 속성은 컬럼의 가로 값을 정의합니다.</li>
                    <li data-name="columns" data-type="테두리"><strong>columns</strong> : columns 속성은 열의 폭과 열의 수를 정의합니다.</li>
                    <li data-name="content" data-type="테두리"><strong>content</strong> : content 속성은 콘텐츠 내용을 설정합니다.</li>
                    <li data-name="counter-increment" data-type="테두리"><strong>counter-increment</strong> : counter-increment 속성은 콘텐츠의 순서 상태를 정의합니다.</li>
                    <li data-name="counter-reset" data-type="테두리"><strong>counter-reset</strong> : counter-reset 속성은 콘텐츠의 숫자를 초기화합니다.</li>
                    <li data-name="cursor" data-type="테두리"><strong>cursor</strong> : cursor 속성은 마우스 오버시 마우스 포인터를 정의합니다.</li>
                    <li data-name="direction" data-type="테두리"><strong>direction</strong> : direction 속성은 문장의 방향을 설정합니다.</li>
                    <li data-name="display" data-type="테두리"><strong>display</strong> : display 속성은 요소의 성질을 정의합니다.</li>
                    <li data-name="empty-cells" data-type="테두리"><strong>empty-cells</strong> : empty-cells 속성은 테이블의 빈요소의 속성을 설정합니다.</li>
                    <li data-name="filter" data-type="테두리"><strong>filter</strong> : filter 속성은 그래픽 효과를 설정합니다.</li>
                    <li data-name="flex" data-type="테두리"><strong>flex</strong> : flex 속성은 콘텐츠의 성질을 flex로 정의합니다.</li>
                    <li data-name="flex-basis" data-type="테두리"><strong>flex-basis</strong> : flex-basis 속성은 요소의 기본 단위를 정의합니다.</li>
                    <li data-name="flex-direction" data-type="테두리"><strong>flex-direction</strong> : flex-direction 속성은 요소의 정렬 방향을 정의합니다.</li>
                    <li data-name="flex-flow" data-type="테두리"><strong>flex-flow</strong> : flex-flow 속성은 요소의 정렬 방향과 줄 속성을 설정합니다.</li>
                    <li data-name="flex-grow" data-type="테두리"><strong>flex-grow</strong> : flex-grow 속성은 요소의 크기를 숫자를 통해 정의합니다.</li>
                    <li data-name="flex-shrink" data-type="테두리"><strong>flex-shrink</strong> : flex-shrink 속성은 요소의 크기를 숫자를 통해 줄여줍니다.</li>
                    <li data-name="flex-wrap" data-type="테두리"><strong>flex-wrap</strong> : flex-wrap 속성은 요소의 줄 속성을 설정합니다.</li>
                    <li data-name="float" data-type="테두리"><strong>float</strong> : float 속성은 블록요소의 정렬 상태를 설정합니다.</li>
                    <li data-name="font" data-type="테두리"><strong>font</strong> : font 속성은 폰트에 관한 설정을 정의합니다.</li>
                    <li data-name="font-family" data-type="테두리"><strong>font-family</strong> : font-family 속성은 폰트 종류를 설정합니다.</li>
                    <li data-name="font-size" data-type="테두리"><strong>font-size</strong> : font-size 속성은 폰트 사이즈 속성을 설정합니다.</li>
                    <li data-name="font-size-adjust" data-type="테두리"><strong>font-size-adjust</strong> : font-size-adjust 속성은 소문자를 기준으로 폰트 크기를 설정합니다.</li>
                    <li data-name="font-stretch" data-type="테두리"><strong>font-stretch</strong> : font-stretch 속성은 폰트의 굵기를 정의합니다.</li>
                    <li data-name="font-style" data-type="테두리"><strong>font-style</strong> : font-style 속성은 폰트의 스타일을 정의합니다.</li>
                    <li data-name="font-variant" data-type="테두리"><strong>font-variant</strong> : font-variant 속성은 글꼴의 변형을 정의합니다.</li>
                    <li data-name="font-weight" data-type="테두리"><strong>font-weight</strong> : font-weight 속성은 폰트의 두께를 정의합니다.</li>
                    <li data-name="grid" data-type="테두리"><strong>grid</strong> : grid-template-columns 속성은 가로 컬럼의 크기와 위치 설정합니다.</li>
                    <li data-name="grid-area" data-type="테두리"><strong>grid-area</strong> : grid-area 속성은 grid item의 크기와 위치를 결정합니다.</li>
                </ul>
            </div>
        </div>
    </div>
</main>

JAVASCRIPT

includes()을 이용하여 사용자가 원하는 값을 입력시에 출력하는 값이 아닌 경우 hide로 숨기고.
0으로 false가 되어, 출력되야하는 값만 hide를 지워주어 원하는 키워드를 출력할 수 있습니다.
includes() 메서드의 특성인 문자열에서 원하는 문자열을 찾고 포함되어 있으면 출력하는 방식을 사용하였습니다.

//선택자
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;

//검색 영역
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");  
        }
    });
});

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 .type {
    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;
}