오늘은 CSS속성 검색 사이트를 만들어볼게요
오늘은 css 속성이 많아서 소스가 길어지기 때문에 소스 보기로 소스를 새창에서 띄워주세요 !
CSS 부분의 오늘의 POINT !
이번엔 반응형웹으로 사이트를 만들어 볼꺼야
지금까지 사이트를 만들땐 요소의 크기를 width : 10px or 10%로 설정하는 경우가 많었어
이렇게 줄경우 화면을 줄일경우 문제가 생기더라구 !
이럴땐 vw와 vh가 써서 해결할수있어 !
vw와 vh는 뷰포트 크기(주로 브라우저창의 크기)의 100분의 1에 해당하는 단위야
예를 들어 브라우저 창의 높이가 500px일때 1vh는 5px이고
마찬가지로 브라우저 창의 넓이가 500px이라면 1vw는 5px이야
그래서 주로 반응형 브라우져에서 사용하구 이를통해서 이번엔 css 를 작업했어 !
css는 이번엔 쓰던것만 써서 익숙하더라구 !
script 부분이에요 오늘의 POINT !
if(cssName.indexOf(userWord)){
//cssName.indexOf(userWord)이 값이 없을경우
el.classList.add("hide");
console.log("cssName.indexOf(userWord) : ", cssName.indexOf(userWord));
}else{
//cssName.indexOf(userWord)이 값이 있을경우
//데이터가 있을경우엔 remove를 써서 hide를 제거하기 때문에 화면에 출력됨
//그리고 num++을 통해서 있는 데이터값을 1 더해줌
num++;
el.classList.remove("hide");
}오늘은 indexOf()를 썻어요 요 함수를 알아볼게요
Array.indexOf ( searchElement [fromIndex])
searchElement
배열안에 찾을값을 넣는 위치에요 !
fromIndex
검색을 시작할 색인입니다. 인덱스가 배열의 길이보다 크거나 같은 경우 -1이 반환되므로 배열이 검색되지 않습니다.
제공된 색인 값이 음수이면 배열 끝에서부터의 오프셋 값으로 사용됩니다.
제공된 색인이 음수이면 배열은 여전히 앞에서 뒤로 검색됩니다.
계산 된 인덱스가 0보다 작 으면 전체 배열이 검색됩니다. 기본값 : 0 (전체 배열 검색)
indexOf() 반환 값
배열 내의 요소의 최초의 인덱스 && 발견되지 않으면 -1.을 반환해요 !
indexOf() 의 원리
indexOf()는 엄격한 동등성 (=== 또는 triple-equals 연산자에서 사용하는 것과 같은 메서드)을
사용하여 입력받은 검색 요소를 비교할 Array의 요소와 비교합니다.
그래서 정확한 값이 아닌경우 -1을 반환해요
검색받은 CSS의 갯수를 다음 이미지와 같이 만들어봤어요 !
위 이미지 처럼 css 속성을 실시간으로 조회해서 우측하단의 CSS속성갯수를 찾을 수 있도록 만들어 봤어요
//갯수를 넣어줄 span
const searchTOT = document.querySelector(".search__info span");
//num 갯수를 searchBox.addEventListener("keyup",)에서 키업 이벤트가 발생할때마다 갯수를 갱신해주는 변수
let num =0;
searchBox.addEventListener("keyup", ()=>{
const userWord = searchBox.value; //사용자가입력한 키워드
searchList.forEach((el , i)=>{
// const cssName = el.getAttribute("data-name");
const cssName = el.dataset.name;
if(cssName.indexOf(userWord)){
//cssName.indexOf(userWord)이 값이 없을경우
el.classList.add("hide");
//console.log("cssName.indexOf(userWord) : ", cssName.indexOf(userWord));
}else{
//cssName.indexOf(userWord)이 값이 있을경우
//데이터가 있을경우엔 remove를 써서 hide를 제거하기 때문에 화면에 출력됨
//그리고 num++을 통해서 있는 데이터값을 1 더해줌
num++;
el.classList.remove("hide");
}
if(i == searchList.length-1 && num>=0 ){
searchTOT.innerText = num;
//console.log("chk")
num =0;
}
})
});
//상단에서 querySelectorAll로 가져온 목록리스트의 길이를 searchList.length로 구할수있어요
//목록리스트의 길이라고 쓰고 갯수라고 표현하는것 searchTOT에 값을 innerText로 넣어줘요
searchTOT.innerText = searchList.length;기본적인 구조는 indexOf()의 반환값이 -1이 아닐경우에 num++을 해줘서 갯수를 올렸어요
if문안에는 forEach문이 배열 0번값부터 끝까지 반복 하기 때문에 arr.length-1을 해줬어요
해당조건이 뜻하는건 마지막 forEach문에서 스크립트를 실행하는거에요
searchTOT.innerText = num ; 이므로
searchBox.addEventListener("keyup", ()=>{} 안에 조건이 있기 때문에 키를
searchTOT.innerText 값이 키를 누를때 마다 num값으로 치환해줘요
맨마지막의
searchTOT.innerText = searchList.length; 구문은
초기값 세팅이에요 !