본문 바로가기

검색이펙트5

[Search Effect] 검색 이펙트 07 검색 이펙트 만들기 07 이번 시간에는 그 동안 배웠던 JavaScript를 이용하여 검색 이펙트를 만들어보도록 하겠습니다. 2분 동안 CSS 속성명을 입력하면 점수가 올라가는 형태의 미니 게임을 만들어 보겠습니다. 자, 그럼 시작해볼까요? HTML 소스 보기 검색 이펙트 07의 HTML 소스와 부연 설명(주석 처리됨)이다. CSS 소스를 함께 보고 싶다면 맨 아래의 'CSS 소스 보기' 버튼을 누를 것. 코드 펼쳐보기 Search 01 02 03 04 05 06 07 CSS 속성 검색 이벤트 2분동안 CSS 속성 검색 2분 동안 CSS 속성을 많이 검색하면 점수가 올라갑니다. 기억이 나지 않으면, 힌트 보기를 한 번 이용할 수 있습니다. 2:00 검색하기 버튼을 누르면 게임이 시작됩니다. 전체 속성 개.. 2022. 10. 21.

[Search Effect] 검색 이펙트 06 검색 이펙트 만들기 06 이번 시간에는 그 동안 배웠던 JavaScript를 이용하여 검색 이펙트를 만들어보도록 하겠습니다. 이번 학습 내용을 잘 활용하여 그동안 배웠던 CSS 속성들을 검색창 형식으로 원하는 결과가 나오도록 만들어보도록 합시다. 나중에 모르는 게 생겼을 때 공부하기 편하게 말이죠! 자, 그럼 시작해볼까요? HTML 소스 보기 검색 이펙트 06의 HTML 소스와 부연 설명(주석 처리됨)이다. CSS 소스를 함께 보고 싶다면 맨 아래의 'CSS 소스 보기' 버튼을 누를 것. Search 01 02 03 04 05 06 sort(), reverse()를 이용하여 정렬하기 CSS 속성 정렬하기 반대로 정렬 내림차순 정렬 오름차순 정렬 알파벳순(a~z) 알파벳순(z~a) 랜덤 정렬 전체 속성 개.. 2022. 10. 21.

[Search Effect] 검색 이펙트 03 검색 이펙트 만들기 03 이번 시간에는 그 동안 배웠던 JavaScript를 이용하여 검색 이펙트를 만들어보도록 하겠습니다. 이번 학습 내용을 잘 활용하여 그동안 배웠던 CSS 속성들을 검색창 형식으로 원하는 결과가 나오도록 만들어보도록 합시다. 나중에 모르는 게 생겼을 때 공부하기 편하게 말이죠! 자, 그럼 시작해볼까요? HTML 소스 보기 검색 이펙트 03의 HTML 소스와 부연 설명(주석 처리됨)이다. CSS 소스를 함께 보고 싶다면 맨 아래의 'CSS 소스 보기' 버튼을 누를 것. Search 01 02 03 04 05 06 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. 22.

[Search Effect] 검색 이펙트 02 검색 이펙트 만들기 02 이번 시간에는 그 동안 배웠던 JavaScript를 이용하여 검색 이펙트를 만들어보도록 하겠습니다. 이번 학습 내용을 잘 활용하여 그동안 배웠던 CSS 속성들을 검색창 형식으로 원하는 결과가 나오도록 만들어보도록 합시다. 나중에 모르는 게 생겼을 때 공부하기 편하게 말이죠! 자, 그럼 시작해볼까요? HTML 소스 보기 검색 이펙트 02의 HTML 소스와 부연 설명(주석 처리됨)이다. CSS 소스를 함께 보고 싶다면 맨 아래의 'CSS 소스 보기' 버튼을 누를 것. Search 01 02 03 04 05 06 indexOf()를 이용하여 검색하기 CSS 속성 검색하기 검색하기 플렉스, 애니메이션, 백그라운드, 기타 등등 유형별로 검색해보세요. 전체 속성 개수 : 0 accent-c.. 2022. 8. 17.

[Search Effect] 검색 이펙트 01 검색 이펙트 만들기 01 이번 시간에는 그 동안 배웠던 JavaScript를 이용하여 검색 이펙트를 만들어보도록 하겠습니다. 이번 학습 내용을 잘 활용하여 그동안 배웠던 HTML 태그와 CSS 속성, JavaScript 실행문들을 검색창에 키워드를 입력해서 설명을 볼 수 있는 페이지를 만들어보도록 합시다. 나중에 모르는 게 생겼을 때 공부하기 편하게 말이죠! 자, 그럼 시작해볼까요? HTML 소스 보기 검색 이펙트 01의 HTML 소스와 부연 설명(주석 처리됨)이다. CSS 소스를 함께 보고 싶다면 맨 아래의 'CSS 소스 보기' 버튼을 누를 것. Search 01 HTML CSS JavaScript 02 03 04 05 06 indexOf()를 이용하여 검색하기 HTML 태그 검색하기 검색하기 a : .. 2022. 8. 16.

이전 1 다음

Reference Book

JavaScript

JavaScript

HTML

HTML

CSS

CSS

광고 준비중입니다.

티스토리툴바