“ 지연되는 프로젝트에 인력을 더 투입하면 오히려 더 늦어진다. ”
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="searchEffect01.html">2</a></li>
<li><a href="searchEffect01.html">3</a></li>
<li><a href="searchEffect01.html">4</a></li>
<li><a href="searchEffect01.html">5</a></li>
<li><a href="searchEffect01.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> 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="align-content"><strong>align-content</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 ="word-spacing"><strong>word-spacing</strong> : 단어 사이 간격을 지정합니다.</li>
<li data-name ="word-wrap"><strong>word-wrap</strong> : 글자 단위에서 줄바꿈을 결정하는 방법을 지정합니다.</li>
<li data-name ="z-index"><strong>z-index</strong> : HTML/CSS에서 요소(element)들의 수직 위치를 결정하는 속성으로, 값이 높을수록 다른 요소들보다 위에 나타나게 됩니다.</li>
</ul>
</div>
</div>
</div>
</main>
<footer id="footer">
<a href="mailto:jo0132@naver.com">jo0132@naver.com</a>
</footer>
</body>
</html>
리스트로 정리한 css속성들을 검색하는 이펙트로 속성들을 리스트로 정리하고 input으로 검색하면 밑에 나오는 것으로 만든것입니다. 총 갯수는 sqan으로 받아 보여지게 합니다.
script
<script>
const searchBox = document.querySelector(".search__box input"); //검색
const searchList = document.querySelectorAll(".search__list li"); //목록 리스트
//검색
searchBox.addEventListener("keyup", () => {
const userWord = searchBox.value; // 사용자가 입력한 키워드
const cssNum = searchList.length;
searchList.forEach((el,i) => { //
// const cssName = el.getAttribute("data-name"); //getAttribute():속성을 가져올수 있스빈다. 여기선 li가 el이므로 li의 속성을 찾아 가져옵니다.
const cssName = el.dataset.name;
// document.querySelector(".search__info div span").textContent=i;
document.querySelector(".search__info div span").innerHTML = cssNum;
if(cssName.indexOf(userWord)){
// 데이터가 있을 때
el.classList.add("hide");
} else {
// 데이터각 없을 때
el.classList.remove("hide");
}
})
});
</script>먼저 input인 searchBox에 keyup이벤트를 부여합니다.
keyup은 사용자가 키보드를 누를 때마다 발생되는 이벤트입니다.
변수 userWord에 searchBox.value을 저장하고 변수 cssName에 searchList의 요소인 li의 data-name을 받아 저장합니다.
dataset : HTML 요소에 data-* 속성을 사용하여 데이터를 저장할 수 있습니다.
이때, getAttribute()을 활용하여 속성을 가져올수 있습니다. 여기선 li가 el이므로 li의 속성을 찾아 가져옵니다.
if문으로 cssName(searchList의 요소인 li의 data-name)에 userWord(searchBox.value)에 저장된값이 포함되는지 indexOf()을 사용하여 찾아낼 때
만약 있다면 요소인 li의 data-name에 hide를 추가하고 없다면 hide를 지웁니다.
이제 속성의 전체 갯수를 받기위해 searchlist의 전체 갯수를 받기위해 length로 전체 갯수를 받습니다.
이때 search__info의 span에 최종값을 받아 보여주게 되면 끝납니다..