ONLINE CLASS

제이쿼리 기초 + 고급

COURSE FOCUS

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

제이쿼리의 기초에서 시작해 animate를 이용한 움직임과 탭패널, 동적 이미지 구현을 학습합니다. Ajax 요청의 시작·종료·성공 시점을 다루는 API를 살펴보고 요소의 속성 변경과 스크롤 위치 제어 방법을 익힙니다. 폼 데이터를 직렬화하는 기능까지 확인하며 화면 전환, 요소 상태 관리, 입력 데이터 처리를 jQuery 코드로 구성하는 방법을 배웁니다.

?

수강 전 꼭 확인하세요

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

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

A

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

◆

기업이 선택한 신뢰 강의

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

자세히 보기 >

REAL REVIEW

수강생 리얼후기!

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

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

RECENT Q&A

최근 수강질문

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

전체 수강질문 보기

ALZIO DEEP GUIDE

jQuery을 더 깊게 이해하기

40강에서 기초·이벤트·Ajax·메뉴·폼·효과와 API 탐색을 연결합니다. 후반 구형 호출을 현재 API와 구분하고 초반 Chapter 설명이 빈 부분은 기초 소개로만 표시합니다.

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

제이쿼리 기초 + 고급 · 40강 · 21시간 18분

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~6강은 번호형 기초 Chapter이며 세부 설명이 없습니다. 7~20강에서 HTML·CSS·이벤트·폼·Ajax·효과·위젯·검증·플러그인이 확인되고 21~28강은 탭·이미지·메뉴 실습입니다. 확인되지 않은 초반 기능 목록은 추가하지 않습니다.

29~40강은 선택자·문서 조작·속성·이벤트·효과·자료·폼 관련 API입니다. 공개 명칭의 오타를 현재 표준 API 이름으로 단정하지 않고 실제 호출과 문서를 대조하세요. 구형 andSelf·bind·delegate·die 같은 호출은 제작 당시 조건과 분리합니다.

기초 공개 순서
문서·이벤트
Ajax·효과
메뉴·폼·플러그인
요소·API 탐색
구형 호출 비교

05

핵심 구조를 이해하는 방법

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

06

실무 적용과 결과 확인

7~10·29~35강을 복습할 때 선택된 요소 개수와 변경된 내용을 나눠 기록해 보세요. 빈 선택 결과·여러 요소 선택을 비교하는 것은 추가 응용 점검입니다. 요소를 찾았다는 사실과 서버 자료가 정상이라는 사실은 다릅니다.

21~28강 메뉴를 빠르게 반복 조작했을 때 실행 중인 효과와 마지막 상태를 비교해 보세요. 30~31강 요청의 성공·실패 이벤트도 통신 결과와 분리합니다. 전체 접근성·서버 보안 검증을 직접 강의 내용으로 확대하지 않습니다.

07

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

이 과정은 기본 문법에서 여러 API를 찾고 비교하는 흐름이 고유합니다. 29~40강의 탐색·조작·속성·이벤트를 기능군으로 묶어 실제 화면의 어떤 책임을 바꾸는지 설명해 보세요. 함수 이름을 외우는 것만으로 선택 대상과 상태가 올바르다고 판단하지 않습니다.

32강 andSelf는 현재 addBack과 다른 구형 호출 이름입니다. 34~36강과 40강의 구형 이벤트 연결·해제 호출은 현행 on/off와 조건을 대조해야 합니다. 대체 함수 전체를 강좌 제공 목록으로 표시하지 않습니다.

08

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

정확한 jQuery·브라우저·플러그인 제작 버전은 공개 자료에서 미확정입니다. andSelf·die 등 구형 표기가 있으므로 현행 jQuery 전체 API 과정으로 표현하지 않습니다.

andSelf와 live 같은 제거된 API는 공식 기록의 지원 조건을 확인해야 합니다. 기존 코드를 읽는 학습과 새 프로젝트에 그대로 적용하는 선택은 다릅니다. 최신 라이브러리 변경·현대 프레임워크·접근성 전체는 별도 학습입니다.

09

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

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

목적에 맞는 기술 선택과 비교
선택지	작업 접근	이 강좌와의 관계
jQuery	선택·이벤트·효과·Ajax를 라이브러리로 연결	본 과정 중심
브라우저 API	DOM·이벤트·통신을 직접 사용	도구와 기반 구분
프레임워크 UI	상태·컴포넌트 중심 구성	다음 기술 선택 비교

10

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

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

