전체 글75 [Vanilla JS] Animation Mouse cursor (Covid-19) JavaScript를 공부하면서 코딩 실력을 키우기 위해 작업하였습니다. 오늘은 코로나 19 사태를 위하는 마음으로 애니메이션을 이용한 간단한 코딩 작업을 하겠습니다. body를 viewport 잡고 mousemove시, eyeball값을 이벤트 처리합니다. function eyeball()이라는 함수를 만듭니다. 변수 eye에 forEach 함수를 사용하여 x, y값을 지정합니다. Element.getBoundingClientRect() 메서드는 요소의 크기와 뷰포트를 기준으로 한 위치를 반환합니다. event.pageX or event.pageY의 값들을 변수 x, y을 빼주어 마지막으로 style에 transform: rotate를 주어 mouse move 할 때마다 eye가 따라가는 style을 .. 2020. 5. 8. [JS] 스택 배열의 원하는 위치에 원소를 넣고 뺄 수 있음. 단지 원소를 추가/삭제하는 것 이상의 제어를 할 수 있는 형태의 자료 구조가 필요한 경우가 있는데, 바로 배열과 유사한 자료 구조인 스택과 큐가 있다. 1. 스택 (LIFO-Last In First Out) - 스택의 자료는 항상 동일한 종단점에서 추가/삭제된다. - 스택에서 종단점은 꼭대기와 바닥입니다. - 프로그래밍 언어의 컴파일러에서도 사용하는 자료 구조로서, 변수나 메소드 호출을 컴퓨터 메모르에 저장할 때 쓰인다. 2. 스택 만들기 function Stack() { // 프로퍼티와 메소드는 여기에 기술 } let items = [] // 스택의 원소를 담아둘 자료 구조 - push (원소) : 스택 꼭대기에 새 원소를 추가한다. - pop(): 스택.. 2020. 5. 8. [JS] Button style animation 2020. 5. 7. [JS] Mouseover Event 2020. 5. 7. 이전 1 ··· 13 14 15 16 17 18 19 다음
