SlideShare a Scribd company logo
jQuery and...?
김태곤
자바스크립트는 쉽습니다.
그까이꺼 뭐... 대충 검색해서 붙여다 쓰면 되지
...라고 2005년까지는 그렇게 생각했었습니다.
2005년에 Ajax가 등장한 이후
자바스크립트가 어려워졌다!
아마 대부분은 이런 표정을 짓겠죠
jQuery를 사용하면 삽질을 줄일 수 있습니다.
아이유   jQuery가 대세
83.7%
                        jQuery
                                                 10.4%                    8.6%
                                                MooTools              Prototype




2011년12월현재   http://w3techs.com/technologies/overview/javascript_library/all
이미 만들어진 자료가 많다는 뜻입니다.
물어볼 사람이 많다는 뜻도 됩니다.
아무것도 모를 때는 대세를 따르는 게 좋습니다.
자바스크립트는
거의 대부분 HTML과
 함께 사용됩니다.
jQuery를 사용하기 위해 알아야 할 것:

- 웹 브라우저 사용법
  - CSS 선택자
당장 시작할 수 있는 CSS:
  div      태그 선택자
  #id      아이디 선택자
  .class   클래스 선택자
당장 시작할 수 있는 CSS:
div      div id=id class=class
#id      div id=id class=class
.class   div id=id class=class
jQuery를 사용하는 2단계




         Image: Danilo Rizzuti / FreeDigitalPhotos.net
1. 선택하고
2. 실행한다
선택


$('#MENU').hide();

                 실행
ForDesigner

  CSS     body{background-color:red;}


 jQuery   $('body').css('background-color','red');




                                                                            Image: nuttakit / FreeDigitalPhotos.net
ForDesigner

  CSS     body{background-color:red;}


 jQuery   $('body').css('background-color','red');




                                                                            Image: nuttakit / FreeDigitalPhotos.net
ForDesigner

  CSS     body{background-color:red;}


 jQuery   $('body').css('background-color','red');




                                                                            Image: nuttakit / FreeDigitalPhotos.net
ForDesigner

  CSS     body{background-color:red;}


 jQuery   $('body').css('background-color','red');




                                                                            Image: nuttakit / FreeDigitalPhotos.net
Image: Danilo Rizzuti / FreeDigitalPhotos.net




                        Plugins


Image: Sujin Jetkasettakorn / FreeDigitalPhotos.net      Image: phanlop88 / FreeDigitalPhotos.net
OpenJS Grid
SlideDeck ( http://goo.gl/t1qbB )
HTML5 DragDrop Uploader ( http://goo.gl/xsBV6 )
사용자 인터페이스
$(.multiselect).twosidedmultiselect();
http://jqueryui.com
nivo slider (http://nivo.dev7studios.com/)
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
  });
애니메이션
플래시의 시대는 끝났습니다.
어도비는 앞으로 안드로이드와 블랙
베리 플레이북을 위한 '플래시 플레이
어 11.1'을 끝으로 업그레이드 제품을
내놓지 않기로 했다
- 전자신문 2011년 11월 10일자
그래서 생각한 것이 HTML4, CSS, jQuery를
 함께 사용하는 것이었습니다. - CA 12월호
http://robot.anthonycalzadilla.com/
http://snook.ca/technical/jquery-bg/
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;
 	
   	
     })
                                                                }
jQuery Mobile
http://jquerymobile.com
http://jquerymobile.com/demos/1.0/
CSS를 잘 몰라도 어렵지 않아~요~
http://jquerymobile.com/themeroller/
Mobile App
2009


           2011. 10




2011. 11
Apache Callback이 지원하는 플랫폼과 기능
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/

More Related Content

Viewers also liked

[하코사세미나] 한 시간 만에 배우는 Jquery
[하코사세미나] 한 시간 만에 배우는 Jquery[하코사세미나] 한 시간 만에 배우는 Jquery
[하코사세미나] 한 시간 만에 배우는 Jquery
정석 양
 