기술개념과 알지오 커리큘럼 연결
기능·개념	무엇인가	실무 의미	강좌 회차	학습 상태
공개 제목 기준 기초 소개	기초 Chapter 1~6	상세 기능 미확정	1·2·3·4·5·6강	기초 소개 · 세부 범위 미확정
HTML·CSS·이벤트·폼·Ajax	문서와 요청 동작	입력·선택·응답	7·8·9·10강	강좌에서 직접 학습
효과·갤러리·위젯·검증	여러 화면과 상태	실행 순서 확인	11·12·13·14·15·16·17·18·19·20강	강좌에서 직접 학습
탭·이미지·메뉴 실습	시각 요소의 연결	동작과 표시 상태	21·22·23·24·25·26·27·28강	강좌에서 직접 학습
선택·조작·속성 API	문서 대상과 변경	범위와 호출 계약	29·30·31·32·33·34·35·36강	강좌에서 직접 학습
이벤트·효과·자료·폼 API	동작과 자료 전달	구형 호출과 현행 분리	37·38·39·40강	강좌에서 직접 학습

11

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

jQuery는 JavaScript와 다른 언어인가?

라이브러리입니다. 7강 기본 문법과 브라우저 역할을 나누세요. 새 언어 실행환경이 아닙니다.

선택하면 하나만 나오나?

여러 요소의 집합일 수 있습니다. 29~40강에서 선택 개수와 범위를 확인하세요. 전체 선택을 단일 요소의 변경으로 오해하지 않습니다.

Ajax면 서버 오류도 해결되나?

요청 도구와 서버 조건은 다릅니다. 10·30~31강의 성공·실패를 구분하세요. 접근 권한과 CORS를 자동으로 바꾸지는 않습니다.

andSelf가 현재 기본 이름인가?

구형 호출입니다. 32강 표기와 현행 addBack의 조건을 대조하세요. 현재 함수 전체를 해당 강의에서 배운다고 바꾸지 않습니다.

초반 Chapter에서 모든 문법을 배우나?

1~6강 세부 설명은 없습니다. 기초 소개로만 연결했습니다. 확인되지 않은 목록을 추측하지 않습니다.

animate가 모든 상태를 정리하나?

효과의 진행과 실제 상태를 구분해야 합니다. 반복 입력을 결과와 비교하세요. 시각 변화가 자료 처리 성공을 보장하지 않습니다.

12

다음 학습 방향

제이쿼리 [실무]

메뉴·갤러리·폼과 UI 위젯의 제작 실습으로 확대합니다.

자료 보기 →

자바스크립트 ES6 [입문부터 고급까지]

JavaScript 자체의 자료·함수·비동기를 보강합니다.

자료 보기 →

jQuery 관련 과정 비교

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

자료 보기 →

실습과 복습 계획

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

자료 보기 →

제이쿼리 기초 + 고급

제이쿼리 기초 + 고급

제이쿼리 기초 + 고급

강의구성
(40강) 전체 : 21시간 18분|평균 : 31분56초

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

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

수강료
190,000원95,000원

?

수강 전 꼭 확인하세요

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

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

A

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

01.23분 절대퀄리티 제이쿼리 기초 과정 - Chapter 1

Jquery 가져오기, 기본적인 기능(ready, click, hide), 아이디, 클래스, *, this, frist, frist-child, href, target, botton, even, odd
02.25분 절대퀄리티 제이쿼리 기초 과정 - Chapter 2

click, dblclick, mouseenter, mouseleave, mouseup, hover, focus, blur, on, 숨김, 표시 버튼 생성, toggle, fadein, fadeout, fadetoggle, fadeTo, slideDown, slideUp, slideToggle, animate, animate 활용
03.18분 절대퀄리티 제이쿼리 기초 과정 - Chapter 3

콜백함수, slideDown, slideUp, text, html, val, link, 예제 실습1, 예제 실습2
04.23분 절대퀄리티 제이쿼리 기초 과정 - Chapter 4

링크 주소 변경, 풍선도움말 출력, 복사, append, prepend, appendText, before, after, remove, empty, addClass, removeClass
05.29분 절대퀄리티 제이쿼리 기초 과정 - Chapter 5

Inner 과정 추가, Border 값 설정, button에 따라 변경됨, P 태그 안에 span 태그, 모든요소 조상값 반환, 웹문서 로드, 버튼클릭시 결과
06.35분 절대퀄리티 제이쿼리 기초 과정 - Chapter 6

필터링, success, error 설정, children().css값, 실행결과 확인, next 명령어, div내 P 태그 설정, eq 값 변경후 실행, not 값 설정
07.36분 제이쿼리 핵심을 꿰뚫는 스페셜 강의 - Chapter 1
기본문법과 html

