마크업개발 메모장

전에 transform으로 이미지 위아래로 움직이는 법을 포스팅 한적이 있다.하지만 그 후에 잘 쓰지 않게되서 금방 까먹어버렸;;;기에ㅠㅠ다시 복습하는 차원에서 공부해보았다. 오늘은 이미지를 확대/축소 시킬수 있는 zoomin효과를 만들어봤다.이미지에 마우스 오버가 되거나 스크롤할때 zoomin 효과를 주면 별거 아니지만 좀 있어보이는 것 같다. ㅋㅋ아.. 하지만 이미지는 잘못 사용하면 위험하므로 예제는 텍스트로 만들었다ㅠㅠ이미지로 해야한다면 background로 넣어주면 된다는 것~!! 생각보다 어렵지 않다! 연습예제 > http://jsfiddle.net/dmyjbbk9/3/ 여기서 중요한 것은!1. zoomin이 되는 엘리먼트를 감싸는 부모 엘리먼트에 overflow : hidden ; 을 꼭 넣어..

CSS3 animation으로 이미지를 상하로 움직이기!!!소스보러가기 !! 추가 설명)animation: myfirst 0.7s linear 1s infinite alternate; @keyframes myfirst { 0% {opacity: 1.0; top:15px;} 100% {opacity: 1.0; top:0px;}} 여기에서 myfirst라는 것은 애니메이션 이름임.키프레임에서 애니메이션 이름을 동일하게 사용해주면 해당 애니메이션이 작동하게 됨.애니메이션 이름은 사용자가 정할 수 있음. w3schools 상세 설명 보기

transition 속성은 아래와 같음 /* For Safari 3.1 to 6.0 */-webkit-transition-property: width; // transition을 설정할 css 속성, 모든 속성에 적용할 경우는 all)-webkit-transition-duration: 1s; // transition이 지속되는 시간-webkit-transition-timing-function: linear; // transition 변화의 움직임, linear , ease , ease-in , ease-out , ease-in-out 등-webkit-transition-delay: 2s; // transition이 일어나기 전 대기 시간 /* Standard syntax */transition-prope..