Fiddler: 웹 디버깅 프록시
Fiddler: 웹 디버깅 프록시Fiddler: 웹 디버깅 프록시
Fiddler: 웹 디버깅 프록시
Taegon Kim
 
ReactJS | 서버와 클라이어트에서 동시에 사용하는
ReactJS | 서버와 클라이어트에서 동시에 사용하는ReactJS | 서버와 클라이어트에서 동시에 사용하는
ReactJS | 서버와 클라이어트에서 동시에 사용하는
Taegon Kim
 
4-3. jquery
4-3. jquery4-3. jquery
4-3. jquery
JinKyoungHeo
 
4-2. ajax
4-2. ajax4-2. ajax
4-2. ajax
JinKyoungHeo
 
jQuery 구조와 기능
jQuery 구조와 기능jQuery 구조와 기능
jQuery 구조와 기능
Kenu, GwangNam Heo
 
오늘 당장 시작하는 HTML5
오늘 당장 시작하는 HTML5오늘 당장 시작하는 HTML5
오늘 당장 시작하는 HTML5
Taegon Kim
 
처음배우는 자바스크립트, 제이쿼리 #2
처음배우는 자바스크립트, 제이쿼리 #2처음배우는 자바스크립트, 제이쿼리 #2
처음배우는 자바스크립트, 제이쿼리 #2
성일 한
 
나의 jQuery 실력 향상기
나의 jQuery 실력 향상기나의 jQuery 실력 향상기
나의 jQuery 실력 향상기
정석 양
 
처음배우는 자바스크립트, 제이쿼리 #3
처음배우는 자바스크립트, 제이쿼리 #3처음배우는 자바스크립트, 제이쿼리 #3
처음배우는 자바스크립트, 제이쿼리 #3
성일 한
 
Fiddler 피들러에 대해 알아보자
Fiddler 피들러에 대해 알아보자Fiddler 피들러에 대해 알아보자
Fiddler 피들러에 대해 알아보자
용진 조
 
처음배우는 자바스크립트, 제이쿼리 #4
처음배우는 자바스크립트, 제이쿼리 #4처음배우는 자바스크립트, 제이쿼리 #4
처음배우는 자바스크립트, 제이쿼리 #4
성일 한
 
처음배우는 자바스크립트, 제이쿼리 #1
처음배우는 자바스크립트, 제이쿼리 #1처음배우는 자바스크립트, 제이쿼리 #1
처음배우는 자바스크립트, 제이쿼리 #1
성일 한
 
[ 하코사세미나] 의외로 쉬운 D3 그래프 퍼블리싱
[ 하코사세미나] 의외로 쉬운 D3 그래프 퍼블리싱[ 하코사세미나] 의외로 쉬운 D3 그래프 퍼블리싱
[ 하코사세미나] 의외로 쉬운 D3 그래프 퍼블리싱
정석 양
 
React in Native Apps - Meetup React - 20150409
React in Native Apps - Meetup React - 20150409React in Native Apps - Meetup React - 20150409
React in Native Apps - Meetup React - 20150409
Minko3D
 
그런데 스타트업이 뭐더라
그런데 스타트업이 뭐더라그런데 스타트업이 뭐더라
그런데 스타트업이 뭐더라
Hyun-woo Park
 
스타트업에서 기술책임자로 살아가기
스타트업에서 기술책임자로 살아가기스타트업에서 기술책임자로 살아가기
스타트업에서 기술책임자로 살아가기
Hyun-woo Park
 
Clojure
ClojureClojure
Clojure
Rohit Vaidya
 
BOSS around the web
BOSS around the webBOSS around the web
BOSS around the web
Jai Santhosh
 
Hack with YUI
Hack with YUIHack with YUI
Hack with YUI
Jai Santhosh
 

Viewers also liked (20)

[하코사세미나] 한 시간 만에 배우는 Jquery
[하코사세미나] 한 시간 만에 배우는 Jquery[하코사세미나] 한 시간 만에 배우는 Jquery
[하코사세미나] 한 시간 만에 배우는 Jquery
 
Fiddler: 웹 디버깅 프록시
Fiddler: 웹 디버깅 프록시Fiddler: 웹 디버깅 프록시
Fiddler: 웹 디버깅 프록시
 
