★ 이미지 뷰어 이미지 뷰어를 구현. ▷/|| 버튼을 누르면 시작/멈춤을 제어. 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 삽입 미리보기할 수 없는 소스
★ 알고리즘 5 이동하는 마우스를 따라 고양이를 이동. 마우스의 괘적을 기록하는 큐 역할의 배열이 필요. let pathX = []; let pathY = []; pathX와 pathY에서 앞에서부터 하나씩 꺼내어 차례대로 고양이의 좌표로 지정. ■ HTML 코드 ■ CSS 코드 ■ JavaScript ■ 실행 결과 ★ 알고리즘 6 이동하는 마우스를 따라 고양이를 이동. 마우스의 괘적을 기록하는 큐 역할의 배열이 필요. let pathX = []; let pathY = []; pathX와 pathY에서 앞에서부터 하나씩 꺼내어 차례대로 고양이의 좌표로 지정. ■ HTML 코드 ■ CSS 코드 ■ JavaScript ■ 실행 결과 ★ 알고리즘 7 메뉴를 구현. 선택된 메뉴에 따라 문서 배경색과 글자색을 바..
★ 알고리즘 1 스크롤바 이동에 따라 배경색을 바꾸기 ■ HTML 코드 Index Lorem ipsum dolor sit amet consectetur adipisicing elit. Est, commodi, natus ex, iste fugiat provident doloremque mollitia numquam nulla perferendis ab. Repudiandae ullam veniam sit dolor quibusdam nemo excepturi impedit. About me Lorem ipsum dolor sit amet consectetur adipisicing elit. Et eius possimus recusandae repellat labore in officia eligendi ..
★ 알고리즘 1 문서를 클릭하면 해당 위치에 이미지를 추가 ■ HTML 코드 X ■ CSS 코드 ■ JavaScript ■ 실행 결과 ★ 알고리즘 2 문서를 클릭하면 해당 위치에 이미지를 추가 m01.png ~ m10.png 무작위로 추가 이미지를 최대 10개까지 출력 10개가 넘어가면 오래된 순서대로 삭제 ■ HTML 코드 X ■ CSS 코드 ■ JavaScript ■ 실행 결과 ★ 알고리즘 3 마우스를 올리면 이미지를 이동. 마우스 접근 방향에 따라 이미지 이동 방향을 다르게 함. ■ HTML 코드 ■ CSS 코드 ■ JavaScript ■ 실행 결과 ★ 알고리즘 4 발자국이 눌려진 곳은 점점 흙이 쌓인다. 누르는 횟수가 증가할 수록 배경 이미지를 어둡게 한다. td.style.backgroundCo..
★ Scroll에 반응하는 화면설계 window.onscroll : 스크롤을 컨트롤하는 함수 HTML 코드 Title Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores aliquid, facilis maxime, tempora, fuga voluptatem perferendis excepturi vitae aliquam sunt enim minus facere harum in! Nulla, itaque ex corrupti qui omnis nostrum quo consequatur cupiditate cumque molestias aliquam assumenda totam ratione porro. Deleniti veritati..
