Simple Is Best

이번 포스팅은 간단하게 보고 지나가겠습니다. 오늘의 Target 버튼을 클릭하면 '안녕하세요' 가 차례대로 0.5초의 간격을 두고 출력되는 애니메이션을 구현해보도록 하겠습니다. setTimeout 몇 초 후에 실행해주는 자바스크립트의 내장 함수입니다. 첫번째 인자에는 콜백함수 두번째 인자에는 몇 초 후에 실행할 건지에 대한 시간이 들어갑니다. (단위: 밀리초, 1000밀리초 -> 1초) setTimeout(()=>{ // 실행할 코드 }, 밀리초); 메인 코드 HTML 안녕하세요 눌러봐 ▶ 우리는 0.5 초마다 글씨를 출력해야 합니다. 따라서, setTimeout 을 반복문 내에서 동작시킵니다. 500(0.5초) , 1000(1초) , 1500(1.5초), 2000(2초) ..... 등으로 실행시킵니다...

안녕하세요! 오늘은 제이쿼리를 활용한 애니메이션 구현에 대해서 공부해보도록 하겠습니다. 어제 갑자기 잔여백신을 맞게 되어서 오늘 오른팔이 너무 뻐근해서 제 컨디션이 아니지만 여느 때와 마찬가지로 오늘도 공부 해 보겠습니다!! 오늘의 Target - 우리에게 익숙한 Web UI 일 것 같습니다. 특정 버튼을 클릭하면 왼쪽에서 새로운 메뉴 창이 뜨는 것을 자주 볼 수 있죠? 오늘 우리는 이것을 구현해보도록 하겠습니다. 1. 클릭 이전 2. 클릭 이후 animate( {원하는 CSS 속성: '속성 값' },밀리초 ); animate 메소드를 활용하면 원하는 애니메이션을 쉽게 구현 할 수 있습니다. 첫번 째 인자로는 원하는 CSS 속성과 CSS 속성 값을 넣어줍니다. [주의 할 점] 1. CSS 속성을 작성할 ..