jQuery Trend
- 3. 그까이꺼 뭐... 대충 검색해서 붙여다 쓰면 되지
- 4. ...라고 2005년까지는 그렇게 생각했었습니다.
- 5. 2005년에 Ajax가 등장한 이후
- 7. 아마 대부분은 이런 표정을 짓겠죠
- 8. jQuery를 사용하면 삽질을 줄일 수 있습니다.
- 10. 아이유 jQuery가 대세
- 11. 83.7% jQuery 10.4% 8.6% MooTools Prototype 2011년12월현재 http://w3techs.com/technologies/overview/javascript_library/all
- 12. 이미 만들어진 자료가 많다는 뜻입니다.
- 13. 물어볼 사람이 많다는 뜻도 됩니다.
- 14. 아무것도 모를 때는 대세를 따르는 게 좋습니다.
- 15. 자바스크립트는 거의 대부분 HTML과 함께 사용됩니다.
- 16. jQuery를 사용하기 위해 알아야 할 것: - 웹 브라우저 사용법 - CSS 선택자
- 17. 당장 시작할 수 있는 CSS: div 태그 선택자 #id 아이디 선택자 .class 클래스 선택자
- 18. 당장 시작할 수 있는 CSS: div div id=id class=class #id div id=id class=class .class div id=id class=class
- 19. jQuery를 사용하는 2단계 Image: Danilo Rizzuti / FreeDigitalPhotos.net
- 20. 1. 선택하고
- 21. 2. 실행한다
- 22. 선택 $('#MENU').hide(); 실행
- 23. ForDesigner CSS body{background-color:red;} jQuery $('body').css('background-color','red'); Image: nuttakit / FreeDigitalPhotos.net
- 24. ForDesigner CSS body{background-color:red;} jQuery $('body').css('background-color','red'); Image: nuttakit / FreeDigitalPhotos.net
- 25. ForDesigner CSS body{background-color:red;} jQuery $('body').css('background-color','red'); Image: nuttakit / FreeDigitalPhotos.net
- 26. ForDesigner CSS body{background-color:red;} jQuery $('body').css('background-color','red'); Image: nuttakit / FreeDigitalPhotos.net
- 27. Image: Danilo Rizzuti / FreeDigitalPhotos.net Plugins Image: Sujin Jetkasettakorn / FreeDigitalPhotos.net Image: phanlop88 / FreeDigitalPhotos.net
- 28. OpenJS Grid
- 30. HTML5 DragDrop Uploader ( http://goo.gl/xsBV6 )
- 31. 사용자 인터페이스
- 35. jQuery(#nivoslider-125).nivoSlider({ effect:random, slices:15, boxCols:8, boxRows:4, animSpeed:500, pauseTime:3000, startSlide:0, That's all directionNav:true, directionNavHide:true, controlNav:true, controlNavThumbs:false, controlNavThumbsFromRel:true, keyboardNav:true, pauseOnHover:true, manualAdvance:false });
- 36. 애니메이션
- 37. 플래시의 시대는 끝났습니다.
- 38. 어도비는 앞으로 안드로이드와 블랙 베리 플레이북을 위한 '플래시 플레이 어 11.1'을 끝으로 업그레이드 제품을 내놓지 않기로 했다 - 전자신문 2011년 11월 10일자
- 40. 그래서 생각한 것이 HTML4, CSS, jQuery를 함께 사용하는 것이었습니다. - CA 12월호
- 43. HTML ul { CSS ul list-‐style:none; lia href=#Home/a/li margin:0; lia href=#About/a/li padding:0; lia href=#Contact/a/li } li { /ul float:left; width:100px; margin:0; padding:0; Image } text-‐align:center; li a { display:block; padding:5px 10px; height:100%; $('#nav a') jQuery color:#FFF; .css( {backgroundPosition: 0 0} ) text-‐decoration:none; .mouseover(function(){ border-‐right:1px solid #FFF; $(this).stop().animate( } {backgroundPosition:(0 -‐250px)}, li a { {duration:500}) }) background:url(bg.jpg) repeat 0 .mouseout(function(){ 0; $(this).stop().animate( } {backgroundPosition:(0 0)}, li a:hover { {duration:500}) background-‐position:50px 0; }) }
- 44. jQuery Mobile
- 47. CSS를 잘 몰라도 어렵지 않아~요~
- 49. Mobile App
- 50. 2009 2011. 10 2011. 11
- 51. Apache Callback이 지원하는 플랫폼과 기능
- 54. Stock images http://www.flickr.com/photos/maniya/4020026753/ http://www.flickr.com/photos/inferis/266391219/ http://www.flickr.com/photos/colodio/4301458933/ http://www.flickr.com/photos/nettsu/4423387852/ http://www.flickr.com/photos/ivyfield/4802227735/ http://www.flickr.com/photos/ivyfield/4800359168/ http://www.flickr.com/photos/boellstiftung/6322064224/ http://www.flickr.com/photos/chrisbartow/6474456991/ http://www.flickr.com/photos/jm3/4683685/