EFFECT/SEARCH6 EFFECT | SEARCH | sort( ), reverse( )를 이용하여 정렬하기 searchEffect | sort(), reverse()를 이용하여 정렬하기 오늘의 목표 💡 여러 정렬 구현하기(오름차순, 내림차순, 알파벳순, ...) 💡 랜덤 정렬하기 💡 카테고리별 정렬하기 1. 사이트 구조 살펴보기 HTML 살펴보기 속성 목록은 자바스크립트로 표현해주기 위해 비워두었습니다. sort(), reverse()를 이용하여 정렬하기 CSS 속성 정렬하기 반대로 정렬하기 오름차순 정렬하기 내림차순 정렬하기 알파벳순(a~z) 알파벳순(z~a) 랜덤 정렬하기 카테고리별 정렬하기 animation background border column flex font grid inset line list margin mask max min offset outline overflow overscroll .. 2022. 10. 17. EFFECT | SEARCH | filter()를 이용하여 속성의 중요도 보여주기 searchEffect | filter()를 이용하여 속성의 중요도 보여주기 오늘의 목표 💡 스크립트를 통해 속성 리스트를 나타내기 💡 중요도에 따라 리스트 나타내기 오늘의 미션 👉🏻 난이도 1개 이상, 2개 이상,... 버튼 구현하기 1. 사이트 구조 살펴보기 HTML 살펴보기 속성 목록은 자바스크립트로 표현해주기 위해 비워두었습니다. filter()를 이용하여 속성의 중요도 보여주기 CSS 속성 검색하기 ☆☆☆☆☆ ★☆☆☆☆ ★★☆☆☆ ★★★☆☆ ★★★★☆ ★★★★★ 1개 이상 2개 이상 3개 이상 4개 이상 CSS 속성 갯수 : 2. script 살펴보기 📌 속성 리스트 만들고 출력하기 속성 리스트는 cssProperty 내 배열 속 객체로 만들어주었고 map을 활용하여 출력해주었습니다. 📌 난이도.. 2022. 10. 17. SEARCH | 검색 유형04 searchEffect | find()를 이용하여 속성 설명 나타내기 오늘의 목표 💡 스크립트를 통해 속성 리스트를 나타내기 💡 데이터를 입력하고 리스트와 비교하여 설명 출력하기 오늘의 미션 👉🏻 속성 버튼을 클릭했을 때도 설명 출력되도록 만들기 1. 사이트 구조 살펴보기 HTML 살펴보기 속성 목록은 자바스크립트로 표현해주기 위해 비워두었습니다. find()를 이용하여 속성을 검색하면 설명 보여주기 CSS 속성 검색하기 검색하기 속성을 검색하시면 설명이 표시됩니다. !!! CSS 속성 갯수 : 2. script 살펴보기 📌 속성 리스트 만들고 출력하기 속성 리스트는 cssProperty 내 배열 속 객체로 만들어주었고 map을 활용하여 출력해주었습니다. 📌 속성을 검색했을때 설명 출력하기 addEven.. 2022. 9. 29. SEARCH | 검색 유형03 SEARCH 효과를 만들어보자 ! 문자열 메서드 charAt( )을 활용하여 검색 페이지를 만들어봅시다. 이번에는 검색 효과가 아닌 키워드별로 나누어 볼 수 있도록 만들어주었습니다. 원본 소스 보기 HTML을 살펴봅시다 ! charAt()를 이용하여 검색하기 CSS 속성 첫글자 검색하기 a b c d e f g h i j k l m n o p q r s t u v w x y z ... + 검색 부분을 없애고 알파벳 키워드를 표시 CSS를 살펴봅시다 ! .search__info .keyword { text-align: center; margin-bottom: 10px; } .search__info .keyword span { border: 2px solid var(--htmlColor); border-ra.. 2022. 8. 22. SITE | 검색유형 | includes( ) SEARCH 효과를 만들어보자 ! 문자열 메서드 includes( )을 활용하여 검색 페이지를 만들어봅시다. 원본 소스 보기 script를 살펴봅시다 ! const searchInfo = document.querySelector(".search__info .num") searchInfo.innerHTML = searchList.length > 전체 CSS 속성 갯수를 script로 추가시켜줍니다. 사용자가 입력한 키워드를 searchBox에 저장 ↓ dataset.name으로 css 속성의 모든 값을 불러옴 ↓ 값 중에서 사용자가 입력한 값이 있으면 숨김 해제 / 없으면 숨김 추가 2022. 8. 17. SEARCH | 검색 유형01 SEARCH 효과를 만들어보자 ! SEARCH 효과를 만들어 HTML/CSS/JAVASCRIPT 검색 페이지를 만들어봅시다. 원본 소스 보기 script를 살펴봅시다 ! addEventListener("keyup") | 이벤트 메서드 중 keyup은 키를 눌렀다가 뗐을 때 이벤트가 실행됩니다. indexOf | 문자열 메서드인 indexOf는 문자열에서 특정 문자의 위치를 찾아 숫자로 반환시켜 줍니다. indexOf( )를 활용해 0(false)이 되는 값만 hide를 지워 원하는 값이 나타날 수 있도록 해줍니다. 2022. 8. 17. 이전 1 다음
