ONLINE CLASS

제이쿼리 [실무]

COURSE FOCUS

이 강의에서 배우는 핵심 실무

숨겨진 메뉴와 버블형 메뉴, 전체 화면 이미지 갤러리를 제작하며 제이쿼리를 화면 구성에 활용합니다. jQuery Mobile의 페이지 전환과 버튼 설정을 실습하고 데이트 픽커 위젯의 옵션을 조절해 날짜를 선택하는 인터페이스를 만듭니다. 요소를 정렬하는 상호작용까지 다루면서 메뉴 탐색과 이미지 표시, 사용자 입력에 필요한 기능을 구현해봅니다.

?

수강 전 꼭 확인하세요

수강 전 자주 묻는 내용을 간단히 안내드립니다.

Q초보자도 교재 없이 수강 가능한가요? 프로그램 정보는?

A

네, 영상과 실습자료로 쉽게 학습할 수 있습니다. 알지오는 원격평생교육원으로 프로그램 관련 정보는 제공하지 않습니다.

◆

기업이 선택한 신뢰 강의

검증된 커리큘럼과 전문 강사진으로 높은 만족도를 제공합니다.

자세히 보기 >

REAL REVIEW

수강생 리얼후기!

실제 수강생의 학습 경험을 확인해 보세요.

수강후기를 불러오는 중입니다.

RECENT Q&A

최근 수강질문

최근 등록된 수강질문을 작성순서대로 확인해 보세요.

전체 수강질문 보기

ALZIO DEEP GUIDE

jQuery을 더 깊게 이해하기

40강의 메뉴·갤러리·슬라이딩 폼·배너·DOM·모바일·UI 위젯 실습을 연결합니다. jQuery 기본 기능과 UI 라이브러리를 나누고, 지원 종료된 Mobile과 live의 당시 사용법을 현재와 분리합니다.

공식 기술정보 확인40강 커리큘럼 연결2026 현재 기술정보

제이쿼리 [실무] · 40강 · 40시간 26분

01

jQuery은 무엇인가

jQuery는 DOM 선택·변경·이벤트·효과·Ajax를 연결하는 JavaScript 라이브러리입니다. 새 프로그래밍 언어가 아니며 브라우저 API를 일정한 호출 방식으로 사용하는 도구입니다. 기존 사이트의 코드에서 어떤 요소를 선택하고 어떤 상태를 바꾸는지 읽을 때 도움이 됩니다.

02

관련 플랫폼과 개발도구의 관계

JavaScript 언어·브라우저 DOM·jQuery·플러그인·jQuery UI·jQuery Mobile은 서로 다른 층입니다. 플러그인의 위젯이 jQuery 기본 기능과 같은 것은 아닙니다. 프로젝트가 요구하는 라이브러리 조합과 CSS·이벤트의 연결 조건을 확인해야 합니다.

03

jQuery의 핵심 기능

기술 자체의 기능과 이 강좌의 직접 학습 범위는 다릅니다. 아래 연결 표시는 저장된 공개 커리큘럼에 근거합니다.

선택·탐색

조건에 맞는 요소와 관련 요소를 찾습니다. 화면이 복잡할 때 수정 대상을 좁히는 데 유용합니다. 선택 결과의 개수와 범위를 확인해야 의도하지 않은 요소를 함께 바꾸는 일을 줄일 수 있습니다.

기술 참고 · 직접 학습 여부는 아래 회차 연결표에서 확인

DOM·속성·클래스

문서의 내용·배치 구조·상태를 바꿉니다. 생성과 삽입·제거의 시점을 나누면 동적인 화면을 읽기 쉽습니다. HTML 문자열을 넣는 기능을 외부 입력에 무조건 안전한 처리로 보지 않습니다.

기술 참고 · 직접 학습 여부는 아래 회차 연결표에서 확인

이벤트·위임

사용자 동작을 처리 함수와 연결합니다. 이벤트 발생 대상과 등록 대상을 구분하면 중복 호출을 찾기 쉽습니다. 구형 live와 현행 on을 같은 API 이름으로 대신 표시하지 않습니다.

