제이쿼리 [실무]

40회차 속성과정
전체 : 40시간 26분|회차당 평균 : 1시간 0분38초

이용기간 2개월

전문강사 : 알지오 R&D [IT]

제이쿼리 [실무] 인강 평생교육원 교육 안내
제이쿼리 기초부터 고급까지 학습한 뒤 실제 실무에 사용할수 있는 효과 및 예제를 다뤄보길 원하는 분들이 이용하면 좋습니다. 제이쿼리 기초 부터 고급과정 에서 다루지 않은 엘리먼트 조작관리, 메소드 활용, 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 Mobile
21.1시간 7분 jQuery Mobile시작, 페이지구성, 전환효과, jQuery Button
jQuery Mobile을 사용하기 위한 준비/기본 페이지 구성/애니메이션 효과/data-theme/data-corners/data-icon/data-mini/data-role

책갈피[00:59] DOCTYPE 선언/[05:37] 출력화면/[10:22] 짜여진 태그 정리/[16:11] div id="one" 생성/[22:10] 내부링크 NO/[27:34] 외부링크/[34:48] 버튼출력값/[41:48] data-iconpos/[47:01] ui-icon-minus/[54:43] controlgroup 세로출력/[59:31] data-mini/[01:04:51] textarea, select추가
22.1시간 16분 select, checkbox, radio, data-role
셀렉트 박스, 체크 박스, 라디오 버튼, footer, navbar, listview, dialog, collapsible, content

책갈피[01:03] select 추가/[05:47] data-role="controlgroup"/[10:47] input과 label 연결/[16:14] data-collapsed="false"/[22:55] data-role="footer"/[29:47] li 1개 생성/[37:25] data-role="navbar"/[47:58] data-role="dialog"/[56:37] div style/[01:04:51] 실습19/[01:13:04] 실습27
23.1시간 45분 제이쿼리모바일을 이용한 페이지 실무제작, 커스텀 테마
실무에서 사용될 수 있는 모바일 페이지 제작, 나만의 스타일로 커스터마이징하는 방법, 제이쿼리의 기본 속성과 커스텀 속성을 사용한 새로운 작업

책갈피[01:15] div추가/[07:58] #A_nav/[15:01] h2추가/[22:35] .A_listview li img/[33:30] div class="ui-content"/[38:59] 로딩이미지의 위치/[45:40] @media screen and/[53:27] .ui-content/[59:44] .ui-listview/[01:07:34] .ui-btn-text/[01:14:51] div data-role="navbar"/[01:21:17] a href="log.html"/[01:26:49] ui-body-c/[01:34:37] .maincon/[01:38:06] position: absolute/[01:42:56] .line_down
24.1시간 5분 HTML5를 응용한 페이지 실습, 모바일 페이지 실무제작 & CSS튜닝
HTML5, CSS를 응용한 갤러리 제작, 제이쿼리 모바일을 이용한 페이지 제작, CSS오버라이딩으로 출력 결과물을 바꾸는 실습

책갈피[00:24] div id="con"/[04:07] ul data-role="listview"/[11:46] 갤러리제작/[16:45] .gallery article/[23:21] div data-role="content"/[30:00] footer/[37:58] .ui-navbar/[50:56] .ui-btn/[56:13] .ui-li-thumb/[59:08] .onn.ui-btn-up-c/[01:03:17] .ui-corner-all
25.1시간 28분 페이지 실무제작 & CSS튜닝
제이쿼리 기본속성을 이용한 모바일 페이지 제작, 새로운 테마 생성, header, select, search, listview 꾸미기

