소스 보기
Javascript
HTML
CSS 
 // 선택자
const searchBox = document.querySelector(".search__box input"); //검색  박스
const searchList = document.querySelectorAll(".search__list ul li"); //목록 리스트
const searchInfo = document.querySelector(".search__info") //전체 갯수

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

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

    searchList.forEach(el => {
        const cssName = el.dataset.name;

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

<div class="search__wrap">
    <span>indexOf()/search() 를 이용하여 CSS 속성 검색하기</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>CSS 속성 갯수 : <span class="num">0</span></div>
    </div>
    <div class="search__list">
        <div class="html">
            <ul>
                <li data-name="aLign-content"><strong>aLign-content</strong> : 콘텐츠 아이템의 상하관계 정렬 상태를 설정합니다.</li>
                <li data-name="aLign-items"><strong>aLign-items</strong> : 콘텐츠 아이템의 내부 상하관계 정렬 상태를 설정합니다.</li>
                <li data-name="aLign-self"><strong>aLign-self</strong> : 개별적인 콘텐츠 아이템의 정렬 상태를 설정합니다. </li>
                <li data-name="all"><strong>all</strong> : 요소의 속성을 초기화 또는 상속을 설정합니다.</li>
                <li data-name="animation"><strong>animation</strong> : 애니메이션과 관련된 속성을 일괄적으로 설정합니다.</li>
                <li data-name="animation-delay"><strong>animation-delay</strong> : 애니메이션 지연 시간을 설정합니다. </li>
                <li data-name="animation-direction"><strong>animation-direction</strong> : 속성은 애니메이션 움직임 방향
                    설정한다. </li>
                <li data-name="animation-duration"><strong>animation-duration</strong> : 속성은 애니메이션 움직임 시간을 설정한다.
                </li>
                <li data-name="animation-fill-mode"><strong>animation-fill-mode</strong> : 속성은 애니메이션이 끝난 후 상태를
                    설정한다.</li>
                <li data-name="animation-iteration-count"><strong>animation-iteration-count</strong> : 애니메이션 반복
                    횟수를 설정한다.</li>
                <li data-name="animation-name"><strong>animation-name</strong> : 애니메이션 keyframe 이름 설정한다.</li>
                <li data-name="	animation-play-state"><strong> animation-play-state</strong> : 애니메이션 진행상태를
                    설정합니다.</li>
                <li data-name="animation-timeline"><strong>animation-timeline</strong> : 요소에 적용할 스크롤 애니메이션을 설명하는
                    하나 이상의 이름을 지정합니다.</li>
                <li data-name="animation-timing-function"><strong>animation-timing-function</strong> : 애니메이션
                    움직임의 속도를 설정합니다.</li>
                <li data-name="appearance"><strong>appearance</strong> : 운영 체제의 테마를 기반으로 하는 UI 컨트롤의 기본 모양을 제어하는
                    ​​데 사용됩니다. </li>
                <li data-name="aspect-ratio"><strong>aspect-ratio</strong> : 디스플레이 화면 가로와 세로 길이의 비율을 설정합니다.
                </li>
                <li data-name="backdrop-filter"><strong>backdrop-filter</strong> : 요소 뒤 영역에 흐림 또는 색상 이동과 같은 그래픽
                    효과를 적용할 수 있습니다.</li>
                <li data-name="backface-visibility"><strong>backface-visibility</strong> : 사용자를 향할 때 요소의 뒷면을 볼 수
                    있는지 여부를 설정합니다. </li>
                <li data-name="background"><strong>background</strong> : 백그라운드 속성을 일괄적으로 설정합니다.</li>
                <li data-name="background-attachment"><strong>background-attachment</strong> : 배경 이미지의 고정 여부를
                    설정합니다.</li>
                <li data-name="background-blend-mode"><strong>background-blend-mode</strong> : 배경을 혼합했을 때 그래픽
                    효과를 설정합니다.</li>
                <li data-name="background-clip"><strong>background-clip</strong> : 배경 이미지의 고정 여부를 설정합니다.</li>
                <li data-name="background-attachment"><strong>background-attachment</strong> : 배경 이미지의 고정 여부를
                    설정합니다.</li>
                <li data-name="background-blend-mode"><strong>background-blend-mode</strong> : 배경을 혼합했을 때 그래픽
                    효과를 설정합니다.</li>
                <li data-name="background-clip"><strong>background-clip</strong> : 백그라운드 이미지의 위치 기준점을 설정합니다.
                </li>
                <li data-name="background-color"><strong>background-color</strong> : 백그라운드 색을 설정합니다.</li>
                <li data-name="background-image"><strong>background-image</strong> : 백그라운드 이미지 속성을 설정합니다.</li>
                <li data-name="background-origin"><strong>background-origin</strong> : 백그라운드 이미지의 위치 기준점을 설정하기
                    위한 속성입니다.</li>
                <li data-name="background-position"><strong>background-position</strong> : 백그라운드 이미지의 위치 영역을
                    설정합니다.</li>
                <li data-name="background-position-x"><strong>background-position-x</strong> : 백그라운드 이미지의 x축 위치
                    영역을 설정합니다.</li>
                <li data-name="background-position-y"><strong>background-position-y</strong> : 백그라운드 이미지의 y축 위치
                    영역을 설정합니다.</li>
                <li data-name="background-repeat"><strong>background-repeat</strong> : 백그라운드 이미지 반복 여부를 설정합니다.
                </li>
                <li data-name="background-size"><strong>background-size</strong> : 백그라운드 이미지 사이즈를 설정합니다.</li>
                <li data-name="block-size"><strong>block-size</strong> : 블록의 가로 또는 세로 크기를 정의합니다.</li>
                <li data-name="border"><strong>border</strong> : 테두리 속성을 일괄적으로 설정합니다.</li>
                <li data-name="border-block"><strong>border-block</strong> : 블록 테두리 속성 값을 스타일 시트의 한 위치에 설정하기 위한
                    약식 속성 입니다.</li>
                <li data-name="border-block-color"><strong>border-block-color</strong> : 블록 테두리 색상을 정의합니다.</li>
                <li data-name="border-block-end"><strong>border-block-end</strong> : 스타일 시트의 한 위치에 설정하기 위한 약식
                    속성입니다.</li>
                <li data-name="border-block-end-color"><strong>border-block-end-color</strong> : 요소의 쓰기 모드, 방향 및
                    텍스트 방향에 따라 물리적 테두리 색상에 매핑되는 요소의 논리적 블록 끝 테두리 색상을 정의합니다</li>
                <li data-name="border-block-end-style"><strong>border-block-end-style</strong> : 요소의 쓰기 모드, 방향 및
                    텍스트 방향에 따라 물리적 테두리 스타일에 매핑되는 요소의 논리적 블록 끝 테두리 스타일을 정의합니다.</li>
                <li data-name="border-block-end-width"><strong>border-block-end-width</strong> : 요소의 쓰기 모드, 방향 및
                    텍스트 방향에 따라 물리적 테두리 너비에 매핑되는 요소의 논리적 블록 끝 테두리 너비를 정의합니다.</li>
                    
            </ul>
        </div>
    </div>
</div>

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'EF_Diary';
    color: #223547;
}
*, *:before, *:after {
    box-sizing:border-box;
}
a {
    color: #223547;
    text-decoration: none;
}
li {
    list-style: none;
}
:root {
    --htmlColor : #223547;
    --cssColor : #8667ad;
    --javascriptColor : #aa6655;
}
/* header */
#header {
    display: flex;
    justify-content: space-between;
}
#header h1 {
    margin: 10px;
    font-family: 'Tmon';
    font-size: 40px;
}
#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: 'EF_Diary';
}
#header nav li.active a {
    background-color: #223547;
    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: #223547;
    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: #223547;
    font-size: 6vw;
    margin-bottom: 10px;
}
.search__box {
    margin-bottom: 40px;
}
.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;
}
@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: 'EF_Diary';
    padding-bottom: 50px;
}
#footer a:hover {
    text-decoration: underline;
}
indexOf()/search() 를 이용하여 CSS 속성 검색하기

