Animated Rainbow Nyan Cat
본문 바로가기
Effect/search

search 02

by 이유나1 2022. 8. 18.
728x90
반응형

search02

CSS 의 속성들이 있는 구조이다. 검색하고 지우면 목록이 없어진다.

원본 소스 보기

HTML

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

// 선택자
const searchBox = document.querySelector(".search__box input"); //검색  박스
const searchList = document.querySelectorAll(".search__list ul li"); //목록 리스트
const searchInfo = document.querySelector(".num") //전체 갯수
const searchType = document.querySelector(".type");//검색 유형 


//검색 유형 
let str = '플렉스, 애니메이션, 백그라운드, 기타, border';
let pos1 = str.indexOf('플렉스')

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

searchList.forEach(el => {
el.classList.add("show");
});

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

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

if(cssName.includes(searchWord)){
    el.classList.add("hide");
}else{
    el.classList.remove("hide");
}
});
});

CSS

* {
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;
}
.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: 'EF_Diary';
padding-bottom: 50px;
}
#footer a:hover {
text-decoration: underline;
}
728x90

'Effect > search' 카테고리의 다른 글

서치 이펙트 07  (0) 2022.10.14
서치 이펙트 06  (0) 2022.10.14
search 03  (3) 2022.08.22
search 01  (3) 2022.08.16

관련글

댓글

/

JA
/

HTML
/

CSS
광고준비중입니다.

티스토리툴바