Bible, Lee, Data
Faith, software, data, and everyday life.
AnimationAll posts
[jQuery] Effect Function: 전용 / 범용 이벤트 함수
🍁전용 함수와 범용 함수전용 이벤트 함수객체.이벤트함수(콜백함수)$('#btn1').click(function() { alert();});위 코드는 클릭 이벤트만을 처리하는 함수이다.이렇게 하나의 이벤트만을 처리하는 함수를 전용 이벤트 함수라고 한다. 범용 이벤트 함수객체.on(이벤트명, 콜백함수)$('#btn2').on('click', function() { alert();})on은 범용 함수로, 이벤트명을 입력해야 한다.이벤트명에 따라서 다양한 이벤트를 처리하는 함수를 범용 이벤트 함수라고 한다.반대로 객체의 이벤트를 해제할 때에는 off 함수를 사용한다. 🍁Effect Function1. hide(time), show(time), toggle(time)2. fadeOut(time), ..
[JavaScript] CSS 조작: transtion 구현
🍁transition 구현 타이머를 사용해 CSS에서 transition을 구현한 것처럼 자바스크립트에서도 비슷한 효과를 줄 수 있다. 자바스크립트는 제어를 할 수 있다는 점에서 CSS의 transiton과 차이가 있다. [CSS] transition (전환) 🍁transition transition은 객체의 속성(상태) 값이 변화되는 과정을 시간 순서대로 보여주는 애니메이션 속성이다. 이 작업은 본래 JavaScript에서나 할 수 있는 것이었다. 하지만 지금은 CSS에서 간단하 isaac-christian.tistory.com [CSS] animation (애니메이션) 🍁animation CSS 객체의 움직임을 단순하게 표현할 때에는 transition을 사용한다. animation은 그보다 더 나아..
[CSS] animation (애니메이션)
🍁animationCSS 객체의 움직임을 단순하게 표현할 때에는 transition을 사용한다.animation은 그보다 더 나아가 움직임을 세밀하게 통제할 수 있는 옵션이 존재한다. [CSS] transition (전환)🍁transition transition은 객체의 속성(상태) 값이 변화되는 과정을 시간 순서대로 보여주는 애니메이션 속성이다. 이 작업은 본래 JavaScript에서나 할 수 있는 것이었다. 하지만 지금은 CSS에서 간단하isaac-christian.tistory.comtransition에 대해서는 위 글을 참고하도록 하자. 🍁animation의 사용animation-name: 프레임(움직임)을 정의animation-duration: 소요 시간animaiton-fill-mode..
[CSS] transition (전환)
🍁transitiontransition은 객체의 속성(상태) 값이 변화되는 과정을 시간 순서대로 보여주는 애니메이션 속성이다.이 작업은 본래 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; trans..
[CSS] transform (변형): 메뉴 구현
🍁transformtransform에는 위치, 배율, 회전, 왜곡 변형까지 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는 위치 변형(이동)을 한..