ReactJS | 서버와 클라이어트에서 동시에 사용하는
ReactJS | 서버와 클라이어트에서 동시에 사용하는ReactJS | 서버와 클라이어트에서 동시에 사용하는
ReactJS | 서버와 클라이어트에서 동시에 사용하는
 
4-3. jquery
4-3. jquery4-3. jquery
4-3. jquery
 
4-2. ajax
4-2. ajax4-2. ajax
4-2. ajax
 
jQuery 구조와 기능
jQuery 구조와 기능jQuery 구조와 기능
jQuery 구조와 기능
 
오늘 당장 시작하는 HTML5
오늘 당장 시작하는 HTML5오늘 당장 시작하는 HTML5
오늘 당장 시작하는 HTML5
 
처음배우는 자바스크립트, 제이쿼리 #2
처음배우는 자바스크립트, 제이쿼리 #2처음배우는 자바스크립트, 제이쿼리 #2
처음배우는 자바스크립트, 제이쿼리 #2
 
나의 jQuery 실력 향상기
나의 jQuery 실력 향상기나의 jQuery 실력 향상기
나의 jQuery 실력 향상기
 
처음배우는 자바스크립트, 제이쿼리 #3
처음배우는 자바스크립트, 제이쿼리 #3처음배우는 자바스크립트, 제이쿼리 #3
처음배우는 자바스크립트, 제이쿼리 #3
 
Fiddler 피들러에 대해 알아보자
Fiddler 피들러에 대해 알아보자Fiddler 피들러에 대해 알아보자
Fiddler 피들러에 대해 알아보자
 
처음배우는 자바스크립트, 제이쿼리 #4
처음배우는 자바스크립트, 제이쿼리 #4처음배우는 자바스크립트, 제이쿼리 #4
처음배우는 자바스크립트, 제이쿼리 #4
 
처음배우는 자바스크립트, 제이쿼리 #1
처음배우는 자바스크립트, 제이쿼리 #1처음배우는 자바스크립트, 제이쿼리 #1
처음배우는 자바스크립트, 제이쿼리 #1
 
[ 하코사세미나] 의외로 쉬운 D3 그래프 퍼블리싱
[ 하코사세미나] 의외로 쉬운 D3 그래프 퍼블리싱[ 하코사세미나] 의외로 쉬운 D3 그래프 퍼블리싱
[ 하코사세미나] 의외로 쉬운 D3 그래프 퍼블리싱
 
React in Native Apps - Meetup React - 20150409
React in Native Apps - Meetup React - 20150409React in Native Apps - Meetup React - 20150409
React in Native Apps - Meetup React - 20150409
 
그런데 스타트업이 뭐더라
그런데 스타트업이 뭐더라그런데 스타트업이 뭐더라
그런데 스타트업이 뭐더라
 
스타트업에서 기술책임자로 살아가기
스타트업에서 기술책임자로 살아가기스타트업에서 기술책임자로 살아가기
스타트업에서 기술책임자로 살아가기
 
Clojure
ClojureClojure
Clojure
 
BOSS around the web
BOSS around the webBOSS around the web
BOSS around the web
 
Hack with YUI
Hack with YUIHack with YUI
Hack with YUI
 

Similar to jQuery Trend

XECon+PHPFest2014 발표자료 - 효율적인 css 개발방법 - 최대영
XECon+PHPFest2014 발표자료 - 효율적인 css 개발방법 - 최대영XECon+PHPFest2014 발표자료 - 효율적인 css 개발방법 - 최대영
XECon+PHPFest2014 발표자료 - 효율적인 css 개발방법 - 최대영
XpressEngine
 
웹표준(XHTML+CSS)
웹표준(XHTML+CSS)웹표준(XHTML+CSS)
웹표준(XHTML+CSS)
ymtech
 
4주 CSS Layout
4주 CSS Layout4주 CSS Layout
4주 CSS Layout지수 윤
 