책갈피[00:39] data-theme='d'/[05:21] .ui-btn-up-c/[13:29] data-iconpos="notext"/[21:12] si8-3.html 구조/[28:24] .ui-shadow/[35:32] .header .logo, .logo:hover/[43:43] .ui-header/[53:18] .ui-header/[01:01:53] .ui-corner/[01:08:13] #linbut a:hover/[01:17:53] .ui-select/[01:25:56] .ui-listview-inset
jQuery UI
26.1시간 14분 jQuery UI 정의, 테마 오버라이딩, 포지션 유틸리티
jQuery UI 소개, 라이브러리 다운, CSS프레임워크, 적용된 테마를 쉽고 빠르게 변경하는 방법, 포지션 유틸리티의 사용법

책갈피[02:21] jQuery UI/[08:14] index.html/[18:48] CSS 프레임워크/[23:53] div 추가/[29:01] .ui-state-active a/[35:46] 아이콘추가/[41:50] Theme 변경/[49:33] .ui-state-default/[55:37] 오버라이딩 위치/[01:01:00] $(".alzio2").position/[01:07:55] my:"right", at: "left"/[01:12:24] offset
27.1시간 11분 탭 위젯
기본 탭 위젯을 구현하는 방법, 탭 환경설정 옵션, 탭 이벤트, 탭 메소드

책갈피[00:41] tab 위젯/[07:09] $("#alzioTab")/[12:29] selected: null/[20:41] 첫번째 인자/[27:37] collapsible: true/[35:34] select이벤트/[43:15] 수식과 문자열 관계/[48:56] button 추가/[54:28] $("#add").click/[01:00:16] parseInt/[01:04:48] length 메소드/[01:10:13] destroy 메소드
28.1시간 13분 탭 위젯, 아코디언 위젯
탭 메소드, 아코디언 위젯, 아코디언 옵션, 아코디언 이벤트, 아코디언 메소드

책갈피[00:16] option메소드/[04:49] ("option", "selected")/[10:15] 두번째 인자값/[15:38] tab.txt/[21:24] load 메소드/[27:02] accordion메소드/[37:20] 기본Accordion구현/[44:41] animated: "bounceslide"/[49:40] 코드 작성/[56:00] changestart 이벤트/[01:01:09] val()/[01:05:12] if문/[01:11:14] 탭, 아코디언 위젯 결합
29.1시간 14분 대화상자 위젯, 동적 대화상자 제작
대화상자 옵션, 대화상자 이벤트, 대화상자 메소드, 실무에서 사용할 수 있는 동적 대화상자를 제작

책갈피[00:05] 대화상자(Dialog) 위젯/[06:20] autoOpen: false/[11:50] title: "알지오"/[16:55] modal 적용/[24:08] show, hide 옵션/[30:58] maxWidth, maxHeight 옵션/[36:47] 기본 대화상자적용/[45:04] if조건문/[50:59] if조건문/[01:00:23] var option2/[01:06:32] css프레임워크 적용/[01:12:01] #ALL .ui-widget-header
30.1시간 14분 동적 대화상자 제작, 슬라이더 위젯, RGB컬러 슬라이더
동적 대화상자 제작을 위한 코드 작성, 슬라이더 위젯, 슬라이더 메소드, 실무에서 사용할 수 있는 컬러 슬라이더를 구현

책갈피[00:29] dialog 위젯 구현/[07:39] dialog("option", "title", titleText)/[15:56] orientation옵션/[24:40] animate: "slow"/[30:21] 슬라이더 이벤트/[37:06] #percent/[42:22] value, values 옵션/[49:56] else문/[56:13] tabs("select", ui.value)/[01:02:37] css커스터마이징/[01:09:08] var rgbText/[01:12:58] 에러수정
31.46분 데이트 픽커 위젯
데이트 픽커 위젯에 대해 알아보고, 환경 설정 옵션에 대해 실습합니다.

책갈피[01:32] 데이트픽커 구성/[05:57] appendText/[11:57] showOtherMonths: false/[20:37] closeText/[30:21] showAnim/[35:20] stepMonths/[42:19] yy년 mm월 dd일/[44:49] $.datepicker.ATOM
32.40분 데이트픽커 위젯 이벤트, 메소드
데이트 픽커 위젯에 대한 이벤트와 메소드를 실습을 통해 학습합니다.

