★ 알고리즘 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 ..
★ 알고리즘 6 보안키 입력패드를 구현 ■ HTML 코드 비밀번호 입력 사용법 숫자 4자리를 입력한다. enter를 누른다. 구현할 것 숫자 버튼을 눌러 입력한다. del 버튼을 눌러 삭제한다. 4자리 이상 입력이 되지 않는다. 정답 암호 : 0425 암호가 틀리면 붉게 변한다. 암호가 맞으면 파랗게 변한다. 3회 틀리면 작동이 불가능하다. 상단 숫자키로 입력할 수 있다. 우측 숫자키로 입력할 수 있다. 백스페이스, Delete, Enter 키로 입력할 수 있다. ■ CSS 코드 ■ JavaScript ■ 실행 결과 ★ 알고리즘 7 고양이/강아지를 생성 후 테이블에 넣는다. 만들기 버튼을 눌러 고양이/강아지를 생성. 드래그로 이동시켜 테이블에 넣는다. 테이블에 넣어진 고양이/강아지는 더 이상 이동이 불가..
★ 알고리즘 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..
★ 겹치는 이미지 어떤 태그들이 깔려있는지 볼 수 있는 방법 특정 포인트에 겹쳐있는 모든 태그? document.elementFromPoint document.elementsFromPoint console.log(document.elementFromPoint(x,y)); console.log(document.elementsFromPoint(x,y)); 실행 결과 ★ Transform 을 JavaScript에서 작동하기 ★ 상위 메뉴 만들기 HTML 코드 CSS 코드 JavaScript 실행 결과 ★ Select 박스를 이용한 이미지 표출 HTML 코드 고양이 고양이1 고양이2 고양이3 고양이4 고양이5 CSS 코드 JavaScript 실행 결과 ★ 배경 이미지를 이용한 응용 HTML 코드 배경 이미지 C..
★ JAVASCRIPT 로 CSS 조작하기 불편한 방법 //BOM // box.style = 'font-size : 2rem;'; //DOM // box.setAttribute('style', 'font-size : 3rem;'); //관리 불편;; > 모든걸 문자열로 조작 box.style = 'backgroud-color : black; color : white; font-size : 3rem;'; 유용한 방법 box.style.color = 'blue'; box.style['color'] = 'white'; box.style.backgroundColor = 'black'; box.style['background-color'] = 'white'; box.style['font-size'] = '3rem..