기술 참고 · 직접 학습 여부는 아래 회차 연결표에서 확인

효과·애니메이션

표시 상태·시간·순서를 구성합니다. 반복 클릭과 실행 중 상태를 확인해야 메뉴나 배너가 꼬이는 원인을 찾을 수 있습니다. 시각 효과만으로 자료 처리와 접근성이 완성되지는 않습니다.

기술 참고 · 직접 학습 여부는 아래 회차 연결표에서 확인

Ajax·비동기 상태

서버 요청과 응답 처리의 경계를 연결합니다. 성공·실패·대기 상태를 구분하면 통신 오류를 추적하기 쉽습니다. 라이브러리 사용이 서버의 CORS·권한·입력 규칙을 자동으로 바꾸지는 않습니다.

기술 참고 · 직접 학습 여부는 아래 회차 연결표에서 확인

플러그인·위젯

반복되는 UI 동작을 구성 도구와 연결합니다. 옵션·이벤트·메서드를 구분하면 위젯의 현재 상태를 읽기 쉽습니다. jQuery UI와 지원 종료된 jQuery Mobile을 같은 현재 제품 상태로 소개하지 않습니다.

기술 참고 · 직접 학습 여부는 아래 회차 연결표에서 확인

04

이 과정의 실제 작업 흐름

1~14강은 여러 메뉴·오버레이·이미지 갤러리·슬라이딩 폼·돋보기·배너·Parallax 제작입니다. 15~20강은 선택·DOM·속성·CSS·이벤트·데이터 템플릿으로 실제 동작의 기반을 읽습니다.

21~25강은 jQuery Mobile 당시 페이지·테마·입력과 CSS 튜닝이고 26~40강은 jQuery UI의 탭·아코디언·대화상자·슬라이더·날짜·진행률·자동완성·드래그·드롭·크기·선택·정렬입니다. 위젯별 옵션과 이벤트·메서드를 나눠 확인하세요.

메뉴·오버레이
갤러리·폼
배너·Parallax
DOM·이벤트
Mobile 당시 구성
UI 위젯·인터랙션

05

핵심 구조를 이해하는 방법

선택 결과는 하나의 요소가 아니라 여러 요소의 집합일 수 있습니다. 이벤트 위임은 상위 요소에 연결해 하위 요소의 동작을 처리하는 방식이므로 직접 연결과 대상·전파 조건을 구분합니다. 동적으로 만든 요소와 처음부터 있던 요소가 같은 시점에 준비되는 것은 아닙니다.

06

실무 적용과 결과 확인

6~13강의 갤러리·폼·배너를 복습할 때 첫 상태·전환 중·마지막 상태를 따로 기록해 보세요. 빠른 입력·닫기·다시 열기를 비교하는 것은 추가 복습 점검입니다. 화면 전환과 실제 제출된 입력은 다른 상태입니다.

27~40강 위젯에서 옵션 설정·이벤트 발생·메서드 호출을 구분해 결과를 비교하세요. 드래그가 끝난 것과 정렬된 자료의 순서를 저장한 것은 다릅니다. 서버 자료 저장 전체를 위젯 제작 범위로 확대하지 않습니다.

07

이 강좌에서 집중할 전문주제

본 과정의 전문 축은 완성 화면의 상태와 라이브러리 위젯의 관계입니다. 1~14강은 직접 구성한 시각 효과를 읽고 26~40강은 위젯의 계약을 사용합니다. 같은 탭이나 메뉴라도 실행과 설정 책임이 어디에 있는지 구분해 보세요.

19강의 live와 21~25강 Mobile은 현재 상태를 반드시 나눠 읽어야 합니다. Mobile은 공식 프로젝트의 지원 종료 안내가 있으며 기본 jQuery와 jQuery UI까지 모두 같은 상태라고 판단하지 않습니다. 기존 사이트 유지보수 의미와 새 사이트 선택을 구분합니다.

08

현재 기술과 강좌 환경의 관계

jQuery·UI·Mobile·플러그인·브라우저의 정확한 제작 버전은 미확정입니다. 19강 live는 제거된 구형 API이며 현행 on 기반 연결은 별도 비교 정보입니다.