책갈피[01:04] showButtonPanel/[06:44] monthNamesShort/[11:27] dateFormat/[15:24] 데이트픽커 이벤트/[21:46] var lang/[27:33] $("button").click/[32:50] $("#alzioDate").focus/[38:15] 세번째인자-버튼
33.45분 프로그레스바 위젯, 실용 프로그레스바 제작
프로그레스바에 대해 알아보고, 사용자와 상호작용하는 프로그레스바를 제작합니다.

책갈피[00:09] 프로그레스바 위젯/[05:11] 프로그레스바 이벤트/[12:14] appendTo/[19:43] if, else문 생성/[26:28] progressbar구현/[32:14] button/[44:40] 프로그레스바의 활용
34.42분 버튼 위젯, 자동완성 위젯
버튼위젯에 대해 알아보고 나아가 자동완성 위젯을 구현해봅니다.

책갈피[00:07] 버튼위젯/[04:38] HTML구성-input/[10:30] 적용값확인/[16:55] input요소의 아이콘/[23:22] $("#alzioButton1").buttonset/[30:44] #refresh 버튼/[37:19] source : 문자열
35.44분 자동완성 위젯, 드래그 인터렉션
자동완성 위젯에 대해 자세히 알아보고, 드래그 인터렉션을 알아봅니다.

책갈피[00:49] 자동완성 기본 구현/[09:00] my, at 값변경/[15:21] 드래그 기능/[21:31] cursor:move/[28:32] delay 옵션/[34:03] #alzio/[40:39] stop 옵션/[43:04] snapTolerance
36.44분 드래그 이벤트와 메소드, 드롭 인터렉션
드래그 이벤트와 메소드에 대해 실습하고, 드롭 인터렉션을 알아봅니다.

책갈피[00:10] 드래그 이벤트/[05:16] stop 이벤트/[10:54] draggable, droppable 메소드/[19:28] accept 옵션삭제/[26:54] tolerance 옵션/[33:21] .drag_a, .drag_b/[42:53] dropOption_a 삭제
37.37분 드롭 이벤트, 드래그앤드롭 게임 제작
드롭이벤트에 대해 알아보고, 드래그앤드롭 게임을 제작하며 완벽하게 이해합니다.

책갈피[00:25] 드롭 이벤트/[06:56] empty()/[13:27] droppable, draggable 적용/[17:57] 드래그&드롭 게임/[25:03] droppable, draggable 적용/[29:35] containment: "#maze"/[34:06] 드래그요소 div 재생성
38.40분 resize 인터렉션, 크기 조절 기능
크기를 조절할 수 있는 resize 기능에 대해 알아봅니다.

책갈피[00:12] resize/[07:45] handles 옵션가능값/[14:48] p 요소 추가/[20:17] HTML구성/[25:24] ghost 옵션/[30:56] stop: NewSize/[36:56] 탭위젯과 결합
39.59분 select 인터렉션, 선택기능 이미지 뷰어
아이템을 선택할 수 있는 select 기능에 대해 알아보고, 선택기능이 부여된 이미지 뷰어를 제작합니다.

책갈피[01:28] HTML구성/[09:17] cancel 옵션/[16:47] if (!$("#tip").length)/[21:54] refresh 메소드/[31:26] alzioselect.css/[38:35] $("#image").selectable/[44:29] 상단 name 재구성/[51:20] each 함수 설정/[56:29] $("#tabs").tabs
40.39분 sort 인터렉션, 정렬기능
요소를 정렬시킬 수 있는 sort 기능에 대해 알아보고 실습합니다.

책갈피[00:17] 정렬기능/[05:17] containment 옵션/[11:31] items: ":not(.unsort)"/[18:07] .place/[23:02] 연결 리스트의 정렬/[28:59] start 이벤트/[34:30] $("#text").remove()