indexOf() / search() 를 이용하여 검색하기

CSS 속성 검색하기

전체 속성 갯수 : 0
  • accent-color : accent-color 속성은 일부 요소에서 생성된 사용자 인터페이스 컨트롤의 강조 색상을 설정 합니다.
  • align-content : align-content 속성은 콘텐츠 아이템의 상하관계 정렬 상태를 설정합니다.
  • align-items : align-items 속성은 콘텐츠 아이템의 내부 상하관계 정렬 상태를 설정합니다.
  • align-self : align-self 속성은 개별적인 콘텐츠 아이템의 정렬 상태를 설정합니다.
  • all : all 속성은 다른 페이지 이동을 설정합니다.
  • animation : animation 속성은 애니메이션과 관련된 속성을 일괄적으로 설정합니다.
  • animation-delay : animation-delay 속성은 애니메이션 지연 시간을 설정합니다.
  • animation-direction : animation-direction 속성은 애니메이션 움직임 방향을 설정합니다..
  • animation-duration : animation-duration 속성은 애니메이션 움직임 시간을 설정합니다.
  • animation-fill-mode : animation-fill-mode 속성은 애니메이션이 끝난 후의 상태를 설정합니다.
  • animation-iteration-count : animation-iteration-count 속성은 애니메이션의 반복 횟수를 설정합니다.
  • animation-name : animation-name 속성은 애니메이션 keyframe 이름을 설정합니다.
  • animation-play-state : animation-play-state 속성은 애니메이션 진행상태를 설정합니다.
  • animation-timeline : animation-timeline 속성은 요소에 적용할 스크롤 애니메이션을 설명하는 하나 이상의 규칙 이름을 지정합니다.
  • animation-timing-function : animation-timing-function 속성은 애니메이션 움직임의 속도를 설정합니다.
  • appearance : appearance 속성은 운영 체제의 테마를 기반으로 하는 UI 컨트롤의 기본 모양을 제어하는 ​​데 사용됩니다.
  • aspect-ratio : aspect-ratio 속성은 자동 크기 및 기타 레이아웃 기능 계산에 사용되는 상자의 기본 종횡비를 설정합니다
  • backdrop-filter : backdrop-filter 속성은 요소 뒤 영역에 흐림 또는 색상 이동과 같은 그래픽 효과를 적용할 수 있습니다 .
  • backface-visibility : backface-visibility 속성은 사용자를 향할 때 요소의 뒷면을 볼 수 있는지 여부를 설정합니다.
  • background : background 속성은 백그라운드 속성을 일괄적으로 설정합니다.
  • background-attachment : background-attachment 속성은 배경 이미지의 고정 여부를 설정합니다.
  • background-blend-mode : background-blend-mode 속성은 배경을 혼합했을 때 그래픽 효과를 설정합니다.
  • background-clip : background-clip 속성은 백그라운드 이미지의 위치 기준점을 설정합니다.
  • background-color : background-color 속성은 백그라운드 색을 설정합니다.
  • background-image : background-image 속성은 백그라운드 이미지 속성을 설정합니다.
  • background-origin : background-origin 속성은 백그라운드 이미지의 위치 기준점을 설정하기 위한 속성입니다.
  • background-position : background-position 속성은 백그라운드 이미지의 위치 영역을 설정합니다.
  • background-position-x : background-position-x 속성은 백그라운드 이미지의 X축 위치 영역을 설정합니다.
  • background-position-y : background-position-y 속성은 백그라운드 이미지의 Y축 위치 영역을 설정합니다.
  • background-repeat : background-repeat 속성은 백그라운드 이미지 반복 여부를 설정합니다.
소스 보기
Javascript
HTML
CSS 
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;     //사용자가 입력한 키워드

    //animation.indexOf()
    //animation.search()
    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() 를 이용하여 검색하기</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> 전체 속성 갯수 : <span class="num">0</span> </div>
    </div>
    <div class="search__list">
        <div class="css">
            <ul>
                <li data-name="name"><strong>name</strong> : name-설명</li>
            </ul>
        </div>
    </div>
</div> 
#main {
    margin: 50px 10px;
}
.search__wrap {
    max-width: 1400px;
    margin: 0 auto;
    border: 3px solid  var(--htmlColor);
    border-radius: 20px;
    background-color: #F1F3F6;
    text-align: center;
    padding: 30px;
}
.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__tab li.active a {
    background-color:  var(--htmlColor);
    color: #fff;
}
.search__list {}
.search__list li {
    text-align-last: 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;
}

.search__info .keyword{
    text-align: center;
    margin-bottom: 10px;
}
.search__info .keyword span{
    border: 2px solid var(--htmlColor);
    border-radius: 50px;
    padding: 10px;
    display: inline-block;
    margin-bottom: 4px;
}
.search__info .keyword span:hover {
    background-color: var(--htmlColor);
    color: #fff;
    cursor: pointer;
}