🍁전용 함수와 범용 함수 전용 이벤트 함수 객체.이벤트함수(콜백함수) $('#btn1').click(function() { alert(); }); 위 코드는 클릭 이벤트만을 처리하는 함수이다. 이렇게 하나의 이벤트만을 처리하는 함수를 전용 이벤트 함수라고 한다. 범용 이벤트 함수 객체.on(이벤트명, 콜백함수) $('#btn2').on('click', function() { alert(); }) on은 범용 함수로, 이벤트명을 입력해야 한다. 이벤트명에 따라서 다양한 이벤트를 처리하는 함수를 범용 이벤트 함수라고 한다. 반대로 객체의 이벤트를 해제할 때에는 off 함수를 사용한다. 🍁Effect Function 1. hide(time), show(time), toggle(time) 2. fadeOut(t..
🍁transition 구현 타이머를 사용해 CSS에서 transition을 구현한 것처럼 자바스크립트에서도 비슷한 효과를 줄 수 있다. 자바스크립트는 제어를 할 수 있다는 점에서 CSS의 transiton과 차이가 있다. [CSS] transition (전환) 🍁transition transition은 객체의 속성(상태) 값이 변화되는 과정을 시간 순서대로 보여주는 애니메이션 속성이다. 이 작업은 본래 JavaScript에서나 할 수 있는 것이었다. 하지만 지금은 CSS에서 간단하 isaac-christian.tistory.com [CSS] animation (애니메이션) 🍁animation CSS 객체의 움직임을 단순하게 표현할 때에는 transition을 사용한다. animation은 그보다 더 나아..
🍁animation CSS 객체의 움직임을 단순하게 표현할 때에는 transition을 사용한다. animation은 그보다 더 나아가 움직임을 세밀하게 통제할 수 있는 옵션이 존재한다. [CSS] transition (전환) 🍁transition transition은 객체의 속성(상태) 값이 변화되는 과정을 시간 순서대로 보여주는 애니메이션 속성이다. 이 작업은 본래 JavaScript에서나 할 수 있는 것이었다. 하지만 지금은 CSS에서 간단하 isaac-christian.tistory.com transition에 대해서는 위 글을 참고하도록 하자. 🍁animation의 사용 animation-name: 프레임(움직임)을 정의 animation-duration: 소요 시간 animaiton-fill-..
🍁transition transition은 객체의 속성(상태) 값이 변화되는 과정을 시간 순서대로 보여주는 애니메이션 속성이다. 이 작업은 본래 JavaScript에서나 할 수 있는 것이었다. 하지만 지금은 CSS에서 간단하게 구현할 수 있다. transition의 사용 상자 body { padding-bottom: 500px; /* body의 영역을 넓힘 (margin은 객체의 영역이 아니므로 padding을 사용) */ } #box { border: 10px solid black; width: 200px; height: 200px; background-color: gold; margin: 100px; transition-property: width; transition-duration: 1s; } b..
🍁transform transform에는 위치, 배율, 회전, 왜곡 변형까지 4가지 변형을 할 수 있다. translate, scale, rotate를 주로 사용한다. 기본 코드 상자1 상자2 상자3 .box { border: 1px solid black; width: 200px; height: 200px; margin: 30px; } #box1 { background-color: tomato; } #box2 { background-color: gold; } #box3 { background-color: cornflowerblue; } 위 코드를 이용하여 transform을 구현해 보도록 하자. 1. translate() translate는 위치 변형(이동)을 한다. 이동을 하더라도 기존의 공간이 남아있..