jQuery Mobile은 공식 유지관리 종료 안내가 있는 제품입니다. 기존 모바일 페이지를 읽는 의미는 있지만 새 프로젝트 기본 선택처럼 안내하지 않습니다. 현행 UI의 지원 조건·접근성·라이브러리 조합을 새 환경에서 확인해야 합니다.

09

목적에 맞는 기술 선택과 비교

아래 비교는 목적과 작업 구조를 선택하기 위한 안내입니다. 다른 기술 전체를 본 강좌에서 가르친다는 뜻은 아닙니다.

목적에 맞는 기술 선택과 비교
선택지	작업 접근	이 강좌와의 관계
직접 효과 구성	선택·CSS·이벤트·애니메이션 연결	1~20강 중심
jQuery UI	옵션·이벤트·메서드 기반 위젯	26~40강 직접 연결
jQuery Mobile	당시 모바일 페이지·테마 구성	21~25강은 지원 종료 기술

10

기술개념과 알지오 커리큘럼 연결

회차는 공개 커리큘럼의 실제 순서입니다. 실습 후 응용 제안과 현재 기술 참고정보를 강의에서 제공하는 실습으로 해석하지 않습니다.

기술개념과 알지오 커리큘럼 연결
기능·개념	무엇인가	실무 의미	강좌 회차	학습 상태
메뉴·오버레이	여러 시각 상태 구성	열기·닫기 결과	1·2·3·4·5강	강좌에서 직접 학습
갤러리·폼·돋보기	이미지와 단계 입력	전환과 입력 구분	6·7·8·9·10·11강	강좌에서 직접 학습
배너·Parallax	시간과 레이어 효과	표시 순서 확인	12·13·14강	강좌에서 직접 학습
선택·DOM·속성·이벤트·템플릿	동작의 기초 도구	책임과 대상	15·16·17·18·19·20강	강좌에서 직접 학습
Mobile 페이지·테마	당시 모바일 구성	지원 종료 상태 구분	21·22·23·24·25강	강좌에서 직접 학습
UI 탭·대화상자·슬라이더·날짜	위젯 옵션·메서드	설정과 이벤트	26·27·28·29·30·31·32강	강좌에서 직접 학습
진행률·자동완성·드래그·드롭	사용자 동작과 위젯	중간·완료 상태	33·34·35·36·37강	강좌에서 직접 학습
크기·선택·정렬	자료와 영역의 조작	표시와 저장 구분	38·39·40강	강좌에서 직접 학습

11

처음 배울 때 자주 생기는 오해

모든 위젯이 jQuery 기본 기능인가?

UI와 플러그인의 역할을 나눕니다. 26~40강은 별도 위젯 체계입니다. 기본 DOM 호출만으로 같은 옵션이 생기지는 않습니다.

live를 현재도 그대로 쓰나?

제거된 구형 호출입니다. 19강의 당시 방식과 현행 연결을 구분하세요. on 전체를 직접 강의 내용으로 바꾸어 표시하지 않습니다.

Mobile 종료면 jQuery도 모두 종료인가?

프로젝트의 상태는 따로 봐야 합니다. 21~25강 Mobile의 지원 상태를 분리합니다. UI와 기본 라이브러리를 같은 종료 제품으로 안내하지 않습니다.

폼이 슬라이드되면 제출도 끝인가?

화면 상태와 서버 처리는 다릅니다. 8~9강의 입력 전환을 자료 전송과 구분하세요. 실제 저장 기능 전체로 확대하지 않습니다.

드롭이면 자료 순서도 저장되나?

이벤트와 저장 책임은 다릅니다. 35~40강 결과를 화면과 자료로 나눠 확인하세요. 추가 서버 구현을 강좌가 제공한다고 단정하지 않습니다.

배너·위젯이면 모든 사용자에게 편한가?

입력과 초점·표시를 별도로 확인합니다. 반복 동작 비교는 추가 점검입니다. 전체 접근성 검증을 직접 제공한다고 확대하지 않습니다.

12

다음 학습 방향

제이쿼리 기초 + 고급