라이브러리 연동, 제이쿼리 문법, $("li:lt"), $("li:eq"), $("li:gt"), $("#alzio3").text(), text()와의 차이, insertAfter()
08.33분 제이쿼리 핵심을 꿰뚫는 스페셜 강의 - Chapter 2
CSS조작 제이쿼리 이벤트

removeClass(), 제이쿼리 문법, slideUp(), button, img, return false, toggle 실습1, mouseout이벤트, button 추가, unbind()
09.44분 제이쿼리 핵심을 꿰뚫는 스페셜 강의 - Chapter 3
이벤트, 폼태그

focus 이벤트, sumit 타입, 자바스크립트 알림, password 셀렉터, $(this).css, submit 셀렉터, file 셀렉터, each함수, removeAttr
10.23분 제이쿼리 핵심을 꿰뚫는 스페셜 강의 - Chapter 4
Ajax의 활용, Show함수

loadfile.txt, load("01강.html li"), success값, data 파라미터, + 연산자, show함수 문법
11.38분 제이쿼리 핵심을 꿰뚫는 스페셜 강의 - Chapter 5
animate

display:none, button#on, $("div").toggle(), $("button").click, fade 효과, fadeTo 함수, display, visibility, anomate() 문법, 결과값 확인
12.39분 제이쿼리 핵심을 꿰뚫는 스페셜 강의 - Chapter 6
슬라이드 갤러리

th:nth-child(odd), $("th:nth-child(odd)"), ("tr:not(:first-child)"), td:nth-child, removeClass("point"), $("#main img").before(), 슬라이드 이미지 갤러리, animate()
13.54분 제이쿼리 핵심을 꿰뚫는 스페셜 강의 - Chapter 7
Accordion, Tooltip

Accordion 완성내용, $("dd").slideUp(), dt.selected, 가로Accordion, 마우스오버효과 추가, addClass("selected"), mousemove(), offset(), mouseout()
14.58분 제이쿼리 핵심을 꿰뚫는 스페셜 강의 - Chapter 8
Drop-down, Modal, Floating

$(".sub").hide(), 속성 셀렉터, Modal Window1, Modal Window2, return false, fadein, mouseup()
15.38분 만족도 100% 마지막 제이쿼리 과정 - Chapter 1
Validation, 수식

submit이벤트, each, if문, && 앤드연산자, 메일 어드레스, replace, filter
16.24분 만족도 100% 마지막 제이쿼리 과정 - Chapter 2
에러처리

required, size()== 0, prepend(), prepend 출력값, animate(), 스크롤 위치, 유효성검사 주의사항
17.29분 만족도 100% 마지막 제이쿼리 과정 - Chapter 3
Sliding Window

overflow:hidden, prependTo(), 콜백함수, appendTo, prependTo
18.33분 만족도 100% 마지막 제이쿼리 과정 - Chapter 4
Paging 효과

CSS 적용, .question 적용, return false, date, 콜백함수, return false
19.29분 만족도 100% 마지막 제이쿼리 과정 - Chapter 5
jQuery 플러그인

jQuery 플러그인, 플러그인의 위치, corner위치값, headers, sortForce, sortForce: [[3,1]]
20.49분 만족도 100% 마지막 제이쿼리 과정 - Chapter 6
동적인 이미지, 탭패널

items, 이미지 링크, .item .text, var move, var zoom, 마우스오버 animate, list-style:none, #tab .allpanel, #tab .panel
21.43분 탭패널 구현, 동적 이미지구현

hover 이벤트구현, panelIds의 값, $('.item').each, $(this).append, hover 이벤트 구현, effects 파일, topRight 정의
22.45분 텍스트 크기 조절, 메뉴에서 사용할 수 있는 제이쿼리

텍스트 줌 인/아웃 기능, return false, 이미지 대체효과, var fade, var top, 아웃 animate 구현, 메뉴를 따라다니는 아이콘, 아이콘 위치 수정, addClass('hover')
23.29분 스크롤메뉴

#scroll, var paddingL, paddingR, animate, mousemove, top: top_value, 계산식수정
24.16분 텍스트 대체 이미지메뉴

body, .menu ul, menu ul li a, 아웃 animate
25.21분 동적 메뉴제작실습 part1

동적 메뉴, #ALL, .list:last-child dt, var $allDT, var $allDD
26.19분 동적 메뉴제작실습 part2

delegate 메서드, dt에 click이벤트설정, $otherWraps, next().slideDown, $otherWraps.animate, trigger
27.23분 슬라이딩 박스메뉴 제작실습 part1

