jquery [실무]
![jquery [실무]](/img_file/builder/Date/201210052700jquery_S2.jpg)
제이쿼리 과정을 학습한 뒤 실제 실무에 사용할수 있는 효과 및 예제를 다뤄보길 원하는 분들이 이용하면 좋습니다. 기존 학습내용에서 다루지 않은 엘리먼트 조작관리, 메소드 활용, DOM 활용을 집중적으로 다루어볼수 있으며 관련 학습내용을 통해 웹제작에 대한 이해를 높일 수 있습니다. 다양한 형태를 제작 실습을 진행함으로써 사용법을 익히고 실무능력을 향상시킬수 있으며, 작업시 반드시 알아야 될 과정을 종류별로 학습할수 있습니다.
- jquery [실무]
-
01.41분 숨겨진 메뉴리스트, 버블형태 메뉴리스트 제작
다양한형태의 메뉴리스트들을 제작실습함으로써 실무능력을 향상시킵니다.
책갈피 : [02:05] 실습완성본/[08:43] background 일괄지정/[13:13] 버블형태 메뉴/[22:43] a.icon 컬러지정/[30:28] callBack 지정/[34:39] 심플 메뉴/[40:57] 텍스트일괄지정
-
02.38분 기본심플메뉴, X바 메뉴
기본적인 형태의 메뉴와, 닫기버튼이 포함된 메뉴를 만들어봅니다.
책갈피 : [02:28] span 적용 예/[07:19] 아웃 animate/[15:08] #main-list/[24:48] mouseover 이벤트/[28:33] removeClass/[34:42] $(".sub-list").fadeOut
-
03.40분 아코디언메뉴, 오버레이형식의 메뉴
다양한형태의 메뉴리스트들을 제작실습함으로써 실무능력을 향상시킵니다.
책갈피 : [00:05] 아코디언메뉴/[06:21] .menu/[12:56] .body {display:none;}/[15:31] slideToggle/[19:08] slideUp/[23:06] 오버레이 메뉴/[31:05] ul.menu/[38:43] li.subheading
-
04.42분 오버레이 메뉴, blur effect
오버레이메뉴와 블러이펙트가 가미된 웹페이지를 제작함으로써 실무능력을 향상시킵니다.
책갈피 : [00:29] 기본변수지정/[07:30] callBack함수/[13:57] 오버레이삭제/[19:05] body/[22:38] h1, h1 span/[27:11] 기본변수설정/[31:21] blur, active 클래스/[36:51] .content article.active/[40:23] -webkit-transition
-
05.43분 puzzle box menu
퍼즐이 흩어지고 모아지는 이펙트를 구현하여 웹메뉴를 제작해 봅니다.
책갈피 : [00:17] 실습완성작/[10:46] 위치값추가/[16:52] padding, margin/[22:33] $('#boxes a').bind('click')/[28:00] ('#boxes > div').each/[33:49] var newwidth,newheight/[37:33] $currentBox.animate/[41:01] divinfo.source
-
06.46분 오버레이 이미지 갤러리
클릭이벤트가 적용된 팝업 갤러리에 오버레이를 적용해 시각적인 효과를 꾸며줍니다.
책갈피 : [00:32] 이미지 갤러리/[06:56] style=display:none;/[13:18] a.next, a.prev/[18:57] .menu/[23:17] alzio1~6 아이콘지정/[30:16] $('#modal').animate/[36:15] function HIDE()/[41:36] 이전버튼정의/[44:40] ('#content').append확인
-
07.46분 이미지 슬라이드
버튼을 통해 슬라이드 애니메이션을 구현하는 이미지 슬라이드를 제작해 봅니다.
책갈피 : [00:20] 실습완성/[07:27] .ALL .menulist/[16:57] var positions/[23:04] 버튼에 대한 정의/[27:29] enableNext/[31:40] function moveLeft/[39:26] ++first/[43:56] positions(i+1)
-
08.44분 제이쿼리 슬라이딩 폼
단계별로 진행되는 슬라이딩 폼을 제작하고, 동적인 애니메이션을 구현합니다.
책갈피 : [00:12] 슬라이딩 폼/[05:00] navigation구조/[13:59] -webkit-gradient/[21:25] #steps form p.submit/[28:57] 필드셋의 넓이저장/[33:10] current 설정/[41:40] if, else문
-
09.39분 제이쿼리 슬라이딩 폼, 돋보기 구현
슬라이딩폼을 마무리하고, 쇼핑몰 등에서 자주 사용되는 이미지 돋보기 효과 구현합니다.
책갈피 : [00:18] validateSteps 함수/[08:04] var $link/[13:59] 이미지에 돋보기 구현/[21:24] position: absolute/[26:28] var image_object/[35:44] 돋보기 설정
-
10.42분 늘어나는 이미지 메뉴 구현
늘어나는 이미지 메뉴를 제작해 봅니다.
책갈피 : [00:04] Expanding Image Menu/[04:29] body/[15:17] .info/[20:40] totalMenuItems/[24:31] configureMenu/[34:19] 삼항연산자/[40:14] return
-
11.41분 전체페이지로 구성된 이미지 갤러리
전체페이지로 꾸며져 있는 유용한 이미지 갤러리를 만들어봅니다.
책갈피 : [00:13] 이미지 갤러리/[08:28] z-index/[15:47] #panel img/[21:38] var totalpictures/[26:39] current값 변경/[31:22] callBack구현/[33:05] 이미지 버튼정의
-
12.45분 이미갤러리 마무리, 오토배너 생성
이미지갤러리 버튼에 관련된 내용을 마무리하고, 자동적으로 리프레시되는 베너를 제작합니다.
책갈피 : [00:41] $('#next').click/[06:02] $('#imgname').fadeOut/[13:39] var title/[20:24] div#slideItems/[25:50] for문 리스트생성/[33:23] bind 함수/[41:39] setInterval 생성
-
13.41분 오토배너 생성2
이전시간과는 다르게 정의된 오토배너를 새롭게 생성해보고 완벽하게 이해할수있도록 실습을 진행합니다.
책갈피 : [00:11] 롤링배너/[08:14] .rotator/[17:32] .rotator .heading/[23:05] var current = 1/[27:54] function display/[39:42] $('#menu li').click
-
14.43분 Parallax 효과
레이어의 기능을 이해하고 3D효과를 구현하는 Parallax에 대해 공부합니다.
책갈피 : [00:11] Parallax/[04:36] img 크기비교/[11:25] 마우스 위치저장/[20:26] 애니메이션속도/[25:49] navi 정의/[34:16] 클릭이벤트 설정/[41:03] addClass('active')
- jquery [활용]
-
15.2시간 14분 제이쿼리의 엘리먼트 선택관리와 엘레먼트 선택 메소드
제이쿼리 선택을 제어하고 선택내용을 조정하는법과 엘리먼트별로 선택을 제어할 수 있는 메소드를 학습합니다.
책갈피 : [00:26] 제이쿼리를 사용하는 패턴/[07:29] dcell부분/[12:35] 엘리먼트 label 구성/[19:29] remove메소드/[22:18] not메소드/[29:18] eq메소드/[36:21] 엘리먼트 필터링/[46:36] 인자값 객체/[52:00] return값 달라지는 결과/[59:30] 함수 구성/[66:26] map 이용/[72:55] end, andSelf/[78:00] children메소드 구성/[84:45] filter not 제한/[90:30] offsetParent메소드/[98:15] oblock 스타일/[05:00] 수평적 선택 메소드/[10:13] sibling, next, prev/[17:10] 콘솔창 구성/[21:44] 기존 엘리먼트 만들기/[33:22] console창 확인
-
16.1시간 44분 엘리먼트의 DOM 조작
엘리먼트 생성 후 문서에 어떻게 삽입할수 있는지 자식 및 자손 엘리먼트를 만들어보고 wrap메소드 사용방법에 대해 알아봅니다.
책갈피 : [00:37] 자식 자손엘리먼트 삽입/[05:15] append 사용/[10:54] input name 구성/[15:05] prepend 삽입/[23:56] row2 prepend속성/[34:15] 함수 이용 엘리먼트 삽입/[41:06] 함수로 자식엘리먼트 삽입/[47:07] drow 구성 선언/[52:51] wrapInner 사용/[57:15] 조건문 구성/[66:25] add메소드/[73:45] after메소드를 이용해 구성/[79:57] replaceWith메소드 구성/[86:30] this변수값만 이용/[93:56] empty remove unwrap/[99:59] 데이터 보존 확인
-
17.2시간 0분 어트리뷰트의 속성과 활용과 함수를 활용한 클래스
제이쿼리 객체의 엘리먼트의 값을 설정하는 방법과 관련 메소드, 클래스 메소드에서 함수를 사용하여 추가 및 제거를 할수 있는 방법을 알아봅니다.
책갈피 : [00:12] 어트리뷰트 활용/[06:54] 이미지값 함수/[12:01] 맵 객체 구성/[17:02] 이미지 엘리먼트 선언/[25:48] removeAttr/[34:30] 클래스 관리 메소드/[40:07] 짝수 값에 새로운 클래스/[46:22] hasclass선언/[53:43] border값 지정/[64:00] 클래스 toggle/[74:30] 속성값 다중 toggle/[89:45] 동적 toggle/[98:42] label의 text값/[08:43] css메소드 뒤에 css 추가/[15:33] 숫자단위에서만 상대값/[18:07] return값
-
18.1시간 23분 기본 어트리뷰트를 활용한 css활용과 제이쿼리의 이벤트 객체의 활용
css편의메소드를 이용하여 css속성을 사용하는 방법과 제이쿼리의 이벤트 지원 기능에 대해서 살펴보고 이벤트가 일어날때의 특정 메소드 활용 방법에 대해서 알아봅니다.
책갈피 : [00:59] 메소드 css제어/[05:00] 함수를 이용해 구성/[13:20] 동적으로 엘리먼트 구성/[22:03] val 값을 인자로 추가/[29:06] 조회, 삭제/[35:22] console창 filter/[42:05] mouseout/[51:00] handleMouse부분 이벤트/[61:22] bind메소드/[69:45] preventDefault/[77:00] unbind인자값/[81:08] out에대한 이벤트
-
19.1시간 28분 이벤트 핸들러 자동등록방법과 제이쿼리조작기능을 활용한 문서작성
live메소드를 활용해 이벤트 핸들러를 자동으로 등록하는 방법과 DOM조작방법과 이벤트처리기능을 활용해서 문서를 구성하는 방법에 대해서 알아봅니다.
책갈피 : [00:08] 핸들러 자동 등록/[06:43] live메소드/[12:00] live 문제점/[19:03] 버튼 생성 trigger/[28:07] triggerHandler/[39:00] load ready unload/[49:22] appendTo 사용/[56:52] filter input값/[65:44] 버튼을 추가한 이유/[72:55] 이벤트 함수 추가/[80:30] fadeIn메소드 호출/[86:46] 값을 받아 처리
-
20.1시간 43분 데이터 템플릿의 활용
제이쿼리 플러그인을 이용해 데이터 템플릿을 활용하는 방법을 알아봅니다.
책갈피 : [00:09] 템플릿 라이브러리/[08:37] 선언된 템플릿/[18:03] 한줄로 나왔던 부분이 두줄로/[27:48] 템플릿에 사용되는 변수/[36:37] 달러함수 값을 h2태그/[46:22] input템플릿 추가/[59:34] div.drow값 삭제/[67:30] 다음행 넘어가는 배열/[75:23] if태그 템플릿/[83:10] 재고량이 일정 수 이상이거나/[92:57] input태그 name구성/[00:48] filterLowStock each선언
![jquery [입문 + 고급]](/img_file/builder/Date/201507022679jquery_new.jpg "jquery [입문 + 고급]")
jquery [입문 + 고급]21시간 35분
jquery mobile & UI20시간 3분