jquery [실무]
![jquery [실무]](/img_file/builder/Date/201210052700jquery_S2.jpg)
제이쿼리 과정을 학습한 뒤 실제 실무에 사용할수 있는 효과 및 예제를 다뤄보길 원하는 분들이 이용하면 좋습니다. 기존 학습내용에서 다루지 않은 엘리먼트 조작관리, 메소드 활용, 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()
![jquery [입문 + 고급]](/img_file/builder/Date/201507022679jquery_new.jpg "jquery [입문 + 고급]")
jquery [입문 + 고급]21시간 18분