submenu 구조, ul.menu li > a, z-index:10, div.submenu, div.submenu a:first-child, display:none
28.17분 슬라이딩 박스메뉴 제작실습 part2

mouseenter, animate, callBack함수설정, $sub_menu.hide(), text 재설정
29.26분 API ection 1
add(), addBack(), addClass()

Add 메소드, Add에서 "span"값을 삭제, Clone().add 추가, Collection, Addback, nextAll().addBack(), Find 메소드, Addback() 추가
30.33분 API section 2
NodeType, after(), ajaxComplete(), ajaxError()

Contents(), .wrap 메소드, Text node 타입변경, End 메소드값 삭제, after 설정, AjaxComplete, On, load 함수 적용, Ajaxsend 설정, Append 값, 에러발생시 팝업
31.24분 API section 3
ajaxStart(), ajaxStop(), ajaxSuccess(), All Selector()

Start 메소드, ajaxStart(), 다른 위치의 문서, .hide() 처리, alert 팝업, var elementCount, 개체가 나오도록
32.34분 API section 4
andSelf(), animate(), append(), appendTo(), attr()

andSelf 메소드, animate, animate 이중처리, toggleClass, slideToggle, createTextNode, appendTo 메소드, $ ("h3").appendTo, 버튼을 클릭했을때 함수, after
33.28분 API section 5
[name|=”value”], [name*=”value”], [name~=”value”], [name$=”value”], [name=”value”], [name!=”value”], [name=”value”], .before()

AttributeContains, 링크언어, 응용예제, input에 text를 출력, [name="value"]의 기능, 곡절부호의 기능, Before 응용
34.42분 API section 6
.bind(), .hover(), .focus(), .blur(), :button Selector, callbacks, change(), :checkbox, :checked

bine, script설명, focus, fireWith, disable, change, checkbox, borders;solid, checkbox
35.36분 API section 7
Child Selector (“parent > child”), .children(), Class Selector, clearQueue(), click(), clone (), closest(), :contains(), 2contents(), context, data(), dblclick (), deferred always (), done(), fail(), delay()

Child Selector, solid blue, click메소드 설명, parents, return.this.nodeType, first, last, dblclick, 팝업 생성, fadein, fadeout
36.33분 API section 8
delegate(), descendant Selector, detach(), die(), :disabled, each(), Element Selector, empty(), :empty Selector, :enabled Selector, end(), eq(), :eq() Selector, error()

delegate, descendant Selector, 세가지 장착, index, value, empty Selector, end제거시 결과, replaceWith
37.28분 API section 9
:even, event.currentTarget, event.data, event.delegateTarget, event.isDefaultPrevented(), event.isImmediatePropagationStopped(), event.namespace, event.pageX, Y, event.preventDefault(), event.relatedTarget, event.result, event.stopImmediatePropagation()

event target, event.which, filter, first-of-type Selector, focusin, focusout, gt Selector, true인 결과
38.34분 API section 10
event.timeStamp, event.type, event.which, fadeIn(), fadeOut(), fadeTo(), fadeToggle(), :file, filter(), find(), finish(), first(), :first-child, :first-of-type, :first, focus(), :focus, focusin(), focusout(), get(), :gt(), has(), hasClass(), :header

event target, event.which, filter, first-of-type Selector, focus, fadeOut, has, true인 결과
39.35분 API section 11
height(), :hidden, :image, .index(), :input, .insertAfter(), .insertBefore(), .is(), keypress(), .keyup(), :lang(), :last-child, :last-of-type, :lt(), .map(), .mousemove(), :not(), :nth-child(), :nth-of-type(), :nth-last-of-type(), :nth-last-child(), .offset(), .offsetParent(), .one(), :only-child, :only-of-type, :password, .position(), .prev(), .prevAll(), .prevUntil()

height메소드, type, 다른 예제 적용, script코드, keydown, It Selector, not Selector, offsetParent, prev, prevUntil
40.32분 API section 12
.prop(), :radio, .removeAttr(), .removeData(), .removeProp(), .replaceAll(), :reset, .resize(), :root, .scroll(), .scrollLeft(), .scrollTop(), .select(), .serialize(), .serializeArray(), .slice(), :submit, :text, .toArray(), .triggerHandler(), .unbind(), .undelegate(), .unwrap(), :visible Selector, .wrapAll(), .wrapInner()

prop, removeProp, root Selector, serialize메소드, submit, triggerHandler, undergate, wrapAll, wrapInner

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

제이쿼리 [실무]

💬

알지오 학습·수강 도우미

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

상담 상태 확인 중