이펙트 만들기/Search 이펙트 만들기5 서치 이펙트 05 서치 이펙트 자바스크립트를 이용한 검색 기능 효과 만들기 입니다. 서치 이펙트 05 - filter( )를 이용하여 속성의 중요도 보여주기 조건 적용이 가능한 filter( ) 메서드를 활용해 범위 검색을 하는 효과입니다. 1. 중요도 정리 및 레이아웃 만들기 속성 별 중요도(숫자)를 설정하고 시각적으로 알 수 있는 버튼을 만드는 작업입니다. 소스보기 -HTML- filter( )를 이용하여 속성의 중요도 보여주기 CSS 속성 검색하기 🌑🌑🌑🌑🌑 ⭐🌑🌑🌑🌑 ⭐⭐🌑🌑🌑 ⭐⭐⭐🌑🌑 ⭐⭐⭐⭐🌑 ⭐⭐⭐⭐⭐ ⭐ 1개 이상 ⭐ 2개 이상 ⭐ 3개 이상 ⭐ 4개 이상 전체 속성 갯수 : -CSS- :root { --htmlColor: #223547; --cssColor: #5042a4; --javascriptColo.. 2022. 9. 30. 서치 이펙트 04 서치 이펙트 자바스크립트를 이용한 검색 기능 효과 만들기 입니다. 서치 이펙트 03 - find( )를 이용한 속성 검색 find( ) 메서드를 사용해 검색 또는 목록 클릭 시 해당 속성의 설명이 출력되는 효과입니다. 1. 검색창 만들기 검색 창과 속성 목록, 속성의 설명이 쓰여질 공간을 만듭니다. 소스보기 -HTML- find( )를 이용하여 속성을 검색하면 설명 보여주기 CSS 속성 검색하기 검색하기 속성을 검색하시면 설명이 표시됩니다!!! 전체 속성 갯수 : -CSS- /* main */ #main { margin: 50px 10px; } .search__wrap { max-width: 1400px; margin: 0 auto; border: 3px solid var(--htmlColor); bor.. 2022. 9. 29. 서치 이펙트 03 서치 이펙트 자바스크립트를 이용해서 CSS 속성 요소를 검색하는 효과 만들기입니다. 서치 이펙트 03 charAt( ) 메소드를 이용해서 CSS 속성 요소를 검색하는 효과입니다. 1. 검색 목록 만들기 //SCRIPT 파트 //선택자 const searchKeyword = document.querySelectorAll(".search__info .keyword span"); //검색 영역 const searchList = document.querySelectorAll(".search__list ul li"); //목록 리스트 const searchInfo = document.querySelector(".search__info .num"); //전체 갯수 //속성 갯수 구하기 searchInfo.textC.. 2022. 8. 23. 서치 이펙트 02 서치 이펙트 자바스크립트를 이용해서 CSS 속성 요소를 검색하는 효과 만들기입니다. 서치 이펙트 02 includes( ) 메소드를 이용해서 CSS 속성 요소를 검색하는 효과입니다. indexOf( ) 메소드를 사용해 만든 서치 이펙트 01과 똑같지만 이번엔 includes( ) 메소드를\ 이용한다는 차이점이 있습니다. \ includes( ) 메소드에 대한 자세한 설명은 이 곳에서 보실 수 있습니다. 1. 검색 목록 만들기 //SCRIPT 파트 //선택자 const searchBox = document.querySelector(".search__box input"); //검색 영역 const searchList = document.querySelectorAll(".search__list ul li");.. 2022. 8. 18. 서치 이펙트 01 서치 이펙트 자바스크립트를 이용해서 HTML과 CSS, JAVASCRIPT의 요소를 검색하는 효과 만들기입니다. 서치 이펙트 01 indexOf( ) 메소드를 이용해서 HTML 태그를 검색하는 효과입니다. 서치 효과는 문자열에서 특정 문자의 위치를 찾고 숫자를 반환해주는 indexOf( ) 메소드를 사용해 사용자의 검색 키워드와 일치하는 문자를 간추려서 보여주도록 합니다. indexOf( ) 메소드에 대한 자세한 설명은 이 곳에서 보실 수 있습니다. 1. 검색 목록 만들기 //CSS //JAVASCRIPT 마지막으로 검색 데이터 키워드와 검색 목록의 값을 비교해서 선택적으로 출력해주는 작업입니다. if문을 사용해서 키워드가 일치하지 않으면 hide class를 추가해 숨기고 일치한 것은 hide clas.. 2022. 8. 16. 이전 1 다음
