“ 당신이 6개월 이상 한 번도 보지 않은 코드는 다른 사람이 다시 만드는 게 훨씬 더 나을 수 있다. ”
검색 이펙트란?
검색 이펙트(Search Effect)란 검색 엔진에서 사용자가 검색어를 입력하고 결과를 검색하는 과정에서 일어나는 변화 혹은 효과를 말합니다.
검색 이펙트는 사용자와 검색 엔진 간의 상호작용으로 인해 발생합니다.
검색어의 입력 방식, 검색 결과의 정확도와 다양성, 검색 결과의 순서 등이 검색 이펙트에 영향을 미칩니다.
예를 들어, 사용자가 검색어를 입력할 때 검색어의 철자나 문법을 잘못 적는 경우, 검색 결과에 영향을 미칠 수 있습니다.
또한, 검색 결과가 정확하고 다양하면 사용자가 원하는 정보를 빠르게 찾을 수 있어 검색 이펙트가 긍정적으로 작용할 수 있습니다.
검색 엔진 최적화(SEO)는 검색 이펙트를 개선하기 위한 전략 중 하나입니다.
검색 엔진 최적화를 통해 웹사이트가 검색 결과 상위에 노출되면 사용자들은 해당 웹사이트를 더 많이 방문하게 되어 검색 이펙트를 높일 수 있습니다.
검색하기에 CSS 속성을 입력해보세요!
검색 이펙트 사이트 코드
<!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>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>
<!-- a -->
<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="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>
<!-- a -->
</ul>
</div>
</div>
</div>
</main>
(글이 너무 길어지는 것 같아서 CSS 속성은 a만 적었습니다.)
script 코드
<script>
//선택자
const searchBox = document.querySelector(".search__box input"); //검색
const searchList = document.querySelectorAll(".search__list li"); //목록 리스트
document.querySelector(".search__info span").textContent = searchList.length;
//검색
searchBox.addEventListener("keyup", () => {
const userWord = searchBox.value; //사용자가 입력한 키워드
searchList.forEach(el, index => {
// const cssName = el.getAttribute("data-name"); //이용방법1
const cssName = el.dataset.name; //이용방법2
if(cssName.indexOf(userd)){
//데이터가 있을 때
el.classList.add("hide");
} else {
//데이터가 없을 때
el.classList.remove("hide");
}
});
});
</script>
검색 박스에 입력한 단어와 목록 리스트의 데이터를 비교해서 일치하는 데이터가 있으면 해당 항목을 보여주고,
일치하지 않으면 숨기는 검색 기능을 만들어 주었습니다.
searchBox와 searchList 선택자로 만들어주고, 검색 결과를 보여주는 영역의 span 태그 내부 텍스트를 검색 리스트의 길이로 설정합니다.
검색 박스에 키 입력 이벤트 리스너를 추가하고 이벤트가 발생하면 사용자가 입력한 단어를 userWord 에 할당합니다.
모든 목록 리스트를 forEach 메서드를 이용하여 반복하면서, 각 요소의 데이터 속성인 data-name 값을 cssName 상수에 할당합니다.
getAttribute 메서드를 사용할 수도 있지만, 여기서는 dataset 속성을 사용하여 데이터 속성 값을 가져옵니다.
cssName과 userWord를 비교하여 일치하는 데이터가 있는 경우 해당 항목의 클래스 속성 값을 hide로 설정하여 숨깁니다. 반대로 일치하지 않는 경우 hide 클래스 속성 값을 제거하여 보여줍니다.
CSS 속성을 검색하는 효과
- 데이터 저장하기 : 변수
- 데이터 실행하기 : 화살표 함수
- 데이터 불러오기 : for문, forEach()
- 배열 객체 : indexOf(), search()
- 요소 객체 : querySelector(), querySelectorAll(), getAttribute()
- 요소 메서드 : element.style.속성명 : CSS 스타일 설정
- 요소 속성 : textContent, dataset
- 이벤트 객체 : keyup
참고 !
| 속성 | 속성 설명 |
| keyup | 키보드에서 키를 누르고 떼는 순간을 감지하는 이벤트입니다. |
| indexOf | 문자열(String) 메소드 중 하나로, 특정 문자열이 다른 문자열 내에서 처음으로 등장하는 위치를 찾아주는 메소드입니다. |
| search() | 문자열(String) 메소드 중 하나로, 특정 문자열이 다른 문자열 내에서 등장하는 첫 번째 위치를 찾아주는 메소드입니다. |
| getAttribute() | DOM 요소에서 속성(Attribute) 값을 가져오는 메소드입니다. |
| textContent | DOM 요소의 텍스트 콘텐츠를 가져오거나 수정하는 속성(Property)입니다. |
| dataset | DOM 요소의 data-* 속성 값을 가져오거나 설정하는 데 사용하는 속성(Property)입니다. |
