서치 이펙트 03
알파벳을 클릭하면 해당 알파벳이 앞자리에 포함된 속성이 나오도록 해보겠습니다.
HTML
사이트를 코딩하는 데에 필요한 HTML의 구조를 잡아줍니다.
해당 html은 div안에 keyword클래스를 부여해 준 뒤, span을 사용하여 검색 기능의 구조를 잡아주도록 코딩했습니다.
<main id="main">
<div class="search__wrap">
<span>charAt()를 이용하여 검색하기</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="keyword">
<span>a</span>
<span>b</span>
<span>c</span>
<span>d</span>
<span>e</span>
<span>f</span>
<span>g</span>
<span>h</span>
<span>i</span>
<span>j</span>
<span>k</span>
<span>l</span>
<span>m</span>
<span>n</span>
<span>o</span>
<span>p</span>
<span>q</span>
<span>r</span>
<span>s</span>
<span>t</span>
<span>u</span>
<span>v</span>
<span>w</span>
<span>x</span>
<span>y</span>
<span>z</span>
</div>
<div>전체 속성 갯수 : <span class="num">0</span></div>
</div>
<div class="search__list">
<div class="css">
<ul>
<li><strong>accent-color</strong> : href특성을 통해 다른 페이지나 같은페이지의 위치, 파일와 그 외 다른 URL로 연결할 수 있는 하이퍼 링크를 만듭니다.</li>
<li><strong>align-content</strong> : 콘텐츠 아이템의 상하관계 정렬 상태를 설정</li>
<li><strong>align-items</strong> : 콘텐츠 아이템의 내부 상하관계 정렬 상태를 설정</li>
.
.
.
<li><strong>z-index</strong> : 위치 지정 요소와, 그 자손 또는 하위 플렉스 아이템의 Z축 순서를 지정</li>
</ul>
</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;
}
.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;
}
.search__info .keyword span:hover {
background-color: var(--htmlColor);
color: #fff;
cursor: pointer;
}
@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는 charAt()를 사용하여 해당 알파벳을 누르면 검색되도록 설정했습니다.
// 선택자
const searchKeyword = document.querySelectorAll(".search__info .keyword span"); // 알파벳
const searchList = document.querySelectorAll(".search__list ul li") // 목록 리스트
const searchInfo = document.querySelector(".search__info .num") // 전체 갯수 구하기
let count = 0;
// 전체 갯수 구하기
searchInfo.textContent = searchList.length;
searchKeyword.forEach(el => {
el.addEventListener("click", () => {
const searchWord = el.innerText; // 사용자가 클릭한 알파벳
console.log(searchWord);
searchList.forEach(el => {
const cssName = el.querySelector("strong").innerText; // CSS 속성 텍스트
// console.log(cssName)
// 알파벳 첫 글자 == CSS 속성 첫 글자
if(searchWord.charAt(0) === cssName.charAt(0)) {
el.classList.remove("hide");
count++
} else {
el.classList.add("hide");
}
searchInfo.textContent = count;
});
count = 0;
});
});
댓글