728x90
Search Effect page 만들기
다음 프레임과 같이 검색하여 매치되는 단어가 나타나는 페이지를 만들어 보겠습니다.
코드블럭
<!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="mouseEffect01.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>
<main id="main">
<div class="search__wrap">
<div class="search__header">
<h2 class="title">자바스크립트</h2>
</div>
<div class="search__conts">
<hgroup>
<h3>자바스크립트 검색하기</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">
CSS 속성 갯수 : <span>0</span>개
</div>
<div class="search__list">
<ul>
<li data-name="align-items"><strong>align-contetnt</strong> : 콘텐츠 아이템의 상하관계 정렬 상태를 설정합니다.</li>
<li data-name="align-items"><strong>align-items</strong> : 콘텐츠 아이템의 내부 상하관계 정렬 상태를 설정합니다.</li>
<li data-name="align-self"><strong>align-self</strong> : 개별적인 콘텐츠 아이템의 정렬 상태를 설정합니다.</li>
<li data-name="all"><strong>all</strong> : 요소의 속성을 초기화 또는 상속을 설정합니다.</li>
<li data-name="animation"><strong>animation</strong> : 애니메이션과 관련된 속성을 일괄적으로 설정합니다.</li>
<li data-name="animation-delay"><strong>animation-delay</strong> : 애니메이션 지연 시간을 설정합니다.</li>
<li data-name="animation-direction"><strong>animation-direction</strong> : 애니메이션 움직임 방향을 설정합니다.</li>
<li data-name="animation-duration"><strong>animation-duration</strong> : 애니메이션 움직임 시간을 설정합니다.</li>
<li data-name="animation-fill-mode"><strong>animation-fill-mode</strong> : 애니메이션이 끝난 후의 상태를 설정합니다.</li>
<li data-name="animation-iteration-count"><strong>animation-iteration-count</strong> : 애니메이션 반복 횟수 설정합니다.</li>
<li data-name="animation-name"><strong>animation-name</strong> : 애니메이션 keyframe 이름을 설정합니다.</li>
<li data-name="animation-play-state"><strong>animation-play-state</strong> : 애니메이션 진행상태를 설정합니다.</li>
<li data-name="animation-timing-function"><strong>animation-timing-function</strong> : 애니메이션 움직임의 속도를 설정합니다.</li>
<li data-name="backdrop-filter"><strong>backdrop-filter</strong> : 배경에 그래픽 효과를 설정합니다.</li>
<li data-name="backface-visibility"><strong>backface-visibility</strong> : 요소의 뒷면을 설정합니다.</li>
<li data-name="background-attachment"><strong>background-attachment</strong> : 배경 이미지의 고정 여부를 설정합니다.</li>
<li data-name="background-blend-mode"><strong>background-blend-mode</strong> : 배경을 혼합했을 때의 상태를 설정합니다.</li>
<li data-name="background-clip"><strong>background-clip</strong> : 백그라운드 이미지의 위치 기준점을 설정하기 위한 속성입니다.</li>
<li data-name="background-color"><strong>background-color</strong> : 백그라운드 색을 설정합니다.</li>
<li data-name="background-image"><strong>background-image</strong> : 백그라운드 이미지 및 배경 속성을 설정합니다.</li>
<li data-name="background-origin"><strong>background-origin</strong> : 백그라운드 이미지의 위치 기준점을 설정하기 위한 속성입니다.</li>
<li data-name="background-position"><strong>background-position</strong> : 백그라운드 이미지의 위치 영역을 설정합니다.</li>
</ul>
</div>
</div>
</div>
</main>
<footer id="footer">
<a href="mailto:lee3ll@naver.com">lee3ll@naver.com</a>
</footer>
<script>
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 uesrWord = searchBox.value; //사용자가 입력한 키워드
searchList.forEach(el => {
// const cssName = el.getAttribute("data-name");
const cssName = el.dataset.name;
if(cssName.indexOf(uesrWord)){
//데이터가 있을 때
el.classList.add("hide");
} else {
//데이터가 없을 때
el.classList.remove("hide");
}
})
});
searchInfo.innerHTML = searchList.length;
</script>
</body>
</html>보충설명
🎈<hgroup> : 구성하는 여러 개의 제목 태그(<h1> ~ <h6>)를 하나의 그룹으로 묶어줄 때 사용합니다.
🎈 input 박스를 만들어 검색창을 만들어 줍니다. 검색창 안에는 placeholder 속성에 'CSS 속성을 입력해주세요!' 문구를 입력해 검색창 입력전 멘트를 만들어줍니다.
🎈li 리스트에는 검색가능한 CSS속성의 목록을 나열합니다.
🎈<keyup> : JavaScript 이벤트 중 하나입니다. 이 이벤트는 사용자가 키보드에서 키를 누르고 뗄 때 발생합니다.
🎈스크립트에 querySelector()로 선택자를 설정한 후 'addEventListener("keyup", () => ' 로 키보드 입력 시 이벤트를 더해줍니다.
🎈함수 안에 조건문을 사용하여 실행 해 줍니다.
🎈indexOf를 사용해 그 배열값이 0일 때 (else 에서 출력) 아래 박스와 같은 hide CSS를 주어 검색단어를 제외한 목록은 숨김처리가 가능하도록 입력해 줍니다.
.search__list li.hide {
display: none;
}