서치 이펙트 02
검색 기능을 가진 이펙트를 코딩해봤습니다.
HTML
사이트를 코딩하는 데에 필요한 HTML의 구조를 잡아줍니다.
data-name을 사용하여 각 li에 이름을 부여 해줍니다.
해당 HTML에서 결과물에 맞게 li입력 시 보는데 불편해지기에 갯수를 제한했습니다.
<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="accent-color" data-type="플렉스"><strong>accent-color</strong> : href특성을 통해 다른 페이지나 같은페이지의 위치, 파일와 그 외 다른 URL로 연결할 수 있는 하이퍼 링크를 만듭니다.</li>
<li data-name="align-content" data-type="플렉스"><strong>align-content</strong> : 콘텐츠 아이템의 상하관계 정렬 상태를 설정</li>
<li data-name="align-items" data-type="플렉스"><strong>align-items</strong> : 콘텐츠 아이템의 내부 상하관계 정렬 상태를 설정</li>
<li data-name="align-self" data-type="플렉스"><strong>align-self</strong> : 개별적인 콘텐츠 아이템의 정렬 상태를 설정</li>
<li data-name="all" data-type="기타"><strong>all</strong> : 요소의 속성을 초기화 또는 상속을 설정</li>
<li data-name="animation" data-type="애니메이션"><strong>animation</strong> : 애니메이션과 관련된 속성을 일괄적으로 설정</li>
<li data-name="animation-delay" data-type="애니메이션"><strong>animation-delay</strong> : 애니메이션 지연 시간을 설정</li>
<li data-name="animation-direction" data-type="애니메이션"><strong>animation-direction</strong> : 애니메이션 움직임 방향을 설정</li>
<li data-name="animation-duration" data-type="애니메이션"><strong>animation-duration</strong> : 애니메이션 움직임 시간을 설정</li>
<li data-name="animation-fill-mode" data-type="애니메이션"><strong>animation-fill-mode</strong> : 애니메이션이 끝난 후의 상태를 설정</li>
<li data-name="animation-iteration-count" data-type="애니메이션"><strong>animation-iteration-count</strong> : 애니메이션의 반복 횟수를 설정 </li>
<li data-name="animation-name" data-type="애니메이션"><strong>animation-name</strong> : 애니메이션 Keyframe 이름을 설정</li>
<li data-name="animation-play-state" data-type="애니메이션"><strong>animation-play-state</strong> : 애니메이션 진행 상태를 설정</li>
<li data-name="animation-timeline" data-type="애니메이션"><strong>animation-timeline</strong> : 애니메이션을 설명하는 하나 이상의 규칙과 이름을 설정</li>
<li data-name="animation-timing-function" data-type="애니메이션"><strong>animation-timing-function</strong> : 애니메이션 움직임의 속도를 설정</li>
</div>
</div>
</div>
</main>
CSS
사이트를 코딩하는 데에 필요한 css의 구조를 잡아줍니다.
:root {
--htmlColor : #223547;
--cssColor : #0e3d2e;
--javascriptColor : #130744;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "SCoreDream";
color: #223547;
}
*,
*:before,
*:after {
box-sizing: border-box;
}
a {
color: #000;
text-decoration: none;
}
li {
list-style: none;
}
/* header */
#header {
display: flex;
}
#header h1 {
margin: 10px;
}
#header nav {
margin: 10px;
}
#header nav li {
display: inline;
position: relative;
}
#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: "SCoreDream";
}
#header nav ul 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(--htmColor);
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: 10px;
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: center;
margin-bottom: 30px;
padding-bottom: 10px;
border-bottom: 2px solid var(--htmlColor);
}
.search__info .type {
text-align: center;
margin-bottom: 10px;
}
@media (max-width: 600px) {
.search__wrap {
padding: 20px;
}
.search__wrap > h1 {
font-size: 40px;
}
.search__box input {
font-size: 16px;
padding: 12px 30px;
}
}
/* footer */
#footer {
text-align: center;
}
.search__wrap > span {
font-size: 16px;
margin-bottom: 10px;
}
#footer a {
color: #000;
font-family: "SCoreDream";
padding-bottom: 50px;
}
footer a:hover {
text-decoration: underline;
}
script
querySelector를 이용하여 배열을 불러와준 뒤에, forEach문을 사용해줍니다. 해당 script는 includes()를 사용하여 0(false)이 되는 값만 hide를 지워줍니다.
//선택자
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;
const cssType = el.dataset.type;
if(cssName.includes(searchWord) | cssType.includes(searchWord)){
el.classList.remove("hide");
} else {
el.classList.add("hide");
}
});
});
댓글