코드스쿼드 마스터즈세미나 - UI개발자가돼보자
코드스쿼드 마스터즈세미나 - UI개발자가돼보자코드스쿼드 마스터즈세미나 - UI개발자가돼보자
코드스쿼드 마스터즈세미나 - UI개발자가돼보자
지수 윤
 
Hacosa j query 7th
Hacosa j query 7thHacosa j query 7th
Hacosa j query 7th
Seong Bong Ji
 
Dreamweaver CS5.5 를 이용한 jQueryMobile 개발
Dreamweaver CS5.5 를 이용한 jQueryMobile 개발Dreamweaver CS5.5 를 이용한 jQueryMobile 개발
Dreamweaver CS5.5 를 이용한 jQueryMobile 개발
JongKwang Kim
 
Front-end Development Process - 어디까지 개선할 수 있나
Front-end Development Process - 어디까지 개선할 수 있나Front-end Development Process - 어디까지 개선할 수 있나
Front-end Development Process - 어디까지 개선할 수 있나
JeongHun Byeon
 
Web_05_ jQuery
Web_05_ jQueryWeb_05_ jQuery
Web_05_ jQuery
team air @ Dimigo
 
웹표준 (XHTML + CSS)
웹표준 (XHTML + CSS)웹표준 (XHTML + CSS)
웹표준 (XHTML + CSS)
ymtech
 
[115] clean fe development_윤지수
[115] clean fe development_윤지수[115] clean fe development_윤지수
[115] clean fe development_윤지수
NAVER D2
 
에어_HTML/CSS_02
에어_HTML/CSS_02에어_HTML/CSS_02
에어_HTML/CSS_02
Hiddenest Lee
 
Opinion 프로젝트 발표 자료
Opinion 프로젝트 발표 자료Opinion 프로젝트 발표 자료
Opinion 프로젝트 발표 자료
joonseokkim11
 
딥러닝(Deep Learing) using DeepDetect
딥러닝(Deep Learing) using DeepDetect딥러닝(Deep Learing) using DeepDetect
딥러닝(Deep Learing) using DeepDetect
Junyi Song
 
Html5 소개 가이드
Html5 소개 가이드Html5 소개 가이드
Html5 소개 가이드Jong-hyun Park
 
[별천지 세미나] CSS3 Animation
[별천지 세미나] CSS3 Animation[별천지 세미나] CSS3 Animation
[별천지 세미나] CSS3 Animation양귀 김
 
실무가를 위한 Sns 커뮤니케이션 시각화
실무가를 위한 Sns 커뮤니케이션 시각화실무가를 위한 Sns 커뮤니케이션 시각화
실무가를 위한 Sns 커뮤니케이션 시각화Sue Hyun Jung
 
191011 SVG를 배경이미지로 활용한 아이콘 삽질기 - 코인원 오혜진 (W3C HTML5 Conference)
191011 SVG를 배경이미지로 활용한 아이콘 삽질기 - 코인원 오혜진 (W3C HTML5 Conference)191011 SVG를 배경이미지로 활용한 아이콘 삽질기 - 코인원 오혜진 (W3C HTML5 Conference)
191011 SVG를 배경이미지로 활용한 아이콘 삽질기 - 코인원 오혜진 (W3C HTML5 Conference)
Hyejin Oh
 
Web Standards HTML5_CSS3
Web Standards HTML5_CSS3Web Standards HTML5_CSS3
Web Standards HTML5_CSS3
Eulsoo Jung
 
HTML5 & CSS3
HTML5 & CSS3HTML5 & CSS3
HTML5 & CSS3
Eulsoo Jung
 
02_CSS -작심 10시간! 나만의 웹사이트 기획하고 만들기
02_CSS -작심 10시간! 나만의 웹사이트 기획하고 만들기02_CSS -작심 10시간! 나만의 웹사이트 기획하고 만들기
02_CSS -작심 10시간! 나만의 웹사이트 기획하고 만들기
설리번 프로젝트
 

Similar to jQuery Trend (20)

