...
728x90
반응형
검색할 수 있는 효과 만들기
이번에는 여러개의 목록 중 사용자가 검색한 내용을 볼 수 있는 검색효과를 만들어보도록 하겠습니다.
완성화면
HTML 작성하기
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>검색 이펙트</title>
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/search.css">
</head>
<body class="pink">
<header id="header">
<ul>
<li class="active"><a href="searchEffect01.html">1</a></li>
<li><a href="mouseEffect02.html">2</a></li>
<li><a href="mouseEffect03.html">3</a></li>
<li><a href="mouseEffect04.html">4</a></li>
<li><a href="mouseEffect05.html">5</a></li>
<li><a href="mouseEffect06.html">6</a></li>
</ul>
</header>
<!-- header -->
<main id="main">
<div class="search__wrap">
<div class="search__header">
<h2 class="title">자바스크립트</h2>
</div>
<div class="search__conts">
<hgroup>
<h3>CSS 속성 검색하기</h3>
<h4>indexOf() / search()</h4>
</hgroup>
<div class="search__box">
<label for="search">검색하기</label>
<input type="text" name="search" id="search" placeholder="css속성을 입력해주세요">
</div>
<div class="search__info">
<div>
CSS 속성 갯수 : <span>0</span>개
</div>
</div>
<div class="search__list">
<ul>
<li data-name="css속성"><strong>css속성</strong> : css속성 설명</li>
</ul>
</div>
</div>
</div>
</main>
<!-- main -->
<footer id="footer">
<a href="mailto:gnsrbdi@naver.com">gnsrdbi@naver.com</a>
</footer>
<!-- footer -->
</body>
</html>CSS 작성하기
/* header */
#header {
padding: 1.4vw 1.4vw 1.8vw 1.4vw;
}
#header ul {
}
#header li {
list-style: none;
display: inline;
}
#header li a {
text-decoration: none;
width: 50px;
height: 50px;
line-height: 44px;
display: inline-block;
border-radius: 50%;
text-align: center;
color: #000;
border: 2px solid #000;
}
#header li:nth-child(3n+1) a {
background-color: #AF6EE3;
}
#header li:nth-child(3n+2) a {
background-color: #FFEF4A;
}
#header li:nth-child(3n+3) a {
background-color: #F76ECE;
}
/* main */
#main {}
/* search__wrap */
.search__wrap {
width: 90%;
margin: 0% auto;
background-color: #fff;
border: 0.3vw solid #000;
border-top-left-radius: 3vw;
border-bottom-right-radius: 3vw;
box-shadow: 1vw 1vw 0px #000;
transition: box-shadow 0.3s;
overflow: hidden;
}
.search__wrap:hover {
box-shadow: 0.5vw 0.5vw 0px #000;
}
.search__header {
border-bottom: 0.3vw solid #000;
padding: 0 0 0 3vw;
background-color: #AF6EE3;
position: relative;
display: flex;
align-items: center;
justify-content: space-between;
}
.search__header .title {
background: #AF6EE3;
position: relative;
z-index: 10;
padding-right: 35px;
color: #000;
padding: 0.6vw 8vw 0.6vw 5vw;
}
.search__header::before {
content: "";
width: 90%;
height: 0.3vw;
background: #000;
position: absolute;
right: 0;
top: 50%;
transform: translateY(-10px);
border-radius: 5px;
}
.search__header::after {
content: "";
width: 90%;
height: 0.3vw;
background: #000;
position: absolute;
right: 0;
top: 50%;
transform: translateY(4px);
border-radius: 5px;
}
.search__header .btn {
display: flex;
}
.search__header .btn span {
display: block;
width: 3vw;
height: 3vw;
line-height: 3vw;
font-size: 2vw;
position: relative;
z-index: 10;
border-left: 0.3vw solid #000;
box-sizing: content-box;
text-align: center;
cursor: pointer;
}
.search__conts hgroup {
text-align: center;
padding: 3vw;
border-bottom: 0.3vw solid #000;
}
.search__conts hgroup h3 {
color: #FFEF4A;
font-size: 8vw;
text-shadow: 0.4vw 0.4vw 0px #000;
-webkit-text-stroke: 0.2vw rgb(0, 0, 0);
}
.search__conts hgroup h4 {
color: #AF6EE3;
font-size: 6vw;
text-shadow: 0.5vw 0.5vw 0px #000;
-webkit-text-stroke: 0.2vw rgb(0, 0, 0);
}
.search__header .btn span:nth-child(3n+1){
background-color: #AF6EE3;
}
.search__header .btn span:nth-child(3n+2){
background-color: #FFEF4A;
}
.search__header .btn span:nth-child(3n+3){
background-color: #F76ECE;
}
.search__box {
text-align: center;
padding: 3vw 2vw;
}
.search__box input {
border: 0.3vw solid #000;
box-shadow: 0.3vw 0.3vw #000;
width: 80%;
padding: 1vw 2vw;
border-radius: 50px;
font-family: CookieRun;
outline: none;
}
.search__box input label {
padding: 1vw;
font-family: CookieRun;
font-size: 2vw;
}
.search__info {
text-align: right;
padding: 0.6vw 2vw;
border-bottom: 0.3vw dashed #000;
}
.search__list ul {
padding: 3vw;
}
.search__list li {
list-style: none;
line-height: 2;
}
.search__list li.hide {
display: none;
}
/* footer */
#footer {
text-align: center;
padding: 5vw;
}
#footer a {
color: #000;
}HTML / CSS 정리해보기
- 컴퓨터의 창화면 모양으로 CSS를 꾸며주고 상단 header 부분에 다른 검색효과 페이지로 이동할 수 있도록 링크를 걸어 버튼형식으로 넣어주었습니다.
- main의 header 부분에 가상요소를 두개 만들어 라인을 두개 넣어줬습니다.
- 내용이 시작되는 search__conts 부분에 text-shadow와 함께 text-stroke를 주어 외곽의 border를 조금 더 강하게 만들어 주었습니다.
- ul>li 태그로 여러가지의 css속성을 나열했습니다.
Javascript 작성하기
// 선택자
const searchBox = document.querySelector(".search__box input"); // 검색
const searchList = document.querySelectorAll(".search__list li"); // 목록
const searchInfo = document.querySelector(".search__info span");
// 검색
searchBox.addEventListener("keyup", () => {
const userWord = searchBox.value; // 사용자가 입력한 키워드
searchList.forEach((el, i) => {
// const cssName = el.getAttribute("data-name");
const cssName = el.dataset.name;
if(cssName.indexOf(userWord)){
// 데이터가 있을 때
el.classList.add("hide");
} else {
// 데이터가 없을 때
el.classList.remove("hide");
}
});
});
searchInfo.innerHTML = searchList.length;Javascript 정리해보기
- 각각의 선택자를 변수로 저장하여 사용했습니다.
- searchBox(".seach__box input)에 "keyup" event를 주어 사용자가 key를 누르면 실행하도록 만들어 주었고,
- searchBox의 value 값을 userWord에 저장했습니다.
- el.dataset.name : el에 있는 data의 name을 가져옵니다. (cssName에 저장)
- if문을 해석해보면
- if(cssName.indexOf(userWord)) : userWord가 cssName에 없다면 -1을 있다면 시작되는 자릿 수의 값을 반환합니다.
- 사용자가 입력하는 value값이 첫 번째 부터 나온다면 자릿 수의 값은 0 입니다.
- 고로 if(0)이 되므로 false가 됩니다.
- 따라서 사용자가 입력하는 value값이 cssName에 첫 자리 부터 있다면 false실행인 else문을,
- 사용자가 입력하는 value값이 cssName에 없거나 첫 자리 부터 시작하지 않는다면 true인 if문을 실행합니다.
이상으로 검색할 수 있는 검색효과를 만들어 보았습니다 !
728x90
반응형