CSS 속성 검색하기

CSS 속성 갯수 : 0
  • aLign-content : 콘텐츠 아이템의 상하관계 정렬 상태를 설정합니다.
  • aLign-items : 콘텐츠 아이템의 내부 상하관계 정렬 상태를 설정합니다.
  • aLign-self : 개별적인 콘텐츠 아이템의 정렬 상태를 설정합니다.
  • all : 요소의 속성을 초기화 또는 상속을 설정합니다.
  • animation : 애니메이션과 관련된 속성을 일괄적으로 설정합니다.
  • animation-delay : 애니메이션 지연 시간을 설정합니다.
  • animation-direction : 속성은 애니메이션 움직임 방향 설정한다.
  • animation-duration : 속성은 애니메이션 움직임 시간을 설정한다.
  • animation-fill-mode : 속성은 애니메이션이 끝난 후 상태를 설정한다.
  • animation-iteration-count : 애니메이션 반복 횟수를 설정한다.
  • animation-name : 애니메이션 keyframe 이름 설정한다.
  • animation-play-state : 애니메이션 진행상태를 설정합니다.
  • animation-timeline : 요소에 적용할 스크롤 애니메이션을 설명하는 하나 이상의 이름을 지정합니다.
  • animation-timing-function : 애니메이션 움직임의 속도를 설정합니다.
  • appearance : 운영 체제의 테마를 기반으로 하는 UI 컨트롤의 기본 모양을 제어하는 ​​데 사용됩니다.
  • aspect-ratio : 디스플레이 화면 가로와 세로 길이의 비율을 설정합니다.
  • backdrop-filter : 요소 뒤 영역에 흐림 또는 색상 이동과 같은 그래픽 효과를 적용할 수 있습니다.
  • backface-visibility : 사용자를 향할 때 요소의 뒷면을 볼 수 있는지 여부를 설정합니다.
  • background : 백그라운드 속성을 일괄적으로 설정합니다.
  • background-attachment : 배경 이미지의 고정 여부를 설정합니다.
  • background-blend-mode : 배경을 혼합했을 때 그래픽 효과를 설정합니다.
  • background-clip : 배경 이미지의 고정 여부를 설정합니다.
  • background-attachment : 배경 이미지의 고정 여부를 설정합니다.
  • background-blend-mode : 배경을 혼합했을 때 그래픽 효과를 설정합니다.
  • background-clip : 백그라운드 이미지의 위치 기준점을 설정합니다.
  • background-color : 백그라운드 색을 설정합니다.
  • background-image : 백그라운드 이미지 속성을 설정합니다.
  • background-origin : 백그라운드 이미지의 위치 기준점을 설정하기 위한 속성입니다.
  • background-position : 백그라운드 이미지의 위치 영역을 설정합니다.
  • background-position-x : 백그라운드 이미지의 x축 위치 영역을 설정합니다.
  • background-position-y : 백그라운드 이미지의 y축 위치 영역을 설정합니다.
  • background-repeat : 백그라운드 이미지 반복 여부를 설정합니다.
  • background-size : 백그라운드 이미지 사이즈를 설정합니다.
  • block-size : 블록의 가로 또는 세로 크기를 정의합니다.
  • border : 테두리 속성을 일괄적으로 설정합니다.
  • border-block : 블록 테두리 속성 값을 스타일 시트의 한 위치에 설정하기 위한 약식 속성 입니다.
  • border-block-color : 블록 테두리 색상을 정의합니다.
  • border-block-end : 스타일 시트의 한 위치에 설정하기 위한 약식 속성입니다.
  • border-block-end-color : 요소의 쓰기 모드, 방향 및 텍스트 방향에 따라 물리적 테두리 색상에 매핑되는 요소의 논리적 블록 끝 테두리 색상을 정의합니다
  • border-block-end-style : 요소의 쓰기 모드, 방향 및 텍스트 방향에 따라 물리적 테두리 스타일에 매핑되는 요소의 논리적 블록 끝 테두리 스타일을 정의합니다.
  • border-block-end-width : 요소의 쓰기 모드, 방향 및 텍스트 방향에 따라 물리적 테두리 너비에 매핑되는 요소의 논리적 블록 끝 테두리 너비를 정의합니다.