Effect(자바스크립트 활용)/Search Effect 서치이펙트6 "서치 이펙트" Search 07. 2분 동안 CSS 속성 검색하기 게임 만들기! 🗒 서치이펙트 07 : 검색 게임 만들기! 📌 2분동안 진행되게 자바스크립트를 이용해서 만들어주기 📌 맞은 점수 나오도록 자바스크립트 이용하기 CSS 속성 검색창 만들기! 실제 사이트보기 원본 소스보기 CSS 소스보기 HTML 코드 보기를 펼쳐 봐주세요 :) 헤더 부분은 이전 것과 동일하여 메인부분만 넣었습니다! 코드 보기 CSS 속성 검색 이벤트 2분 동안 CSS 속성 검색하기 2분 동안 CSS 속성을 많이 검색하면 점수가 올라갑니다. 힌트보기는 한 번 이용할 수 있습니다. 2:00 검색하기 게임 시작! 전체 속성 갯수 : 0 현재 맞춘 갯수 : 0 다시 도전하기 CSS 자바스크립트로 없었다가 나오게 하는 부분들을 표현하기 위해서 없었던 부분에는 display:none처리를 해주어야 합니다. 코드 보기.. 2022. 10. 21. "서치 이펙트" Search 05. filter() 메서드를 활용하여 검색 화면 만들기 🗒 서치이펙트 05 📌 filter()을 이용하여 검색 화면을 만들어 봅시다. 📌 속성 중요도에 따라 속성을 볼 수 있는 이펙트입니다. CSS 속성 검색창 만들기! 실제 사이트보기 원본 소스보기 CSS 소스보기 HTML ∙ search__click은 중요도에 따른 분류를 볼 수 있도록 구분한 버튼이라고 생각하시면 됩니다. ∙ data-star=""은 나중에 자바스크립트로 데이터값을 인덱스를 통해 불러오기 위함입니다. filter()을 이용하여 속성의 중요도 보여주기 CSS 속성 검색하기 ☆☆☆☆☆ ★☆☆☆☆ ★★☆☆☆ ★★★☆☆ ★★★★☆ ★★★★★ 1개 이상 2개 이상 3개 이상 4개 이상 전체 속성 갯수 : 0 찾은 속성 갯수 : 0 CSS 새로 추가된 CSS 부분입니다. .search__click .. 2022. 9. 30. "서치 이펙트" Search 04. find() 메서드를 활용하여 검색 화면 만들기 🗒 서치이펙트 04 📌 find()을 이용하여 검색 화면을 만들어 봅시다. 📌 원하는 css속성을 적으면 해당 값이 나오게 하며, 또 다른 방법으로 css속성을 클릭하면 돋보기 옆으로 설명이 나오게 하는 이펙트입니다. CSS 속성 검색창 만들기! 실제 사이트보기 원본 소스보기 CSS 소스보기 HTML ∙ search__box에 input을 넣어줍니다. ∙ search__desc은 속성에 대한 설명을 나오게 합니다. find()을 이용하여 속성을 검색하면 설명 보여주기 CSS 속성 검색하기 검색하기 속성을 검색하시면 설명이 나타납니다. 전체 속성 갯수 : 0 CSS 새로 추가된 CSS 부분입니다. .search__desc { padding: 20px 40px 20px 60px; margin-bottom: .. 2022. 9. 28. "서치 이펙트" Search 03. charAt() 메서드를 활용하여 검색 화면 만들기 🗒 서치이펙트 03 📌 charAt()을 이용하여 검색 화면을 만들어 봅시다. 📌 서치이펙트 01, 02와 다르게 검색하는 창을 없애고 알파벳을 누르면 첫글자로 그 알파벳을 포함하고 있는 단어들이 나오게 하는 것이 특징인 유형입니다. HTML 태그 검색창 만들기! 실제 사이트보기 원본 소스보기 CSS 소스보기 HTML 첫글자를 클릭하면 관련 단어가 나올 수 있도록 div태그를 이용하여 class를 keyword로 지정해주어 a부터 z까지 작성합니다. 전체 속성 갯수가 뜨는 부분도 있으니 이 부분도 div태그로 묶어주어야 합니다. 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 전체 속성 갯수 : .. 2022. 8. 23. "서치 이펙트" Search 02. includes() 메서드를 활용하여 검색 화면 만들기 서치이펙트 02 includes()을 이용하여 검색 화면을 만들어 봅시다. HTML 태그 검색창 만들기! 실제 사이트보기 원본 소스보기 CSS 소스보기 ▶ 카테고리 만들기 카테고리를 만들기 위해 HTML로 먼저 틀을 짜주어야 합니다. HTML 1 2 3 4 5 6 list를 이용하여 목차가 있는 구조로 깔끔하게 카테고리를 짤 수 있습니다. 해당 페이지에 class="active"를 넣어주셔야 어느 페이지에 있는지 쉽게 알 수 있습니다. CSS /* header */ #header { display: flex; justify-content: space-between; } #header nav { margin: 10px; } #header nav li { position: relative; display: .. 2022. 8. 17. "서치 이펙트" Search 01. indexOf() 메서드를 활용하여 검색 화면 만들기 서치이펙트 01 indexOf()를 활용하여 검색 화면을 만들어 봅시다. HTML 태그 검색창 만들기! 실제 사이트보기 원본 소스보기 CSS 소스보기 ▶ 카테고리 만들기 카테고리를 만들기 위해 HTML로 먼저 틀을 짜주어야 합니다. HTML 1 2 3 4 5 6 list를 이용하여 깔끔하게 카테고리를 짤 수 있습니다. CSS /* header */ #header { display: flex; justify-content: space-between; } #header nav { margin: 10px; } #header nav li { position: relative; display: inline; } #header nav li a { width: 30px; height: 30px; border: 1px.. 2022. 8. 16. 이전 1 다음
