검색 효과6 검색 효과 7 검색 이펙트 이번 검색 이펙트는 2분 동안 CSS 속성 검색하기 게임 효과입니다. > 사이트 미리보기 원본 소스 보기 자바스크립트 해당 이펙트의 자바스크립트는 아래에 이어지는 내용과 같습니다. 먼저, 속성에 대한 정보는 이전과 같이 cssProperty라는 배열 안에 객체로 만들어 저장하였습니다. name은 속성 이름의 키값, desc는 속성 설명의 키값입니다. input에 입력된 값을 value로 불러오고, 불러온 입력값을 cssPropertythr css의 이름과 비교합니다. 정답이 있는 경우 input에 입력된 값을 초기화하고 맞춘 정답을 리스트에 추가합니다. 시간이 끝나면 맞추지 못한 속성들을 오답 리스트에 추가하여 보여줍니다. const searchTime = document.querySelec.. 2022. 10. 20. 검색 효과 6 검색 이펙트 이번 검색 이펙트는 sort(), reverse()를 이용하여 정렬하기 효과입니다. > 사이트 미리보기 원본 소스 보기 자바스크립트 해당 이펙트의 자바스크립트는 아래에 이어지는 내용과 같습니다. 먼저, 속성에 대한 정보는 이전과 같이 cssProperty라는 배열 안에 객체로 만들어 저장하였습니다. name은 속성 이름의 키값, desc는 속성 설명의 키값입니다. 이번에는 추가적으로 num이라는 키값에 1~382의 숫자를 저장하여 순서를 정해주었습니다. 정렬 버튼을 누를 때마다 리스트에 sort(), reverse()를 이용해 각 버튼의 내용처럼 정렬되어 출력하도록 하였습니다. 랜덤정렬은 피셔에이츠 알고리즘을 이용하였습니다. const cssList = document.querySelecto.. 2022. 10. 20. 검색 효과 5 검색 이펙트 이번 검색 이펙트는 filter()를 이용하여 CSS 속성의 중요도를 보여주는 효과입니다. > 사이트 미리보기 원본 소스 보기 자바스크립트 해당 이펙트의 자바스크립트는 아래에 이어지는 내용과 같습니다. 먼저, 속성에 대한 정보는 이전과 같이 cssProperty라는 배열 안에 객체로 만들어 저장하였습니다. name은 속성 이름의 키값, desc는 속성 설명의 키값입니다. 이후 선택자를 통해 각 영역을 가리키는 변수를 만든 후, updateList() 함수를 통해 해당 부분에 텍스트를 출력합니다. 클릭 이벤트는 forEach()문을 이용하여 각 버튼을 누를 때마다 작동하도록 하였으며, 매개변수를 함수로 보냅니다. const searchList = document.querySelector(".s.. 2022. 9. 29. 검색 효과 4 검색 이펙트 페이지에 리스트를 만들고, 각각의 속성 명을 나타내는 리스트를 클릭하면, 해당 속성의 설명이 표시됩니다. > 사이트 미리보기 원본 소스 보기 자바스크립트 해당 이펙트의 자바스크립트는 아래에 이어지는 내용과 같습니다. 먼저, 속성에 대한 정보는 cssProperty라는 배열 안에 객체로 만들어 저장하였습니다. name은 속성 이름의 키값, desc는 속성 설명의 키값입니다. 이후 선택자를 통해 각 영역을 가리키는 변수를 만든 후, map() 과 innerHTML을 이용하여 설명을 출력합니다. 클릭 이벤트또는 검색어를 작성한 이벤트가 발생하면 findProperty라는 함수를 실행하며, findProperty 함수는 cssProperty에서 사용자가 클릭한 값을 찾아 비교한 뒤, 출력해야 할 설.. 2022. 9. 28. 검색 효과 3 검색 이펙트 페이지에 리스트를 만들고, input박스를 만들어 사용자가 리스트의 내용을 검색할 수 있게 한 효과입니다. > 사이트 미리보기 원본 소스 보기 자바스크립트 해당 이펙트의 자바스크립트는 아래에 이어지는 내용과 같습니다. 먼저 검색영역(사용자가 검색하고 싶은 내용을 입력하는 곳)과, 목록리스트를 선택하는 선택자를 지정합니다. 이후 사용자가 입력한 키워드를 변수에 저장한 후, 리스트의 데이터 값에 사용자 키워드가 포함되는지 확인하며 리스트를 숨기고 보이게 합니다. 또한 사용자가 키워드 버튼을 눌러 특정 알파벳으로 시작하는 속성만 볼 수 있도록 하였습니다. 리스트의 테이터 값에 사용자 키워드가 포함되는지는, 문자열 메서드의 하나인 indexOf() / search() 메서드를 사용합니다. > 선택자.. 2022. 8. 22. 검색 효과 1 검색 이펙트 페이지에 리스트를 만들고, input박스를 만들어 사용자가 리스트의 내용을 검색할 수 있게 한 효과입니다. > 사이트 미리보기 원본 소스 보기 자바스크립트 해당 이펙트의 자바스크립트는 아래에 이어지는 내용과 같습니다. 먼저 검색영역(사용자가 검색하고 싶은 내용을 입력하는 곳)과, 목록리스트를 선택하는 선택자를 지정합니다. 이후 사용자가 입력한 키워드를 변수에 저장한 후, 리스트의 데이터 값에 사용자 키워드가 포함되는지 확인하며 리스트를 숨기고 보이게 합니다. 이를 위해 각 리스트에 data-name="" 속성을 부여하여 데이터 값을 비교할 수 있도록 합니다. 리스트의 테이터 값에 사용자 키워드가 포함되는지는, 문자열 메서드의 하나인 indexOf() 메서드를 사용합니다. > 선택자 다중선택이.. 2022. 8. 16. 이전 1 다음 728x90
