★ 순수 JavaScript Vanila JavaScript ★ JavaScript Library(API) jQuery ★ JavaScript FrameWork React Angular Vue ★ jQuery JQuery is a fast(x), small(x), and feature-rich JavaScript Library Lightweight Footprint CSS3 Compliant Cross-Browser ★ JQuery 다운로드 https://jquery.com/ jQuery What is jQuery? jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal..
★ 고양이 잡기 게임 5개의 단계에 거쳐 나타나는 고양이를 포획하는 게임 ■ HTML 코드 Catch Cat Ready ■ CSS 코드 ■ JavaScript ■ 실행 결과 ■ 시뮬레이션 HTML 삽입 미리보기할 수 없는 소스
★ 이동하는 고양이를 잡기 이동하는 고양이를 클릭하여 포착하기 ■ HTML 코드 ■ CSS 코드 ■ JavaScript ■ 실행 결과 ■ 시뮬레이션 HTML 삽입 미리보기할 수 없는 소스
★ 다량의 선 애니메이션 해당 선을 커서를 대면 선의 곡율 처럼 효과 ■ HTML 코드 ■ CSS 코드 ■ JavaScript ■ 실행 결과 ■ 시뮬레이션 HTML 삽입 미리보기할 수 없는 소스
★ 셀 클릭 애니메이션 셀을 클릭하였을 때, 애니메이션 처리 ■ HTML 코드 ■ CSS 코드 ■ JavaScript ■ 실행 결과 ■ 시뮬레이션 HTML 삽입 미리보기할 수 없는 소스
★ 이미지 뷰어 이미지 뷰어를 구현. ▷/|| 버튼을 누르면 시작/멈춤을 제어. 1초마다 순차적으로 이미지가 변경. 특정 버튼을 눌러 이미지를 변경한다. 자동 실행 중 특정 버튼을 누르면 타이머는 중단되고 누른 이미지가 출력된다. ■ HTML 코드 ■ CSS 코드 ■ JavaScript ■ 실행 결과 ■ 시뮬레이션 HTML 삽입 미리보기할 수 없는 소스
★ 사람 애니메이션 사람을 걷게 한다. 첫번째 사람 : 그냥 걷는다. 두번째 사람 : 누르면 앞으로 간다. 세번째 사람 : 누르면 걷기 시작하고, 다시 누르면 앞으로 간다. 네번째 사람 : 왔다 갔다 걷는다. 이미지 전체 크기 : 512 x 256 / 한 장면 크기 : 128 x 128 ■ HTML 코드 걷기 ■ CSS 코드 ■ JavaScript ■ 실행 결과 ■ 시뮬레이션 HTML 삽입 미리보기할 수 없는 소스
★ 새를 이용한 애니메이션 새를 날게 함. 이미지 전체 크기 : 800 x 140 / 한 장면 크기 : 200 x 140 ■ HTML 코드 새 날개짓 새의 속도 : 느림 보통 빠름 엄청빠름 ■ CSS 코드 ■ JavaScript ■ 실행 결과 ■ 시뮬레이션 HTML 삽입 미리보기할 수 없는 소스
