- 강의구성
- (40강) 전체 : 40시간 26분|평균 : 1시간 0분38초
- 이용기간 / 강사
- 2개월 / 알지오 R&D [IT]
- 수강료
- 450,000원
- 225,000원
수강 전 자주 묻는 질문
교재 없이? 초보자도 가능 한가요?
교재 없이도 동영상과 실습 자료만으로 학습할 수 있으며, 초보자도 이해하고 따라올 수 있도록 설계된 강의입니다.
알지오의 강의특징은 무엇인가요?
알지오 강의는 단순 촬영본이 아니라, 전문 편집으로 핵심만 담아 학습 효율을 높인 강의입니다.
프로그램은 어떻게 구하나요?
알지오 는 원격평생교육원 으로, 프로그램에 대한 정보는 알수 없습니다.
수강생 여러분께 감사드리며, 납부하신 수강료 일부는 매월 사회 환원 활동에 사용됩니다. 특히 소외된 이웃들에게 라면을 기부하며 작은 나눔을 이어가고 있습니다. 자세한 내용은 아래 링크에서 확인하실 수 있습니다. 알지오 사회환원 활동
- jquery [실무]
-
01.41분
숨겨진 메뉴리스트, 버블형태 메뉴리스트 제작
다양한형태의 메뉴리스트들을 제작실습함으로써 실무능력을 향상시킵니다.
실습완성본/background 일괄지정/버블형태 메뉴/a.icon 컬러지정/callBack 지정/심플 메뉴/텍스트일괄지정
-
02.38분
기본심플메뉴, X바 메뉴
기본적인 형태의 메뉴와, 닫기버튼이 포함된 메뉴를 만들어봅니다.
span 적용 예/아웃 animate/#main-list/mouseover 이벤트/removeClass/$(".sub-list").fadeOut
-
03.40분
아코디언메뉴, 오버레이형식의 메뉴
다양한형태의 메뉴리스트들을 제작실습함으로써 실무능력을 향상시킵니다.
아코디언메뉴/.menu/.body {display:none;}/slideToggle/slideUp/오버레이 메뉴/ul.menu/li.subheading
-
04.42분
오버레이 메뉴, blur effect
오버레이메뉴와 블러이펙트가 가미된 웹페이지를 제작함으로써 실무능력을 향상시킵니다.
기본변수지정/callBack함수/오버레이삭제/body/h1, h1 span/기본변수설정/blur, active 클래스/.content article.active/-webkit-transition
-
05.43분
puzzle box menu
퍼즐이 흩어지고 모아지는 이펙트를 구현하여 웹메뉴를 제작해 봅니다.
실습완성작/위치값추가/padding, margin/$('#boxes a').bind('click')/('#boxes > div').each/var newwidth,newheight/$currentBox.animate/divinfo.source
-
06.46분
오버레이 이미지 갤러리
클릭이벤트가 적용된 팝업 갤러리에 오버레이를 적용해 시각적인 효과를 꾸며줍니다.
이미지 갤러리/style=display:none;/a.next, a.prev/.menu/alzio1~6 아이콘지정/$('#modal').animate/function HIDE()/이전버튼정의/('#content').append확인
-
07.46분
이미지 슬라이드
버튼을 통해 슬라이드 애니메이션을 구현하는 이미지 슬라이드를 제작해 봅니다.
실습완성/.ALL .menulist/var positions/버튼에 대한 정의/enableNext/function moveLeft/++first/positions(i+1)
-
08.44분
제이쿼리 슬라이딩 폼
단계별로 진행되는 슬라이딩 폼을 제작하고, 동적인 애니메이션을 구현합니다.
슬라이딩 폼/navigation구조/-webkit-gradient/#steps form p.submit/필드셋의 넓이저장/current 설정/if, else문
-
09.39분
제이쿼리 슬라이딩 폼, 돋보기 구현
슬라이딩폼을 마무리하고, 쇼핑몰 등에서 자주 사용되는 이미지 돋보기 효과 구현합니다.
validateSteps 함수/var $link/이미지에 돋보기 구현/position: absolute/var image_object/돋보기 설정
-
10.42분
늘어나는 이미지 메뉴 구현
늘어나는 이미지 메뉴를 제작해 봅니다.
Expanding Image Menu/body/.info/totalMenuItems/configureMenu/삼항연산자/return
-
11.41분
전체페이지로 구성된 이미지 갤러리
전체페이지로 꾸며져 있는 유용한 이미지 갤러리를 만들어봅니다.
이미지 갤러리/z-index/#panel img/var totalpictures/current값 변경/callBack구현/이미지 버튼정의
-
12.45분
이미갤러리 마무리, 오토배너 생성
이미지갤러리 버튼에 관련된 내용을 마무리하고, 자동적으로 리프레시되는 베너를 제작합니다.
$('#next').click/$('#imgname').fadeOut/var title/div#slideItems/for문 리스트생성/bind 함수/setInterval 생성
-
13.41분
오토배너 생성2
이전시간과는 다르게 정의된 오토배너를 새롭게 생성해보고 완벽하게 이해할수있도록 실습을 진행합니다.
롤링배너/.rotator/.rotator .heading/var current = 1/function display/$('#menu li').click
-
14.43분
Parallax 효과
레이어의 기능을 이해하고 3D효과를 구현하는 Parallax에 대해 공부합니다.
Parallax/img 크기비교/마우스 위치저장/애니메이션속도/navi 정의/클릭이벤트 설정/addClass('active')
- jquery [활용]
-
15.2시간 14분
제이쿼리의 엘리먼트 선택관리와 엘레먼트 선택 메소드
제이쿼리 선택을 제어하고 선택내용을 조정하는법과 엘리먼트별로 선택을 제어할 수 있는 메소드를 학습합니다.
제이쿼리를 사용하는 패턴/dcell부분/엘리먼트 label 구성/remove메소드/not메소드/eq메소드/엘리먼트 필터링/인자값 객체/return값 달라지는 결과/함수 구성/map 이용/end, andSelf/children메소드 구성/filter not 제한/offsetParent메소드/oblock 스타일/수평적 선택 메소드/sibling, next, prev/콘솔창 구성/기존 엘리먼트 만들기/console창 확인
-
16.1시간 44분
엘리먼트의 DOM 조작
엘리먼트 생성 후 문서에 어떻게 삽입할수 있는지 자식 및 자손 엘리먼트를 만들어보고 wrap메소드 사용방법에 대해 알아봅니다.
자식 자손엘리먼트 삽입/append 사용/input name 구성/prepend 삽입/row2 prepend속성/함수 이용 엘리먼트 삽입/함수로 자식엘리먼트 삽입/drow 구성 선언/wrapInner 사용/조건문 구성/add메소드/after메소드를 이용해 구성/replaceWith메소드 구성/this변수값만 이용/empty remove unwrap/데이터 보존 확인
-
17.2시간 0분
어트리뷰트의 속성과 활용과 함수를 활용한 클래스
제이쿼리 객체의 엘리먼트의 값을 설정하는 방법과 관련 메소드, 클래스 메소드에서 함수를 사용하여 추가 및 제거를 할수 있는 방법을 알아봅니다.
어트리뷰트 활용/이미지값 함수/맵 객체 구성/이미지 엘리먼트 선언/removeAttr/클래스 관리 메소드/짝수 값에 새로운 클래스/hasclass선언/border값 지정/클래스 toggle/속성값 다중 toggle/동적 toggle/label의 text값/css메소드 뒤에 css 추가/숫자단위에서만 상대값/return값
-
18.1시간 23분
기본 어트리뷰트를 활용한 css활용과 제이쿼리의 이벤트 객체의 활용
css편의메소드를 이용하여 css속성을 사용하는 방법과 제이쿼리의 이벤트 지원 기능에 대해서 살펴보고 이벤트가 일어날때의 특정 메소드 활용 방법에 대해서 알아봅니다.
메소드 css제어/함수를 이용해 구성/동적으로 엘리먼트 구성/val 값을 인자로 추가/조회, 삭제/console창 filter/mouseout/handleMouse부분 이벤트/bind메소드/preventDefault/unbind인자값/out에대한 이벤트
-
19.1시간 28분
이벤트 핸들러 자동등록방법과 제이쿼리조작기능을 활용한 문서작성
live메소드를 활용해 이벤트 핸들러를 자동으로 등록하는 방법과 DOM조작방법과 이벤트처리기능을 활용해서 문서를 구성하는 방법에 대해서 알아봅니다.
핸들러 자동 등록/live메소드/live 문제점/버튼 생성 trigger/triggerHandler/load ready unload/appendTo 사용/filter input값/버튼을 추가한 이유/이벤트 함수 추가/fadeIn메소드 호출/값을 받아 처리
-
20.1시간 43분
데이터 템플릿의 활용
제이쿼리 플러그인을 이용해 데이터 템플릿을 활용하는 방법을 알아봅니다.
템플릿 라이브러리/선언된 템플릿/한줄로 나왔던 부분이 두줄로/템플릿에 사용되는 변수/달러함수 값을 h2태그/input템플릿 추가/div.drow값 삭제/다음행 넘어가는 배열/if태그 템플릿/재고량이 일정 수 이상이거나/input태그 name구성/filterLowStock each선언
- jQuery Mobile
-
21.1시간 7분
jQuery Mobile시작, 페이지구성, 전환효과, jQuery Button
jQuery Mobile을 사용하기 위한 준비/기본 페이지 구성/애니메이션 효과/data-theme/data-corners/data-icon/data-mini/data-role
DOCTYPE 선언/출력화면/짜여진 태그 정리/div id="one" 생성/내부링크 NO/외부링크/버튼출력값/data-iconpos/ui-icon-minus/controlgroup 세로출력/data-mini/[01:04:51] textarea, select추가
-
22.1시간 16분
select, checkbox, radio, data-role
셀렉트 박스, 체크 박스, 라디오 버튼, footer, navbar, listview, dialog, collapsible, content
select 추가/data-role="controlgroup"/input과 label 연결/data-collapsed="false"/data-role="footer"/li 1개 생성/data-role="navbar"/data-role="dialog"/div style/[01:04:51] 실습19/[01:13:04] 실습27
-
23.1시간 45분
제이쿼리모바일을 이용한 페이지 실무제작, 커스텀 테마
실무에서 사용될 수 있는 모바일 페이지 제작, 나만의 스타일로 커스터마이징하는 방법, 제이쿼리의 기본 속성과 커스텀 속성을 사용한 새로운 작업
div추가/#A_nav/h2추가/.A_listview li img/div class="ui-content"/로딩이미지의 위치/@media screen and/.ui-content/.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오버라이딩으로 출력 결과물을 바꾸는 실습
div id="con"/ul data-role="listview"/갤러리제작/.gallery article/div data-role="content"/footer/.ui-navbar/.ui-btn/.ui-li-thumb/.onn.ui-btn-up-c/[01:03:17] .ui-corner-all
-
25.1시간 28분
페이지 실무제작 & CSS튜닝
제이쿼리 기본속성을 이용한 모바일 페이지 제작, 새로운 테마 생성, header, select, search, listview 꾸미기
data-theme='d'/.ui-btn-up-c/data-iconpos="notext"/si8-3.html 구조/.ui-shadow/.header .logo, .logo:hover/.ui-header/.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프레임워크, 적용된 테마를 쉽고 빠르게 변경하는 방법, 포지션 유틸리티의 사용법
jQuery UI/index.html/CSS 프레임워크/div 추가/.ui-state-active a/아이콘추가/Theme 변경/.ui-state-default/오버라이딩 위치/[01:01:00] $(".alzio2").position/[01:07:55] my:"right", at: "left"/[01:12:24] offset
-
27.1시간 11분
탭 위젯
기본 탭 위젯을 구현하는 방법, 탭 환경설정 옵션, 탭 이벤트, 탭 메소드
tab 위젯/$("#alzioTab")/selected: null/첫번째 인자/collapsible: true/select이벤트/수식과 문자열 관계/button 추가/$("#add").click/[01:00:16] parseInt/[01:04:48] length 메소드/[01:10:13] destroy 메소드
-
28.1시간 13분
탭 위젯, 아코디언 위젯
탭 메소드, 아코디언 위젯, 아코디언 옵션, 아코디언 이벤트, 아코디언 메소드
option메소드/("option", "selected")/두번째 인자값/tab.txt/load 메소드/accordion메소드/기본Accordion구현/animated: "bounceslide"/코드 작성/changestart 이벤트/[01:01:09] val()/[01:05:12] if문/[01:11:14] 탭, 아코디언 위젯 결합
-
29.1시간 14분
대화상자 위젯, 동적 대화상자 제작
대화상자 옵션, 대화상자 이벤트, 대화상자 메소드, 실무에서 사용할 수 있는 동적 대화상자를 제작
대화상자(Dialog) 위젯/autoOpen: false/title: "알지오"/modal 적용/show, hide 옵션/maxWidth, maxHeight 옵션/기본 대화상자적용/if조건문/if조건문/[01:00:23] var option2/[01:06:32] css프레임워크 적용/[01:12:01] #ALL .ui-widget-header
-
30.1시간 14분
동적 대화상자 제작, 슬라이더 위젯, RGB컬러 슬라이더
동적 대화상자 제작을 위한 코드 작성, 슬라이더 위젯, 슬라이더 메소드, 실무에서 사용할 수 있는 컬러 슬라이더를 구현
dialog 위젯 구현/dialog("option", "title", titleText)/orientation옵션/animate: "slow"/슬라이더 이벤트/#percent/value, values 옵션/else문/tabs("select", ui.value)/[01:02:37] css커스터마이징/[01:09:08] var rgbText/[01:12:58] 에러수정
-
31.46분
데이트 픽커 위젯
데이트 픽커 위젯에 대해 알아보고, 환경 설정 옵션에 대해 실습합니다.
데이트픽커 구성/appendText/showOtherMonths: false/closeText/showAnim/stepMonths/yy년 mm월 dd일/$.datepicker.ATOM
-
32.40분
데이트픽커 위젯 이벤트, 메소드
데이트 픽커 위젯에 대한 이벤트와 메소드를 실습을 통해 학습합니다.
showButtonPanel/monthNamesShort/dateFormat/데이트픽커 이벤트/var lang/$("button").click/$("#alzioDate").focus/세번째인자-버튼
-
33.45분
프로그레스바 위젯, 실용 프로그레스바 제작
프로그레스바에 대해 알아보고, 사용자와 상호작용하는 프로그레스바를 제작합니다.
프로그레스바 위젯/프로그레스바 이벤트/appendTo/if, else문 생성/progressbar구현/button/프로그레스바의 활용
-
34.42분
버튼 위젯, 자동완성 위젯
버튼위젯에 대해 알아보고 나아가 자동완성 위젯을 구현해봅니다.
버튼위젯/HTML구성-input/적용값확인/input요소의 아이콘/$("#alzioButton1").buttonset/#refresh 버튼/source : 문자열
-
35.44분
자동완성 위젯, 드래그 인터렉션
자동완성 위젯에 대해 자세히 알아보고, 드래그 인터렉션을 알아봅니다.
자동완성 기본 구현/my, at 값변경/드래그 기능/cursor:move/delay 옵션/#alzio/stop 옵션/snapTolerance
-
36.44분
드래그 이벤트와 메소드, 드롭 인터렉션
드래그 이벤트와 메소드에 대해 실습하고, 드롭 인터렉션을 알아봅니다.
드래그 이벤트/stop 이벤트/draggable, droppable 메소드/accept 옵션삭제/tolerance 옵션/.drag_a, .drag_b/dropOption_a 삭제
-
37.37분
드롭 이벤트, 드래그앤드롭 게임 제작
드롭이벤트에 대해 알아보고, 드래그앤드롭 게임을 제작하며 완벽하게 이해합니다.
드롭 이벤트/empty()/droppable, draggable 적용/드래그&드롭 게임/droppable, draggable 적용/containment: "#maze"/드래그요소 div 재생성
-
38.40분
resize 인터렉션, 크기 조절 기능
크기를 조절할 수 있는 resize 기능에 대해 알아봅니다.
resize/handles 옵션가능값/p 요소 추가/HTML구성/ghost 옵션/stop: NewSize/탭위젯과 결합
-
39.59분
select 인터렉션, 선택기능 이미지 뷰어
아이템을 선택할 수 있는 select 기능에 대해 알아보고, 선택기능이 부여된 이미지 뷰어를 제작합니다.
HTML구성/cancel 옵션/if (!$("#tip").length)/refresh 메소드/alzioselect.css/$("#image").selectable/상단 name 재구성/each 함수 설정/$("#tabs").tabs
-
40.39분
sort 인터렉션, 정렬기능
요소를 정렬시킬 수 있는 sort 기능에 대해 알아보고 실습합니다.
정렬기능/containment 옵션/items: ":not(.unsort)"/.place/연결 리스트의 정렬/start 이벤트/$("#text").remove()
![제이쿼리 [실무]](/img_file/builder/Date/201911041419jquery_S2.jpg)
![제이쿼리 [실무]](/expert/img/skin_sample_play_PM_05.png)