includes()를 이용하여 검색하기

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 속성은 백그라운드 이미지 반복 여부를 설정합니다.
  • background-size : background-size 속성은 백그라운드 이미지 사이즈를 설정합니다.
  • block-size : block-size 속성은 요소 블록의 가로 또는 세로 크기를 정의합니다
  • border : border 속성은 테두리 속성을 일괄적으로 설정합니다.
  • border-block : border-block 속성은 개별 논리적 블록 테두리 속성 값을 스타일 시트의 한 위치에 설정하기 위한 약식 속성 입니다.
  • border-block-color : border-block-color 속성은 블록 테두리의 색상 값을 설정합니다.
  • border-block-end : border-block-end 속성은 블록 끝 테두리 속성 값을 스타일 시트의 한 위치에 설정하기 위한 약식 속성 입니다.
  • border-block-end-color : border-block-end-color 속성은 블록 끝 테두리 색상값을 설정합니다.
  • border-block-end-style : border-block-end-style 속성은 블록 끝 테두리 스타일 값을 설정합니다.
  • border-block-end-width : border-block-end-width 속성은 블록 끝 테두리 가로길이 값을 설정합니다.
  • border-block-start : border-block-start 속성은 블록 시작 테두리 속성 값을 스타일 시트의 한 위치에 설정하기 위한 약식 속성 입니다.
  • border-block-start-color : border-block-start-color 속성은 블록 시작 테두리 색상값을 설정합니다.
  • border-block-start-style : border-block-start-style 속성은 블록 시작 테두리 스타일 값을 설정합니다.
  • border-block-start-width : border-block-start-width 속성은 블록 시작 테두리 가로길이 값을 설정합니다.
  • border-block-style : border-block-style 속성은 물리적 테두리 스타일에 매핑되는 요소의 논리적 블록 테두리 스타일을 정의합니다.
  • border-block-width : border-block-width 속성은 블록 테두리 가로 길이 값을 설정합니다.
  • border-bottom : border-bottom 속성은 보더의 아래쪽 속성을 일괄적으로 설정합니다.
  • border-bottom-color : border-bottom-color 속성은 테두리 아래쪽 색 속성을 설정합니다.
  • border-bottom-left-radius : border-bottom-left-radius 속성은 아래 왼쪽 모서리 굴곡을 설정합니다.
  • border-bottom-right-radius : border-bottom-right-radius 속성은 아래 오른쪽 모서리 굴곡을 설정합니다.
  • border-bottom-style : border-bottom-style 속성은 테두리 아래쪽 스타일 속성을 설정합니다.
  • border-bottom-width : border-bottom-width 속성은 테두리 아래쪽 두께 속성을 설정합니다.
  • border-collapse : border-collapse 속성은 별도의 테두리를 가질지 여부를 설정합니다.
  • border-color : border-color 속성은 테두리의 모든 색상을 결정합니다.
  • border-end-end-radius : border-end-end-radius 속성은 테두리 끝의 원만함과 그에 따른 방향을 결정합니다.
  • border-end-start-radius : border-end-start-radius 속성은 테두리 시작의 원만함과 그에 따른 방향을 결정합니다.
  • border-image : border-image 속성은 테두리 주위에 이미지를 그립니다.
  • border-image-outset : border-image-repeat 속성은 테두리의 가장자리 영역 이 요소의 테두리 이미지 크기에 맞게 조정 되는 방법을 정의합니다.
  • border-image-repeat : background 속성은 백그라운드 속성을 일괄적으로 설정합니다.
  • border-image-slice : border-image-slice 속성은 테두리에 지정된 이미지를 영역으로 나눕니다.
  • border-image-source : border-image-source 속성은 테두리 이미지에 사용되는 소스 이미지를 설정합니다.
  • border-image-width : border-image-width 속성은 테두리 이미지의 가로 사이즈를 설정합니다.
  • border-inline : border-inline 속성은 테두리 한 위치에 개별 논리적 인라인 테두리 속성 값을 설정합니다
  • border-inline-color : border-inline-color 속성은 테두리 한 위치에 개별 논리적 인라인 테두리 색상 값을 설정합니다.
  • border-inline-end : border-inline-end 속성은 백그라운드 속성을 일괄적으로 설정합니다.
  • border-inline-end-color : border-inline-end-color 속성은 인라인 끝 테두리 색상 값을 설정합니다.
  • border-inline-end-style : border-inline-end-style 속성은 인라인 끝 테두리 스타일 값을 설정합니다.
  • border-inline-end-width : border-inline-end-width 속성은 인라인 끝 테두리 가로 길이 값을 설정합니다.
  • border-inline-start : border-inline-start 속성은 인라인 시작 테두리 속성 값을 설정합니다.
  • border-inline-start-color : border-inline-start-color 속성은 인라인 시작 테두리 색상 값을 설정합니다.
  • border-inline-start-style : border-inline-start-style 속성은 인라인 시작 테두리 스타일 값을 설정합니다.
  • border-inline-start-width : background 속성은 인라인 시작 테두리 가로 길이 값을 설정합니다.
  • border-inline-style : background 속성은 인라인 테두리 스타일 값을 설정합니다.
  • border-inline-width : border-inline-width 속성은 인라인 테두리 가로 길이 값을 설정합니다.
  • border-lef : border-lef 속성은 테두리의 왼쪽 속성을 지정합니다.
  • border-left-color : border-left-color 속성은 왼쪽 테두리 색상 속성을 지정합니다.
  • border-left-style : border-left-style 속성은 왼쪽 테두리 모든 속성값을 설정합니다.
  • border-left-width : border-left-width 속성은 왼쪽 테두리 너비를 지정합니다.
  • border-radius : border-radius 속성은 테두리 경계의 꼭짓점을 둥글게 설정합니다.
  • border-right : border-right 속성은 테두리의 오른쪽 속성을 지정합니다.
  • border-right-color : border-right-color 속성은 오른쪽 테두리의 색상 속성을 지정합니다.
  • border-right-style : border-right-style 속성은 오른쪽 테두리 모든 속성값을 설정합니다.
  • border-right-width : border-right-width 속성은 오른쪽 테두리 너비를 지정합니다.
  • border-spacing : border-spacing 속성은 가까운 테두리들의 간격을 지정합니다.
  • border-start-end-radius : border-start-end-radius 속성은 블록 시작 측면과 인라인 끝 측면 사이의 모서리에 영향을 줍니다.
  • border-start-start-radius : border-start-start-radius 속성은 블록 시작과 인라인 시작 측면 사이의 모서리에 영향을 줍니다.
  • border-style : border-style 속성은 테두리의 네 면 모두에 대한 선 스타일을 설정합니다.
  • border-top : border-top 속성은 테두리의 위쪽 모양을 결정하는 속성입니다.
  • border-top-color : border-top-color 속성은 테두리의 위쪽 색상을 결정하는 속성입니다.
  • border-top-left-radius : border-top-left-radius 속성은 서리의 곡률을 정의하는 타원의 반지름을 지정하여 요소의 왼쪽 위 모서리를 반올림합니다.
  • border-top-right-radius : border-top-right-radius 속성은 서리의 곡률을 정의하는 타원의 반지름을 지정하여 요소의 오른쪽 위 모서리를 반올림합니다.
  • border-top-style : border-top-style 속성은 테두리의 위쪽 스타일을 결정하는 속성입니다.
  • border-top-width : border-top-width 속성은 백그라운드 속성을 일괄적으로 설정합니다.
  • border-width : border-width 속성은 테두리의 가로값을 결정합니다.
  • bottom : bottom 속성은 아래쪽의 모든 속성 값을 설정합니다.
  • box-decoration-break : box-decoration-break 속성은 여러 줄, 열 또는 페이지에 걸쳐 분할될 때 요소의 조각 을 렌더링하는 방법을 지정합니다.
  • box-shadow : box-shadow 속성은 상자의 그림자를 설정합니다.
  • box-sizin : box-sizin 속성은 박스의 전체 너비와 높이를 계산하는 방법을 설정합니다.
  • break-after : break-after 속성은 생성된 상자 이후에 페이지, 열 또는 영역 나누기가 작동하는 방식을 설정합니다.
  • break-before : break-before 속성은 생성된 상자 이전에 페이지, 열 또는 영역 나누기가 작동하는 방식을 설정합니다.
  • break-inside : break-inside 속성은 생성된 상자 내에서 페이지, 열 또는 영역 나누기가 작동하는 방식을 설정합니다.
소스 보기
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;



//속성 갯수 설정하기
//for문
// for(let i =1; i <= searchList.length; i++){
//     document.querySelector(".num").innerHTML = i
// }

// document.querySelector(".num").innerHTML = searchList.length

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

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

        // "all".includes("all") //true
        if(cssName.includes(searchWord) || cssType.includes(searchWord) ){
            el.classList.remove("hide");
        }else{
            el.classList.add("hide");
        }

        // //키워드
        // if(cssType.includes(searchVocable)){
        //     el.classList.remove("hide");
        // }else{
        //     el.classList.add("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" data-type="name-type"><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;
}