알지오 평생교육원

로그인|회원가입|고객센터
HOME>IT전문가>Javascript / jQuery>jquery [실무]

jquery [실무]

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

이용기간 2개월

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

370,000225,000



jquery [실무] 사용법 강좌
제이쿼리 과정을 학습한 뒤 실제 실무에 사용할수 있는 효과 및 예제를 다뤄보길 원하는 분들이 이용하면 좋습니다. 기존 학습내용에서 다루지 않은 엘리먼트 조작관리, 메소드 활용, 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()





주소 : 경기 의정부시 시민로122번길 41-46, 2F
회사명 : 알지오|대표 : 채명수|개인정보관리자 : 박진엽|사업자등록번호 : 217-90-17793|통신판매 제2008-0312호
SSL발급자 Equifax Secure Global eBusiness CA-1|Copyright since 2003ⓒalzio.co.,Ltd all rights reserved. SNS

* 중소기업진흥공단 신기술밴처지원

* 서울기술보증 제 20031501호