728x90
검색 이펙트
페이지에 리스트를 만들고, 각각의 속성 명을 나타내는 리스트를 클릭하면, 해당 속성의 설명이 표시됩니다.
> 사이트 미리보기
자바스크립트
해당 이펙트의 자바스크립트는 아래에 이어지는 내용과 같습니다. 먼저, 속성에 대한 정보는 cssProperty라는 배열 안에 객체로 만들어 저장하였습니다. name은 속성 이름의 키값, desc는 속성 설명의 키값입니다. 이후 선택자를 통해 각 영역을 가리키는 변수를 만든 후, map() 과 innerHTML을 이용하여 설명을 출력합니다. 클릭 이벤트또는 검색어를 작성한 이벤트가 발생하면 findProperty라는 함수를 실행하며, findProperty 함수는 cssProperty에서 사용자가 클릭한 값을 찾아 비교한 뒤, 출력해야 할 설명을 골라 설명란에 출력해 줍니다. 만약 검색 결과가 없다면 검색한 결과가 없다는 메세지를 출력합니다.
const cssProperty = [
{ name: "accent-color", desc: " 요소의 강조 색상을 지정합니다. " },
{ name: "align-content", desc: " 콘텐츠 사이와 콘텐츠 주위 빈 공간을 플렉스 박스'의 교차축 또는 그리드의 블록 축을 따라 배치하는 방식을 결정합니다." },
{ name: "align-items", desc: " 교차축에서 아이템 정렬 하는 속성입니다. 주로 flex에서 item들을 정렬할 때 사용됩니다." },
.
.
.
{ name: "writing-mode", desc: " 텍스트의 선이 수평 또는 수직으로 배치 여부 속성 집합뿐만 아니라 블록이 진행되는 방향." },
{ name: "z-index", desc: " 엘리먼트의 겹쳐지는 순서를 지정한다." }
];
const searchList = document.querySelector(".search__list"); // 속성 리스트
const searchNum = document.querySelector(".search__info .num"); // 속성 리스트의 갯수를 출력할 부분
const searchBox = document.querySelector(".search__box input"); // 속성 검색란
const searchDesc = document.querySelector(".search__desc"); // 설명란
const searchBtn = document.querySelectorAll(".search__list span"); // 각각의 속성
//출력하기
cssProperty.map((element, index) => { // element는 cssProperty의 각각의 객체, index는 각 요소의 배열에서의 자릿값
searchNum.innerHTML = index + 1; // index 값은 0부터 시작하기 때문에 +1을 하여 전체 갯수를 표현해 줍니다.
searchList.innerHTML += "<span><strong>" + element.name + "</strong></span>"; // element.name은 각 객체(element)의 name 키 값을 이용해 속성명을 불러옵니다.
});
//입력하기
searchBox.addEventListener("keyup", ()=>{ // keyup 이벤트는 키를 눌렀다가 떼었을 때, 즉 문자가 입력되었을 때를 나타냅니다.
const searchWord = searchBox.value; // value를 통해 사용자가 입력한 문자를 불러옵니다.
findProperty(searchWord); // searchWord를 findProperty() 함수에 매개변수로 보내어 함수가 해당 값을 받아 사용할 수 있도록 합니다.
});
//속성 찾기
function findProperty(searchData){ // 받은 매개변수를 searchData라는 변수(매개변수)에 저장합니다.
const targetData = cssProperty.find((data) => data.name === searchData); // cssProperty의 각 요소(data)의 name값(속성명)을 불러와 searchData와 값은 값(객체)를 targetData에 저장합니다.
if(targetData == null || targetData == undefined){ //targetData(검색 결과)가 없거나 찾을 수 없는 경우, 실행문을 실행합니다.
searchDesc.textContent = "검색한 결과가 없습니다.";
return;
//한번 null이면 이미 출력이 된 상태이기 때문에 계속 실행되지 않고 끝나도록 종료의 의미로 return을 작성해 줌.
} else {
searchDesc.textContent = targetData.desc; // 그 외의 경우, targetData의 desc(설명)을 설명란에 출력합니다.
}
};
searchList.addEventListener("click", (e)=>{ // e는 리스트의 각각의 속성입니다.
findProperty(e.target.innerText); //e의 안에 있는 텍스트를 findProperty()함수의 매개변수로 보냅니다.
});
HTML
다음은 HTML 코드입니다. 검색어를 입력할 수 있는 input과 속성의 설명을 보여주는 .search__desc, 속성의 갯수를 보여주는 .search__info가 있습니다.
<main id="main">
<div class="search__wrap">
<span>find()을 이용하여 CSS 속성을 검색하면 설명 보여주기</span>
<h1>CSS 속성 검색하기</h1>
<div class="search__box">
<label for="search">검색하기</label>
<input type="text" id="search" placeholder="CSS 속성 및 유형을 입력해주세요!">
</div>
<div class="search__desc">
속성을 검색하시면 설명이 표시됩니다!
</div>
<div class="search__info">
<div>전체 속성 갯수 : <span class="num">0</span></div>
</div>
<div class="search__list">
</div>
</div>
</main>
<!-- main -->
728x90
댓글