선택·탐색·속성·이벤트 API의 기반을 보강합니다.

자료 보기 →

HTML5 CSS3 실무

같은 시각 효과를 CSS로 구성하는 접근을 비교합니다.

자료 보기 →

jQuery 관련 과정 비교

입문·실무·심화 과정의 실제 커리큘럼을 목적에 맞게 비교합니다.

자료 보기 →

실습과 복습 계획

새 환경에서 예제를 확인하고 학습 계획을 세우는 방법을 살펴봅니다.

자료 보기 →

제이쿼리 [실무]

제이쿼리 [실무]

제이쿼리 [실무]

강의구성
(40강) 전체 : 40시간 26분|평균 : 1시간 0분38초

이용기간/강사
1개월2개월
알지오 R&D [IT]

증빙가능
수료증, 수강증, 학습진도

수강료
330,000원165,000원

?

수강 전 꼭 확인하세요

수강 전 자주 묻는 내용을 간단히 안내드립니다.

Q 초보자도 교재 없이 수강 가능한가요? 프로그램 정보는?

A

네, 영상과 실습자료로 쉽게 학습할 수 있습니다. 알지오는 원격평생교육원으로 프로그램 관련 정보는 제공하지 않습니다.

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, 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, 실습19, 실습27
23.1시간 45분 제이쿼리모바일을 이용한 페이지 실무제작, 커스텀 테마
실무에서 사용될 수 있는 모바일 페이지 제작, 나만의 스타일로 커스터마이징하는 방법, 제이쿼리의 기본 속성과 커스텀 속성을 사용한 새로운 작업

div추가, #A_nav, h2추가, .A_listview li img, div class="ui-content", 로딩이미지의 위치, @media screen and, .ui-content, .ui-listview, .ui-btn-text, div data-role="navbar", a href="log.html", ui-body-c, .maincon, position: absolute, .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, .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, .ui-corner, #linbut a:hover, .ui-select, .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, 오버라이딩 위치, $(".alzio2").position, my:"right", at: "left", offset
27.1시간 11분 탭 위젯
기본 탭 위젯을 구현하는 방법, 탭 환경설정 옵션, 탭 이벤트, 탭 메소드

tab 위젯, $("#alzioTab"), selected: null, 첫번째 인자, collapsible: true, select이벤트, 수식과 문자열 관계, button 추가, $("#add").click, parseInt, length 메소드, destroy 메소드
28.1시간 13분 탭 위젯, 아코디언 위젯
탭 메소드, 아코디언 위젯, 아코디언 옵션, 아코디언 이벤트, 아코디언 메소드

option메소드, ("option", "selected"), 두번째 인자값, tab.txt, load 메소드, accordion메소드, 기본Accordion구현, animated: "bounceslide", 코드 작성, changestart 이벤트, val(), if문, 탭, 아코디언 위젯 결합
29.1시간 14분 대화상자 위젯, 동적 대화상자 제작
대화상자 옵션, 대화상자 이벤트, 대화상자 메소드, 실무에서 사용할 수 있는 동적 대화상자를 제작

대화상자(Dialog) 위젯, autoOpen: false, title: "알지오", modal 적용, show, hide 옵션, maxWidth, maxHeight 옵션, 기본 대화상자적용, if조건문, if조건문, var option2, css프레임워크 적용, #ALL .ui-widget-header
30.1시간 14분 동적 대화상자 제작, 슬라이더 위젯, RGB컬러 슬라이더
동적 대화상자 제작을 위한 코드 작성, 슬라이더 위젯, 슬라이더 메소드, 실무에서 사용할 수 있는 컬러 슬라이더를 구현

dialog 위젯 구현, dialog("option", "title", titleText), orientation옵션, animate: "slow", 슬라이더 이벤트, #percent, value, values 옵션, else문, tabs("select", ui.value), css커스터마이징, var rgbText, 에러수정
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()

강의목록 다운로드 1:1 강의 질문&답변

제이쿼리 기초 + 고급

💬

알지오 학습·수강 도우미

운영진이 확인한 안내를 자세히 보고, 필요하면 바로 상담하세요.

상담 상태 확인 중