XECon+PHPFest2014 발표자료 - 효율적인 css 개발방법 - 최대영
XECon+PHPFest2014 발표자료 - 효율적인 css 개발방법 - 최대영XECon+PHPFest2014 발표자료 - 효율적인 css 개발방법 - 최대영
XECon+PHPFest2014 발표자료 - 효율적인 css 개발방법 - 최대영
 
웹표준(XHTML+CSS)
웹표준(XHTML+CSS)웹표준(XHTML+CSS)
웹표준(XHTML+CSS)
 
4주 CSS Layout
4주 CSS Layout4주 CSS Layout
4주 CSS Layout
 
코드스쿼드 마스터즈세미나 - UI개발자가돼보자
코드스쿼드 마스터즈세미나 - UI개발자가돼보자코드스쿼드 마스터즈세미나 - UI개발자가돼보자
코드스쿼드 마스터즈세미나 - UI개발자가돼보자
 
Hacosa j query 7th
Hacosa j query 7thHacosa j query 7th
Hacosa j query 7th
 
Dreamweaver CS5.5 를 이용한 jQueryMobile 개발
Dreamweaver CS5.5 를 이용한 jQueryMobile 개발Dreamweaver CS5.5 를 이용한 jQueryMobile 개발
Dreamweaver CS5.5 를 이용한 jQueryMobile 개발
 
Front-end Development Process - 어디까지 개선할 수 있나
Front-end Development Process - 어디까지 개선할 수 있나Front-end Development Process - 어디까지 개선할 수 있나
Front-end Development Process - 어디까지 개선할 수 있나
 
Web_05_ jQuery
Web_05_ jQueryWeb_05_ jQuery
Web_05_ jQuery
 
웹표준 (XHTML + CSS)
웹표준 (XHTML + CSS)웹표준 (XHTML + CSS)
웹표준 (XHTML + CSS)
 
[115] clean fe development_윤지수
[115] clean fe development_윤지수[115] clean fe development_윤지수
[115] clean fe development_윤지수
 
에어_HTML/CSS_02
에어_HTML/CSS_02에어_HTML/CSS_02
에어_HTML/CSS_02
 
Opinion 프로젝트 발표 자료
Opinion 프로젝트 발표 자료Opinion 프로젝트 발표 자료
Opinion 프로젝트 발표 자료
 
딥러닝(Deep Learing) using DeepDetect
딥러닝(Deep Learing) using DeepDetect딥러닝(Deep Learing) using DeepDetect
딥러닝(Deep Learing) using DeepDetect
 
Html5 소개 가이드
Html5 소개 가이드Html5 소개 가이드
Html5 소개 가이드
 
[별천지 세미나] CSS3 Animation
[별천지 세미나] CSS3 Animation[별천지 세미나] CSS3 Animation
[별천지 세미나] CSS3 Animation
 
실무가를 위한 Sns 커뮤니케이션 시각화
실무가를 위한 Sns 커뮤니케이션 시각화실무가를 위한 Sns 커뮤니케이션 시각화
실무가를 위한 Sns 커뮤니케이션 시각화
 
191011 SVG를 배경이미지로 활용한 아이콘 삽질기 - 코인원 오혜진 (W3C HTML5 Conference)
191011 SVG를 배경이미지로 활용한 아이콘 삽질기 - 코인원 오혜진 (W3C HTML5 Conference)191011 SVG를 배경이미지로 활용한 아이콘 삽질기 - 코인원 오혜진 (W3C HTML5 Conference)
191011 SVG를 배경이미지로 활용한 아이콘 삽질기 - 코인원 오혜진 (W3C HTML5 Conference)
 
Web Standards HTML5_CSS3
Web Standards HTML5_CSS3Web Standards HTML5_CSS3
Web Standards HTML5_CSS3
 
HTML5 & CSS3
HTML5 & CSS3HTML5 & CSS3
HTML5 & CSS3
 
02_CSS -작심 10시간! 나만의 웹사이트 기획하고 만들기
02_CSS -작심 10시간! 나만의 웹사이트 기획하고 만들기02_CSS -작심 10시간! 나만의 웹사이트 기획하고 만들기
02_CSS -작심 10시간! 나만의 웹사이트 기획하고 만들기
 

jQuery Trend