JAVASCRIPT
검색 이펙트 만들기
hyejeong3283
2023. 3. 23. 22:11
728x90
반응형
CSS 속성을 검색할 수 있는 검색 이펙트 페이지를 만들어 보았습니다.
검색 이펙트
검색 이펙트(Search Effect)는 검색 결과가 노출되는 것 자체가 인지적 영향을 미치는 현상을 말합니다. 검색 이펙트는 검색 엔진 결과 페이지(SERP)에서 웹사이트가 노출되는 위치, 타이틀, 설명 등의 정보에 영향을 받습니다.
검색 이펙트는 사용자들이 검색을 할 때, 검색 결과 페이지에서 웹사이트가 노출되는 위치에 따라 사용자의 인지적인 영향을 받기 때문에 중요합니다. 상위 검색 결과에 노출될수록, 해당 웹사이트를 방문하는 사용자 수가 늘어나고, 검색어에 대한 신뢰도가 높아집니다.
검색 이펙트는 검색 엔진 최적화(SEO) 전략에 중요한 영향을 미칩니다. 웹사이트가 검색 결과 페이지의 상위에 노출되도록 하는 SEO 전략을 수립하여 검색 이펙트를 최대한 활용할 수 있습니다.
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="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>
<!-- // 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="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>
<li data-name="background-repeat"><strong>background-repeat</strong> : 백그라운드 이미지 반복 여부를 설정합니다.</li>
<li data-name="background-size"><strong>background-size</strong> : 백그라운드 이미지 사이즈를 설정합니다.</li>
<li data-name="background"><strong>background</strong> : 백그라운드 속성을 일괄적으로 설정합니다.</li>
<li data-name="border"><strong>border</strong> : 테두리 속성을 일괄적으로 설정합니다.</li>
<li data-name="border-bottom"><strong>border-bottom</strong> : 테두리 아래쪽 속성을 일괄적으로 설정합니다.</li>
<li data-name="border-bottom-color"><strong>border-bottom-color</strong> : 테두리 아래쪽 색 속성을 설정합니다.</li>
<li data-name="border-bottom-left-radius"><strong>border-bottom-left-radius</strong> : 아래부분 왼쪽 모서리 굴곡을 설정합니다.</li>
<li data-name="border-bottom-right-radius"><strong>border-bottom-right-radius</strong> : 아래부분 오른쪽 모서리 굴곡을 설정합니다.</li>
<li data-name="border-bottom-style"><strong>border-bottom-style</strong> : 테두리 아래쪽 스타일 속성을 설정합니다.</li>
<li data-name="border-bottom-width"><strong>border-bottom-width</strong> : 테두리 아래쪽 두께 속성을 설정합니다.</li>
<li data-name="border-collapse"><strong>border-collapse</strong> : 테이블의 테두리 분리 여부를 설정합니다.</li>
<li data-name="border-color"><strong>border-color</strong> : 테두리 색 속성을 설정합니다.</li>
<li data-name="border-image"><strong>border-image</strong> : 테두리 이미지 속성을 설정합니다.</li>
<li data-name="border-image-outset"><strong>border-image-outset</strong> : 테두리 이미지 간격 속성을 설정합니다.</li>
<li data-name="border-image-repeat"><strong>border-image-repeat</strong> : 테두리 이미지 반복 속성을 설정합니다.</li>
<li data-name="border-image-slice"><strong>border-image-slice</strong> : 테두리 이미지 크기 속성을 설정합니다.</li>
<li data-name="border-image-source"><strong>border-image-source</strong> : 테두리 이미지 경로 속성을 설정합니다.</li>
<li data-name="border-image-width"><strong>border-image-width</strong> : 테두리 이미지 두께 속성을 설정합니다.</li>
<li data-name="border-left"><strong>border-left</strong> : 테두리 왼쪽 속성을 일괄적으로 설정합니다.</li>
<li data-name="border-left-color"><strong>border-left-color</strong> : 테두리 왼쪽 색 속성을 설정합니다.</li>
<li data-name="border-left-style"><strong>border-left-style</strong> : 테두리 왼쪽 스타일 속성을 설정합니다.</li>
<li data-name="border-left-width"><strong>border-left-width</strong> : 테두리 왼쪽 두께 속성을 설정합니다.</li>
<li data-name="border-radius"><strong>border-radius</strong> : 모서리 굴곡을 설정합니다.</li>
<li data-name="border-right"><strong>border-right</strong> : 테두리 오른쪽 속성을 일괄적으로 설정합니다.</li>
<li data-name="border-right-color"><strong>border-right-color</strong> : 테두리 오른쪽 색 속성을 설정합니다.</li>
<li data-name="border-right-style"><strong>border-right-style</strong> : 테두리 오른쪽 스타일 속성을 설정합니다.</li>
<li data-name="border-right-width"><strong>border-right-width</strong> : 테두리 오른쪽 두께 속성을 설정합니다.</li>
<li data-name="border-spacing"><strong>border-spacing</strong> : 테이블의 테두리 간격을 설정합니다.</li>
<li data-name="border-style"><strong>border-style</strong> : 테두리 스타일 속성을 설정합니다.</li>
<li data-name="border-top"><strong>border-top</strong> : 테두리 위쪽 속성을 일괄적으로 설정합니다.</li>
<li data-name="border-top-color"><strong>border-top-color</strong> : 테두리 위쪽 색 속성을 설정합니다.</li>
<li data-name="border-top-left-radius"><strong>border-top-left-radius</strong> : 윗부분 왼쪽 모서리 굴곡을 설정합니다.</li>
<li data-name="border-top-right-radius"><strong>border-top-right-radius</strong> : 윗부분 오른쪽 모서리 굴곡을 설정합니다.</li>
<li data-name="border-top-style"><strong>border-top-style</strong> : 테두리 위쪽 스타일 속성을 설정합니다.</li>
<li data-name="border-top-width"><strong>border-top-width</strong> : 테두리 위쪽 두께 속성을 설정합니다.</li>
<li data-name="border-width"><strong>border-width</strong> : 테두리 두께 속성을 설정합니다.</li>
<li data-name="bottom"><strong>bottom</strong> : 위치 요소의 아래쪽 속성을 설정합니다.</li>
<li data-name="box-decoration-break"><strong>box-decoration-break</strong> : 컬럼 및 줄바꿈시 테두리와 패딩의 방식을 설정합니다.</li>
<li data-name="box-shadow"><strong>box-shadow</strong> : 박스 요소의 그림자를 설정합니다.</li>
<li data-name="box-sizing"><strong>box-sizing</strong> : 요소 크기에 패딩 포함 여부를 설정합니다.</li>
</ul>
</div>
</div>
</div>
</main>
<footer id="footer">
<a href="mailto:hyejeong3283@gmail.com">hyejeong3283@gmail.com</a>
</footer>
</body>
</html>화면에 표시할 css 속성 종류와 설명을 search__list 클래스명을 가진 태그 안에
ul, li 태그를 사용하여 리스트로 만들어주었습니다.
Script
<script>
// 선택자 (전역변수)
const searchBox = document.querySelector(".search__box input"); // 검색
const searchList = document.querySelectorAll(".search__list li"); // 목록 리스트
const searchSum = document.querySelector(".search__info span"); // 목록 총 갯수
// console.log(searchList.length);
searchSum.textContent = searchList.length;
// 검색
searchBox.addEventListener("keyup", () => {
const userWord = searchBox.value; // 사용자가 입력한 키워드
searchList.forEach((el,i) => {
// const cssName = el.getAttribute("data-name");
const cssName = el.dataset.name; // 지역변수
// searchSum.textContent = i;
if(cssName.indexOf(userWord)){
// 데이터가 있을 때
el.classList.add("hide")
} else {
// 데이터가 없을 때
el.classList.remove("hide")
}
});
});
</script>script 정리
- document.querySelector(.클래스명)를 통해 해당 클래스명을 가지고 있는 태그들을 각 변수에 저장해줍니다.
- addEventListener("keyup") 메서드를 사용해 사용자가 입력한 내용을 지역 변수 userWord에 저장합니다.
- 사용자가 입력한 문자열이 searchList에 있는 값 중에 포함되어 있는지 확인하여 포함된 리스트를 화면에 보여주는 로직을 실행합니다.
- 이 때 비교대상은 searchList에 있는 li 이므로 그 수만큼 forEach()을 사용해 반복 실행합니다.
- if..else문을 사용하여 사용자가 입력한 값의 데이터가 있을 경우(true) 보여주고, 없을 경우(false) 숨겨줍니다.
- css 속성 목록의 총 갯수를 입력하기 위해 searchList.length를 통해 얻은 값을 .textContent를 사용해 화면에 보여줍니다.
용어 정리
| 속성 | 설명 |
| keyup | 키보드에서 키를 누르고 떼는 순간을 감지하는 이벤트 |
| indexOf | 문자열 메서드. 특정 문자열이 다른 문자열 내에서 처음으로 등장하는 위치를 찾아주는 메서드 |
| search() | 문자열 메서드. 특정 문자열이 다른 문자열 내에서 등장하는 첫 번째 위치를 찾아주는 메서드 |
| getAttribute() | DOM 요소에서 속성값을 가져오는 메서드 |
| dataset | DOM 요소의 data-* 속성 값을 가져오거나 설정하는 데 사용하는 속성 |
| textContent | DOM 요소의 텍스트 콘텐츠를 가져오거나 수정하는 속성 |
완성된 검색 이펙트