jquery [실무] - 총 20시간 23분 / 강의당평균 : 1시간 1분8초

jquery [실무]

전체 : 20시간 23분 / 강의당평균 : 1시간 1분8초

01 숨겨진 메뉴리스트, 버블형태 메뉴리스트 제작

다양한형태의 메뉴리스트들을 제작실습함으로써 실무능력을 향상시킵니다.

41분

책갈피 : [00:04] 강의소개 / [01:01] 폴더관리 / [02:05] 실습완성본 / [02:41] HTML구조 / [03:14] body / [03:33] ul#menu / [05:06] z-index:9999 / [05:51] ul#menu li / [06:24] ul#menu li a / [07:53] border-radius / [08:43] background 일괄지정 / [08:58] 적용값확인 / [09:33] $('#menu a').css / [09:59] 적용값확인 / [10:28] hover 이벤트 / [11:06] 오버 animate / [11:46] 적용값확인 / [12:14] 아웃 animate / [12:40] 적용값확인 / [13:13] 버블형태 메뉴 / [14:17] HTML구조 / [15:36] 서브메뉴 구조 / [15:53] 적용값확인 / [16:25] * / [16:43] .title / [17:30] .title span / [17:50] #menu / [18:56] #menu .item / [19:15] 적용값확인 / [19:44] .item img.circle / [21:02] a.icon / [22:43] a.icon 컬러지정 / [23:18] .item h2 / [24:24] .item ul / [25:33] .item ul li a:hover / [26:13] display:none / [26:30] div hover이벤트 / [27:17] ('.circle').animate / [28:06] 적용값확인 / [28:40] 'opacity' :'0.8' / [29:37] easeOutBack / [30:28] callBack 지정 / [31:13] 적용값확인 / [31:58] 마우스아웃 설정 / [32:39] 적용값확인 / [33:21] $el.find('h2').addClass / [33:57] .item h2.active / [34:39] 심플 메뉴 / [35:26] HTML구조 / [36:02] body / [37:19] .menu / [38:25] .menu ul li / [40:06] .menu ul li a / [40:35] 적용값확인 / [40:57] 텍스트일괄지정 / [41:13] 적용값확인

02 기본심플메뉴, X바 메뉴

기본적인 형태의 메뉴와, 닫기버튼이 포함된 메뉴를 만들어봅니다.

38분

책갈피 : [00:02] $(".menu li a").wrapInner / [01:06] $(".menu li a").each / [02:28] span 적용 예 / [03:11] 적용값확인 / [03:43] .menu ul li a span / [03:59] 적용값확인 / [04:23] .menu ul li a span.over / [05:36] $(".menu li a").hover / [06:47] $(".over", this).animate / [07:19] 아웃 animate / [07:25] 적용값확인 / [08:20] background, color / [08:51] X바 메뉴 / [09:48] HTML구조 / [11:46] 적용값확인 / [12:19] html, body / [12:52] #wrap / [13:27] #main-handle / [15:08] #main-list / [15:55] #main-list li / [18:48] #sub-bar / [19:26] .sub-list li a / [21:00] .sub-list / [22:31] #main-list li a.close / [24:48] mouseover 이벤트 / [25:36] $(".close").fadeIn / [26:40] $(this).addClass / [27:12] #main-list li a.active / [27:38] 적용값확인 / [28:33] removeClass("active") / [29:19] $("#sub-bar").animate / [30:18] (".sub-list").fadeIn / [30:28] siblings 메소드 / [31:27] 적용값확인 / [32:04] $(".sub-list").hide / [33:08] $(".close").click / [33:55] removeClass("active") / [34:42] $(".sub-list").fadeOut / [35:32] $("#sub-bar").animate / [36:29] $(".close").fadeOut

03 아코디언메뉴, 오버레이형식의 메뉴

다양한형태의 메뉴리스트들을 제작실습함으로써 실무능력을 향상시킵니다.

40분

책갈피 : [00:05] 아코디언메뉴 / [01:23] HTML구조 / [02:43] 서브메뉴 구조 / [03:32] 적용값확인 / [04:12] *, body / [04:57] #ALL / [05:32] h3 / [06:21] .menu1 / [07:00] .menu2 / [08:17] .head / [09:54] .body a / [11:12] .body a:hover / [11:59] 적용값확인 / [12:56] .body {display:none;} / [13:41] $(".head").click / [14:06] $(this).css / [14:42] next("div.body") / [15:31] slideToggle / [16:14] 적용값확인 / [17:43] siblings("p.head") / [19:08] slideUp / [20:03] ("p.head").css / [20:33] 적용값확인 / [21:21] menu2 코드구현 / [21:37] mouseover이벤트 / [22:33] 적용값확인 / [23:06] 오버레이 메뉴 / [23:31] 실습완성작 / [25:02] HTML구조 / [26:28] 서브메뉴 구조 / [27:02] 적용값확인 / [27:53] body / [28:39] h1 span / [29:17] h2 / [29:56] .overlay / [31:05] ul.menu / [31:50] ul.menu > li / [32:49] ul.menu > li > a / [35:06] ul.menu div / [36:51] ul.menu div ul.submenu / [37:23] ul.menu div ul li a / [38:43] li.subheading / [39:09] 적용값확인 / [39:58] ul.menu div{display:none;}

04 오버레이 메뉴, blur effect

오버레이메뉴와 블러이펙트가 가미된 웹페이지를 제작함으로써 실무능력을 향상시킵니다.

42분

책갈피 : [00:10] 제이쿼리 구현 / [00:29] 기본변수지정 / [01:30] mouseenter 이벤트 / [02:15] var $this / [02:44] $this.addClass / [03:10] ul.menu > li.selected > a / [03:46] 적용값확인 / [04:29] $this.children('div').slideDown / [05:42] 적용값확인 / [07:30] callBack함수 / [07:47] $menu_list.hide() / [08:16] $this.removeClass / [09:03] mouseleave 이벤트 / [09:36] 적용값확인 / [11:44] 오버레이적용 / [12:14] $overlay.fadeTo / [13:02] 적용값확인 / [13:57] 오버레이삭제 / [14:22] 적용값확인 / [15:01] children('div').hide() / [15:55] blur effect / [16:10] 실습완성작 / [17:08] HTML구조 / [18:32] 적용값확인 / [19:05] body / [19:50] .ALL >header / [20:50] .ALL > header:after / [22:38] h1, h1 span / [23:16] .content / [23:42] .content article / [25:57] .content h3 a / [26:39] .content article p / [27:11] 기본변수설정 / [28:07] $articles.on / [29:42] timeout / [30:03] setTimeout / [30:52] removeClass, removeClass / [31:21] blur, active 클래스 / [33:46] .content article.blur / [35:04] 적용값확인 / [35:53] text 관련 blur처리 / [36:17] 적용값확인 / [36:51] .content article.active / [38:43] mouseleave 이벤트 / [39:20] 적용값확인 / [40:23] -webkit-transition / [41:54] 적용값확인

05 puzzle box menu

퍼즐이 흩어지고 모아지는 이펙트를 구현하여 웹메뉴를 제작해 봅니다.

43분

책갈피 : [00:07] puzzle box menu / [00:17] 실습완성작 / [01:59] HTML구조 / [02:33] 박스구성 / [05:07] 적용값확인 / [05:39] h1 / [06:25] boxes / [07:42] .boxes > div / [09:24] z-index:999 / [10:01] position:absolute / [10:46] 위치값추가 / [11:19] 적용값확인 / [11:59] .menu1~4 / [12:53] 이미지확인 / [13:28] .boxes div a / [14:41] line-height:70px / [16:00] .boxes div.boxcontent / [16:52] padding, margin / [18:14] display:none / [19:05] var divinfo, current / [19:52] $('#boxes > div').each / [20:52] var source / [21:43] divinfo.source.push / [22:33] $('#boxes a').bind('click') / [23:14] e.preventDefault() / [24:30] $currentBox.css / [25:37] if, else문 설정 / [26:10] current == $currentBox.index() / [28:00] ('#boxes > div').each / [28:36] var $el / [28:55] $el.animate / [29:44] $(this).hide() / [30:19] top, left : 150 / [30:52] Math.round / [31:07] Math.random / [32:58] 적용값확인 / [33:49] var newwidth,newheight / [34:01] $currentBox.animate / [34:46] easeOutBack / [35:20] ('.boxcontent').fadeIn() / [36:03] 적용값확인 / [37:33] $currentBox.animate / [39:14] 적용값확인 / [40:19] $('#boxes > div').each / [41:01] divinfo.source / [42:10] 적용값확인

06 오버레이 이미지 갤러리

클릭이벤트가 적용된 팝업 갤러리에 오버레이를 적용해 시각적인 효과를 꾸며줍니다.

46분

책갈피 : [00:32] 이미지 갤러리 / [01:02] 실습완성작 / [02:53] HTML구조 / [03:56] menulist구조 / [04:18] modal구조 / [05:25] 적용값확인 / [05:43] *, body / [06:09] .overlay / [06:56] style=display:none; / [07:51] .modal / [08:40] box-shadow / [09:46] z-index:9999 / [10:17] margin-left:-250px; / [11:22] .modal h2 / [12:00] font-weight:normal / [13:18] a.next, a.prev / [14:10] cursor:pointer / [14:55] a.next, a.prev / [15:35] 적용값확인 / [16:09] span.close / [16:39] height, width / [17:41] opacity:0.5 / [17:45] span.close:hover / [18:32] style=display:none / [18:57] .menu / [19:30] .menu h2 / [19:59] ul.menulist / [20:19] ul.menulist li a / [21:11] font-size / [21:47] box-shadow / [22:17] opacity:0.9 / [23:17] alzio1~6 아이콘지정 / [23:59] ul.menulist li a > span / [25:09] var total / [26:15] click 이벤트 / [26:24] var $this, $el / [26:59] var source / [28:14] function SHOW() / [28:50] $('#overlay').show / [29:17] if조건문 / [30:16] $('#modal').animate / [30:42] 적용값확인 / [31:51] $('#title').html / [32:21] img 태그삽입 / [33:37] $this.find('em').html / [34:00] 적용값확인 / [34:55] .modal h2 img / [35:43] $('.close').click / [36:15] function HIDE() / [36:53] $(this).hide() / [37:36] 적용값확인 / [38:35] 다음버튼정의 / [38:50] e.preventDefault() / [41:09] 적용값확인 / [41:36] 이전버튼정의 / [41:53] current-1 / [42:06] 적용값확인 / [42:43] 내부텍스트추가 / [43:06] p 요소추가 / [44:14] var $alzio / [44:40] ('#content').append / [45:28] 적용값확인

07 이미지 슬라이드

버튼을 통해 슬라이드 애니메이션을 구현하는 이미지 슬라이드를 제작해 봅니다.

46분

책갈피 : [00:20] 실습완성작 / [01:17] HTML구조 / [01:59] menulist구조 / [02:39] 적용값확인 / [03:09] *, body / [03:34] .ALL / [04:44] a.next, a.prev / [05:53] a.prev:hover, a.next:hover / [06:27] background-image / [06:58] 적용값확인 / [07:27] .ALL .menulist / [08:30] position:absolute / [09:16] -webkit-box-reflect / [10:08] 적용값확인 / [10:30] .ALL .menulist:hover / [11:06] .ALL .menulist img / [11:40] .ALL .menulist .info / [13:38] .info h2 / [14:58] .info span / [16:28] var first / [16:57] var positions / [17:57] var $menu / [18:23] var total / [19:52] var hiddenRight / [20:48] $menu.children('div').css / [22:14] overflow-x:hidden / [23:04] 버튼에 대한 정의 / [23:50] .ALL a.disabled / [24:47] ('div:lt(4)').each / [25:40] var $el / [25:48] $el.animate / [26:18] positions(i) / [27:29] enableNext / [27:46] 적용값확인 / [28:48] ('.next').click / [29:37] div:nth-child('+first+') / [31:11] 적용값확인 / [31:40] function moveLeft / [31:56] var hiddenRight / [33:20] var cnt = 0 / [34:12] 적용값확인 / [34:58] var $this / [35:13] slice / [36:36] $el.animate / [37:52] ++cnt / [39:26] ++first / [40:14] enableNext, enablePrev / [41:07] ('.prev').click / [41:34] function moveLeft / [41:45] var hiddenRight / [43:13] $menu.children('div').slice / [43:56] positions(i+1) / [45:12] --first / [45:49] 적용값확인

08 제이쿼리 슬라이딩 폼

단계별로 진행되는 슬라이딩 폼을 제작하고, 동적인 애니메이션을 구현합니다.

44분

책갈피 : [00:12] 제이쿼리 슬라이딩 폼 / [02:39] HTML구조 / [03:56] form구조 / [05:00] navigation구조 / [05:39] 적용값확인 / [06:33] #ALL / [07:38] #form / [09:02] #steps / [10:48] #navigation / [12:34] #navigation ul li a / [13:59] -webkit-gradient / [15:43] #steps form fieldset / [17:13] #steps form p / [19:29] input, textarea, select / [21:25] #steps form p.submit / [24:01] var allfieldset, current / [25:25] var stepsWidth, width / [28:57] 필드셋의 넓이저장 / [30:31] $('#formEl').children(':first') / [31:17] 적용값확인 / [31:40] $('#navigation').show() / [32:21] 클릭이벤트설정 / [32:54] var $this, prev / [33:10] current 설정 / [34:15] addClass('selected') / [34:54] removeClass / [35:29] 적용값확인 / [36:29] $('#steps').animate / [37:10] marginLeft 변경 / [38:55] width(current-1) / [39:59] CallBack구현 / [40:56] 적용값확인 / [41:40] if, else문

09 제이쿼리 슬라이딩 폼, 돋보기 구현

슬라이딩폼을 마무리하고, 쇼핑몰 등에서 자주 사용되는 이미지 돋보기 효과 구현합니다.

39분

책갈피 : [00:18] validateSteps 함수정의 / [01:34] $('#formEl').data / [02:13] validateStep 함수정의 / [02:55] var error, hasError / [04:24] var valueLength / [05:56] 유효성검사 / [07:01] 적용값확인 / [08:04] var $link / [08:56] f(hasError) / [09:41] span.checked, span.error / [10:40] 적용값확인 / [12:18] $('#completeButton').click / [13:59] 이미지에 돋보기 구현 / [15:44] HTML구조 / [16:51] 적용값확인 / [17:39] .glass / [19:51] border-radius / [21:24] position: absolute / [22:26] .small / [23:16] original_width, original_height / [24:05] $(".glass").mousemove / [26:28] var image_object / [28:52] else문 구현 / [29:16] var glass_offset / [31:00] 돋보기구현 범위설정 / [33:29] 돋보기 이동설정 / [33:57] $(".large").css / [35:44] 돋보기 내용설정 / [37:03] var bgp / [37:57] 적용값확인

10 늘어나는 이미지 메뉴 구현

늘어나는 이미지 메뉴를 제작해 봅니다.

42분

책갈피 : [00:04] Expanding Image Menu / [01:41] HTML구조 / [03:08] div class="info" / [03:51] 적용값확인 / [04:29] body / [06:14] .menu / [08:25] .menu ul li / [10:58] .black / [11:58] .color / [13:33] overflow:hidden 삭제 / [14:34] .menu1~6 span / [15:17] .info / [17:12] .info h2 / [18:15] overflow:hidden 추가 / [19:10] 기본변수지정 / [20:40] totalMenuItems / [21:09] ExpandingMenu / [22:12] validCurrent / [23:52] 초기값 지정 / [24:31] configureMenu / [25:52] slideOutItem 함수 / [28:39] click 이벤트 구현 / [29:28] if, else문 / [31:56] current= idx / [33:05] openItem / [34:19] 삼항연산자 구현 / [35:21] $item.animate / [38:18] $menuItemsPreview.animate / [40:14] return / [40:32] 적용값확인

11 전체페이지로 구성된 이미지 갤러리

전체페이지로 꾸며져 있는 유용한 이미지 갤러리를 만들어봅니다.

41분

책갈피 : [00:13] 이미지 갤러리 구현 / [02:13] HTML구조 / [03:35] infobar 구조 / [04:49] panel 구조 / [05:29] 적용값확인 / [06:06] body / [06:42] .infobar / [08:28] z-index / [09:29] span#imgname / [10:35] #thumbs / [11:28] #content / [12:17] #content img / [13:40] #panel / [15:47] #panel img / [16:52] a#next, a#prev / [18:56] 적용값확인 / [20:54] display:none 추가 / [21:18] var current / [21:38] var totalpictures / [22:34] hover 이벤트 / [23:57] 적용값확인 / [24:14] click 이벤트 / [25:02] $('').load / [26:39] current값 변경 / [29:14] $('#panel').animate / [31:22] callBack구현 / [31:33] var title / [33:05] 최초,마지막 이미지 버튼정의 / [35:13] live 함수 / [36:31] $('#imgname').hide / [37:35] $('#thumbs').css / [39:18] 적용값확인

12 이미갤러리 마무리, 오토배너 생성

이미지갤러리 버튼에 관련된 내용을 마무리하고, 자동적으로 리프레시되는 베너를 제작합니다.

45분

책갈피 : [00:06] 버튼작업 마무리 / [00:41] $('#next').click / [01:27] var $nextimage / [02:32] current+2 정의 / [03:49] function navigate / [05:05] $('').load / [06:02] $('#imgname').fadeOut / [07:37] $('#wrapper').append / [10:19] ++current, --current / [12:10] if(current==0) / [13:39] var title / [14:55] 오토배너 생성 / [16:06] HTML구조 / [17:22] 적용값확인 / [18:11] h2 / [19:19] div#slideAll / [20:24] div#slideItems / [22:10] 적용값확인 / [23:08] $('#slideItems div').hide / [25:07] var slides, html / [25:50] for문으로 리스트생성 / [27:10] 생성되는 ul, li / [28:20] html += / [29:42] 적용값확인 / [30:10] ul#slideAllCount / [31:53] ul#slideAllCount li.slide span:hover / [33:23] bind 함수 / [35:30] function gotoSlide / [37:31] 적용값확인 / [38:14] prev = current / [39:53] 자동배너값 autoSlide / [41:39] setInterval 생성 / [42:51] 적용값확인

13 오토배너 생성2

이전시간과는 다르게 정의된 오토배너를 새롭게 생성해보고 완벽하게 이해할수있도록 실습을 진행합니다.

41분

책갈피 : [00:11] 오토배너 생성2 / [01:34] HTML구조 / [01:50] 이징효과 구현 파일 / [03:15] div id="rot1" / [05:07] 적용값확인 / [05:56] *, body / [07:49] #wrapper / [08:14] .rotator / [10:30] img.bg / [12:16] .rotator ul li / [16:04] border-radius / [17:32] .rotator .heading / [18:49] .rotator .heading h1 / [20:37] .rotator .content / [21:58] .rotator .content p / [23:05] var current = 1 / [23:57] var rotate / [25:28] display 함수 / [26:59] setInterval / [27:54] function display 정의 / [29:19] var elem / [31:18] $this.parent().find('li a') / [32:34] var info_elem / [34:34] info 내용출력 / [35:57] $('#rot1').prepend / [37:47] 적용값확인 / [38:18] 이미지경로지정 / [39:42] $('#menu li').click

14 Parallax 효과

레이어의 기능을 이해하고 3D효과를 구현하는 Parallax에 대해 공부합니다.

43분

책갈피 : [00:11] Parallax 란? / [02:02] Parallax 개념 / [03:21] HTML구조 / [04:36] img 크기비교 / [05:29] 적용값확인 / [06:07] body / [07:06] #Parallax / [08:44] #Parallax img / [09:59] $('#Parallax').mousemove / [10:41] var offset / [11:25] 마우스 위치 저장 / [13:05] 마우스 위치 비율 저장 / [15:32] $('img').each / [17:08] $(this).animate / [20:26] 애니메이션속도 / [20:58] 적용값확인 / [21:49] Parallax 실습2 / [22:09] 이번실습 내용 / [22:54] HTML구조 / [23:58] 이미지작업 / [24:50] 적용값확인 / [25:49] navi 정의 / [27:27] content 정의 / [29:06] 이미지 위치지정 / [30:11] 적용값확인 / [30:46] $(window).bind('scroll') / [32:53] parallaxScroll / [34:16] 클릭이벤트 설정 / [35:47] scrollTop 정의 / [37:08] 적용값확인 / [37:47] function parallaxScroll / [39:15] 적용값확인 / [39:51] function activeNav / [41:03] addClass('active') / [42:33] 적용값확인

jquery [활용]

15 제이쿼리의 엘리먼트 선택관리와 엘레먼트 선택 메소드

제이쿼리 선택을 제어하고 선택내용을 조정하는법과 엘리먼트별로 선택을 제어할 수 있는 메소드를 학습합니다.

2시간 14분

책갈피 : [00:04] 제이쿼리 / [00:26] 제이쿼리를 사용하는 패턴 / [01:26] 선택항목 확장 / [01:51] 선택확장 메소드 / [02:53] 선택확장을 위한 문서 / [03:28] body부분 살펴보기 / [05:30] h1태그 style지정 / [06:10] table구성 / [07:29] dcell부분 padding값 삽입 / [08:41] input과 label선언 / [09:30] buttonDiv지정 / [10:35] script구성 / [11:22] add메소드를 추가하기 위한 함수 구성 / [12:35] 엘리먼트 요소를 label에 대한 부분으로 구성 / [14:07] 이미지를 선택할 수 있게 구성 / [14:28] add메소드 값 선언 / [16:30] css추가 / [17:56] 저장 후 확인 / [19:29] remove메소드 / [19:55] 선택항목을 축소하는 메소드 / [20:33] eq메소드 / [20:48] filter메소드 / [21:02] first메소드 / [21:15] has메소드 / [21:56] last메소드 / [22:18] not메소드 / [23:18] slice메소드 / [25:30] 선택축소에 해당하는 script삽입 / [26:45] label에 대한 부분 구성 / [27:56] first메소드 이용 / [29:18] eq메소드 이용 / [29:52] index에 대한 숫자 입력 / [31:21] eq메소드 인자값 양수나 음수를 지정할 경우 / [32:05] slice메소드 이용 / [33:21] 시작 index와 종료 index선정 / [36:21] 엘리먼트 필터링 / [37:00] filter메소드의 인자값 확인 / [39:45] 함수를 사용하는 방법 살펴보기 / [41:37] 선택자를 이용한 필터링 효과 / [42:44] filter메소드 추가 후 인자 구성 / [44:35] jquery객체를 이용해서 선택이 제거되는 필터링 / [45:07] 특정글자를 포함하지 않는 엘리먼트가 게거되는 구성 / [46:36] 인자값은 jq객체 / [48:07] html요소 객체 이용 / [49:30] 인자값은 엘리먼트 요소 / [50:45] 함수로 호출해서 filter메소드를 활용하는 부분 구성 / [52:00] return값에 따라 달라지는 결과값 / [53:42] css추가 / [55:43] not메소드 살펴보기 / [57:52] 반대로 적용되는 선택필터링 사용 / [59:05] 자손을 기반으로 하는 선택 제한 방법 / [59:30] 함수 구성 / [60:07] 선택되는 인자만 선택되도록 구성 / [60:42] has메소드를 이용해서 선언 / [61:22] src주소값 선언 / [62:29] jq객체를 이용해 선언 / [63:45] jq요소 객체 추가 / [64:41] 엘리먼트 선택의 매핑과정 / [66:26] map메소드 이용 / [67:45] css메소드 추가 / [69:00] return값 입력 / [69:25] children메소드 / [71:29] is메소드 설명 / [71:56] 선택항목을 수정과 복원할 수 있는 메소드 / [72:55] end메소드, andSelf메소드 / [73:45] end메소드 살펴보기 / [74:42] label값에 이용되는 first메소드 값 / [75:10] end메소드 이용 / [76:24] 이전 선택 항목에 적용 / [77:38] andSelf메소드 적용 / [78:00] children메소드를 이용해 구성 / [79:45] 이전 선택 항목을 현재 선택 항목에 추가 / [80:45] 하위계층 구조로 이동하는 메소드 / [81:29] children메소드 / [81:54] content메소드 / [82:15] find메소드 / [83:40] find메소드에 사용할 수 있는 인자 / [84:11] find메소드를 활용한 script구문 / [84:45] filter메소드와 not메소드를 이용해서 선택되는 값 제한 / [86:11] 선택 확장의 개념인 find메소드 사용 / [88:45] 상위계층 구조로 이동하는 메소드 / [89:44] closest메소드 / [90:30] offsetParent메소드 / [91:15] parent메소드 / [94:30] 부모가 아닌 조상을 선택할 때는 parents메소드 사용 / [95:38] parentUntil메소드 / [96:25] offsetParent로 실습 진행 / [97:15] 함수 구성 / [98:15] oblock이라는 id값에 위치 속성값을 지정할 수 있는 스타일 지정 / [98:53] position값에 fixed속성값 지정 / [00:03] jquery코드 script작성 / [01:46] offsetParent메소드 적용 / [02:19] css메소드 속성값 입력 / [03:49] dcell, drow값 / [05:00] 수평적으로 이동, 선택할 수 있는 메소드 / [06:14] next메소드 / [06:46] prev메소드 / [07:30] sibling메소드 / [09:50] 이전과 다음 선택값을 모두 사용 / [10:13] sibling, next, prev메소드 사용의 주의점 / [10:48] html문서를 변경하는 도움조작 방법 / [11:24] 새로운 엘리먼트 생성 방법 / [12:41] body부분 변경된 것 확인 / [13:24] 달러 함수를 이용한 엘리먼트 생성 방법 / [15:30] div태그 만들고 class선언 / [15:58] 이미지 링크 주소 입력 / [17:10] 콘솔창에 나타나도록 구성 / [19:25] children메소드 추가 / [19:52] 엘리먼트 요소의 tagName과 주소 / [21:44] 기존 엘리먼트 복제를 통해 새 엘리먼트 만들기 / [22:18] clone메소드 사용 / [25:18] 값 입력에 따라 복제 / [25:41] 돔 API를 통해 엘리먼트 생성하기 / [27:33] div태그에 해당하는 요소 / [28:18] 클래스 선언 / [29:22] 새로운 이미지를 생성할 수 있는 변수 선언 / [30:41] 2개의 엘리먼트 요소 생성 완료 / [31:03] 자식 엘리먼트 생성 / [31:33] appendChild메소드 사용 / [32:07] 달러함수로 넘겨주는 이유 / [33:22] 구성이 되었는제 console창에서 확인

16 엘리먼트의 DOM 조작

엘리먼트 생성 후 문서에 어떻게 삽입할수 있는지 자식 및 자손 엘리먼트를 만들어보고 wrap메소드 사용방법에 대해 알아봅니다.

1시간 44분

책갈피 : [00:09] 엘리먼트 문서에 삽입하는 방법 / [00:37] 자식엘리먼트와 자손엘리먼트를 삽입할 수 있는 메소드 / [00:59] append메소드 / [01:26] prepend메소드 / [02:15] appendTo메소드, prependTo메소드 / [03:15] append와 prepend의 인자를 함수로 사용 가능 / [04:13] wrapInner메소드 / [05:15] append메소드를 사용해 삽입하기 / [05:39] 새 엘리먼트 구성 / [07:09] 달러 함수 부분 구성 / [08:41] img부분 선언 / [10:00] label for에 대한 부분 구성 / [10:54] input name에 대한 부분 구성 / [12:11] newElem요소값에 css추가 / [13:52] append메소드를 이용한 엘리먼트 삽입부분 살펴보기 / [15:05] prepend메소드를 사용해 삽입하기 / [17:48] add메소드 이용해 엘리먼트가 삽입될 수 있도록 구성 / [18:37] 두번째 행에도 엘리먼트 추가 / [20:02] 저장 후 결과 확인 / [21:07] 각기 다른 위치에 엘리먼트 삽입하는 방법 / [22:11] add메소드를 사용하지 않을 경우 / [23:56] row2는 prepend속성 / [26:18] clone메소드 이용 / [28:56] appendTo메소드를 사용했을 경우 / [30:51] 새로운 엘리먼트 생성 / [32:00] row1부분 append메소드에 추가 / [33:19] 이미지가 하나의 div태그로 나타나는 것 확인 / [34:15] 함수를 이용해 엘리먼트 삽입하기 / [35:45] css속성 따로 적용하기 / [37:21] 함수 선언 / [38:22] 인자로 받는 값 index와 html부분 / [39:27] if문 이용해서 구성 / [41:06] 함수로 자식엘리먼트 삽입되는 것 확인 / [41:49] 부모, 조상엘리먼트의 삽입 방법 / [42:44] wrap메소드 / [43:21] wrapAll메소드 / [43:30] wrapInner메소드 / [45:37] 새 엘리먼트 구성 / [47:07] drow로 구성될 수 있도록 선언 / [50:07] wrapAll메소드를 사용할 경우 / [50:57] 메소드 사용시 주의점 / [52:51] wrapInner메소드를 사용할 경우 / [54:51] wrapInner메소드를 사용하는 이유 / [55:51] this변수를 이용해서 엘리먼트 설정하기 / [56:22] 행에대한 부분 선언 / [56:37] wrap메소드 값의 함수 선언 / [57:15] 조건문을 이용한 구성 / [59:13] css메소드 호출 / [60:00] 결과 화면 확인 / [61:00] 형제엘리먼트 추가하는 방법 / [61:15] after메소드 / [61:29] before메소드 / [61:58] insertAfter, insertBefore메소드 / [62:45] after와 before메소드 이용 / [64:08] append메소드로 img, label, input name값 불러오기 / [66:25] add메소드 사용 / [68:29] 저장 결과 확인 / [70:00] 기능은 같지만 객체와 인자사이의 관계를 반대로 작성 / [71:39] insertAfter값만 적용 후 확인 / [72:26] insertBefore값 적용 후 확인 / [72:45] 함수를 이용한 엘리먼트 생성, 삽입 방법 / [73:45] after메소드를 이용해 구성하는 방법 / [74:29] 인자값 조건 구성 / [75:40] css메소드 호출해서 구성 / [76:00] index값이 0일 때와 1일 때 / [78:09] 엘리먼트를 대체하는 방법 / [78:39] replaceWith메소드 / [78:45] replaceAll메소드 / [79:42] 동작방식은 동일하지만 인자의 역할은 반대 / [79:57] replaceWith메소드 구성 / [81:00] 새 엘리먼트 생성을 표시하기 위헤 css적용 / [81:54] row1에 children메소드 호출 / [82:44] 결과 확인 / [83:23] replaceAll메소드를 사용한 대체 / [83:56] 변경되려는 이미지 선언 / [84:29] replaceAll메소드 호출 / [85:00] 저장 확인 / [85:45] 함수를 이용해 replaceWith메소드는 어떻게 동적엘리먼트를 대체하는지 알아보기 / [86:30] this변수값만 이용해서 엘리먼트 대체하기 / [87:39] 엘리먼트 순서값에 대해 조건을 만들 수 있게 구성 / [88:00] indexOf값 / [91:00] 값이 복제될 수 있도록 clone메소드 사용 / [92:30] 엘리먼트를 복제하지 않으면 해당 엘리먼트 제거 / [93:00] 엘리먼트 제거하는 방법 / [93:43] detach메소드 / [93:56] empty메소드 / [94:00] remove메소드 / [94:30] unwrap메소드 / [94:57] remove메소드를 이용해 엘리먼트 제거하기 / [96:30] remove메소드의 인자값 / [98:26] detach메소드 사용하기 / [99:59] 데이터가 보존되기 때문에 이미지는 확인 / [00:54] empty메소드 사용하기 / [02:19] unwrap메소드 사용하기

17 어트리뷰트의 속성과 활용과 함수를 활용한 클래스

제이쿼리 객체의 엘리먼트의 값을 설정하는 방법과 관련 메소드, 클래스 메소드에서 함수를 사용하여 추가 및 제거를 할수 있는 방법을 알아봅니다.

2시간 0분

책갈피 : [00:06] 엘리먼트 조작방법 / [00:12] 어트리뷰트의 속성과 활용 / [00:49] attr메소드 / [02:15] img엘리먼트를 선택하고 attr메소드를 사용해서 주소값 나타내기 / [04:46] console창 나타내기 / [06:15] 어트리뷰트 값에 value값으로 선언 / [06:54] 이미지값 부분을 함수로 표현 / [07:46] 결과 확인 / [08:41] 단일부분으로 구성이 됐을 경우 / [09:16] srcvalue값 선언 / [10:39] img값에 src에대한 어트리뷰트 값을 변경하는 작업 / [11:05] 여러 어트리뷰트 값을 설정해서 사용 / [11:39] 속성값은 어트리뷰트의 값으로 설정 / [12:01] 맵 객체를 만들기 위한 구성 / [12:54] 객체에 적용되는 이미지 주소값과 스타일, 속성값 지정 / [14:35] attr메소드 적용 / [16:03] 어트리뷰트 값 동적으로 설정하기 / [17:02] 이미지 엘리먼트 선언 / [18:07] 조건문 사용 / [19:15] this변수 적용 / [21:00] 문자열을 반환시켜주도록 구성 / [23:15] 어트리뷰트값을 제거하는 제어 메소드 / [23:41] removeAttr메소드 / [24:56] style속성 적용 / [25:48] removeAttr메소드 적용해서 구성하기 / [28:07] 설정값을 제거하는 기능 / [28:21] 적용된 속성 활용 / [29:11] prop메소드 / [30:17] 속성값을 변경하거나 제거하는 작업 / [31:11] console.log선언 / [31:48] prop메소드 선언 / [32:37] 결과 확인 / [34:30] 클래스를 제어, 관리하는 메소드 / [35:00] addclass메소드 / [35:20] hasclass메소드 / [36:45] removeclass메소드 / [37:07] toggleclass메소드 / [38:14] img선언 후 addclass메소드 호출 / [39:22] removeclass메소드 호출 / [40:07] 짝수 값에 새로운 클래스 추가 / [43:13] 새로고침해서 결과 값 확인 / [44:21] 개별적으로 적용 되었는지 확인 / [44:52] 함수 이용 / [45:45] 구성해준 부분에 확인되어야 할 요소 / [46:22] hasclass선언 / [47:37] 참, 거짓에 대한 여부 확인 / [49:07] 함수를 활용한 클래스 관리 방법 / [50:00] img에 대한 엘리먼트 구성 / [50:50] 새롭게 추가할 클래스 구성 / [52:52] 속성값 style에 추가를해 클래스가 만들어졌는지 확인 / [53:43] border값 지정 / [55:57] 함수를 이용한 클래스 제거 / [56:51] img엘리먼트 구성 / [57:22] addclass로 class추가 / [59:00] removeclass메소드를 이용해서 제거 / [59:52] 조건 지정 / [60:19] this변수를 사용해 구성 / [62:07] 결과 확인 / [64:00] 클래스 toggle살펴보기 / [66:00] filter메소드를 이용해 짝수와 홀수 구성 / [67:00] toggle버튼 구성 / [67:30] appendTo메소드를 가져와서 buttonDiv에 추가 / [69:09] doToggle이라는 함수 만들기 / [70:25] toggleclass선언 / [71:30] toggle적용된 것 확인 / [72:27] toggle버튼을 눌렀을 때 속성값을 나오게한 이유 / [74:00] 모든 클래스 적용 / [74:30] 속성값이 다중 toggle로 확인 / [76:00] toggleclass의 적용되는 인자 삭제 / [77:00] label에 대한 부분 추가 / [78:11] style적용 / [79:15] 결과 확인 / [80:25] false값과 true값 구성 / [82:45] 2개의 버튼 사용 / [83:45] doToggle함수 구성 / [84:40] 엘리먼트 라벨값까지 추가 / [87:45] 저장 후 결과 확인 / [89:45] 동적으로 toggle될 수 있도록 만들기 / [90:30] addclass 사용 / [91:40] toggle버튼 생성 / [92:41] click이벤트 함수에 대한 구성 / [95:26] 반환값을 지정하는 이유 / [95:45] 결과 확인 / [97:58] css메소드를 이용해서 속성값 설정하고 적용하기 / [98:42] label의 text값 조절 / [99:30] css메소드 적용 / [01:40] 맵 객체를 사용하면 단일속성이 아닌 다중속성값으로 적용 / [02:36] 저장된 값을 확인하기 위해 console.log선언 / [04:15] console창에 font size속성값 확인 / [04:46] 첫번째 요소값으로 적용되는 이유 확인 / [07:26] 다중적으로 css를 적용하고 사용하는 방법 / [08:43] css메소드 뒤에 css메소드 추가 / [10:07] 맵 객체를 지정해주기 위해 새로운 변수 선언 / [10:48] 영역 안에 속성 적용 / [12:18] 콜론 사용 / [13:26] css메소드는 상대값도 적용해서 구성 / [14:15] 엘리먼트 요소에 홀수값과 짝수값 적용 / [15:33] 숫자단위에서만 상대값 적용하는 것 확인 / [15:48] css메소드의 인자로 함수 적용하기 / [17:00] border값 구성 / [17:37] 조건문 사용 / [18:07] return값 구성 / [19:10] 결과 확인

18 기본 어트리뷰트를 활용한 css활용과 제이쿼리의 이벤트 객체의 활용

css편의메소드를 이용하여 css속성을 사용하는 방법과 제이쿼리의 이벤트 지원 기능에 대해서 살펴보고 이벤트가 일어날때의 특정 메소드 활용 방법에 대해서 알아봅니다.

1시간 23분

책갈피 : [00:59] 특정 속성을 가지고 있는 메소드로 css제어 / [01:21] position메소드 / [02:07] img엘리먼트 선언 / [02:38] 변수값을 반환하는 대화창 구성 / [03:44] 적용 / [04:00] 첫번째 이미지 위치 확인 / [05:00] 함수를 이용해 구성 / [05:54] 첫번째 행에대한 이미지값으로 구성 / [06:41] height메소드 적용 / [07:15] return값 / [09:39] 엘리먼트의 내용을 제어하는 메소드 / [10:28] html메소드-문서에 대한 내용 출력하는 메소드 / [11:11] dcell클래스를 출력하도록 구성 / [13:20] 동적으로 엘리먼트 구성 설정하기 / [14:07] label엘리먼트 선언 / [14:31] css메소드, text메소드 호출 / [15:52] return값 / [17:41] form엘리먼트 구성 / [19:33] each메소드 선언 / [20:52] 저장 후 결과 확인 / [22:03] val메소드에 값을 인자로 추가하는 부분 구성 / [22:45] button생성 / [23:17] appendTo메소드 선언 / [24:15] setValues함수 선언 / [24:56] val메소드 인자값 / [26:18] val메소드값에 함수 적용해서 동적으로 설정하기 / [27:15] function에 index, currentVal값 선언 / [27:33] return값 / [29:06] 조회, 삭제하는 방법 / [29:22] each메소드에 function값으로 데이터 설정 / [30:45] siblings메소드에 input name구성 / [32:34] filtef메소드 추가 / [33:07] console창 만들기 / [33:57] 데이터 삭제부분 구성 / [35:22] console창이 나타날 때 filter메소드를 사용하는 이유 / [35:59] jquery에 이벤트 활용 / [36:58] bind메소드 / [38:22] one메소드 / [39:12] unbind메소드 / [41:00] bind메소드를 활용해서 이벤트 핸들러 함수 등록 구성 / [41:37] mouseover부분 추가 / [42:05] mouseout부분 추가 / [43:04] handleMouseOver함수 선언 / [44:19] handleMouseOut함수 선언 / [46:05] jquery에 이벤트 객체 살펴보기 / [46:52] 이벤트 객체의 멤버속성과 메소드 살펴보기 / [48:52] 한 핸들러에서 여러 이벤트타입을 처리하는 방법 / [50:22] bind메소드 호출 / [51:00] handleMouse부분 이벤트로 구성 / [52:00] cssdata만들기 / [53:07] event.type이 mouseout일 경우 / [54:37] css메소드를 호출해서 cssdata값 적용 / [55:45] 맵객체식으로 이벤트 추가 / [59:42] 데이터 값에 의해 이벤트 적용 / [60:37] img엘리먼트 값의 홀수값과 짝수값 선언 / [61:22] bind메소드 / [62:15] handleMouse이벤트 처리 / [62:45] cssdata값 구성 / [63:52] mouseout과 mouseover의 조건 구성 / [65:28] 저장 후 결과 확인 / [67:00] button구성부분 확인 / [67:45] button:submit선언 / [69:45] preventDefault를 사용해서 기본동작을 차단하는 이유 / [70:15] bind메소드를 사용해서 기본동작을 차단하는 핸들러 / [71:15] unbind메소드 / [72:28] mouseover와 mouseout이벤트 추가 / [72:57] cssdata선언 / [73:45] this변수값 선언 / [74:30] unbind메소드를 사용해서 이벤트 삭제 / [75:15] 인자 없이 unbind메소드 호출 / [75:54] 특정 이벤트가 적용되지 않게 구성 / [77:00] unbind인자값에 이벤트 입력 / [77:58] 이벤트 핸들러 함수내에서 등록을 해지하는 방법 / [78:45] mouseover와 mouseout구성 / [79:30] handledCount 변수 선언 / [79:57] 이벤트 함수 선언 / [81:08] out에대한 이벤트가 일어날 때 handledCount값 증가 / [82:00] 결과 확인

19 이벤트 핸들러 자동등록방법과 제이쿼리조작기능을 활용한 문서작성

live메소드를 활용해 이벤트 핸들러를 자동으로 등록하는 방법과 DOM조작방법과 이벤트처리기능을 활용해서 문서를 구성하는 방법에 대해서 알아봅니다.

1시간 28분

책갈피 : [00:08] 이벤트 핸들러를 자동으로 등록하는 메소드 / [00:30] img엘리먼트 구성 / [01:03] mouseover구성 / [01:40] mouseout구성 / [02:28] 새로운 엘리먼트 구성 / [03:00] append메소드 사용 / [05:39] 이벤트 핸들러를 자동으로 추가할 수 있는 live메소드 사용 / [06:43] live메소드들에 대해 살펴보기 / [07:00] live메소드 / [07:30] die메소드 / [08:01] delegate메소드 / [08:13] undelegate메소드 / [10:16] die메소드 사용의 중요점 / [11:20] 저장 결과 확인 / [12:00] live메소드의 문제점 / [12:52] delegate메소드의 장점 / [13:28] delegate메소드를 사용해서 구성 / [15:01] 엘리먼트 추가 / [15:45] 첫번째 행에는 delegate메소드를 사용해서 이벤트 적용 / [16:22] 이벤트 핸들러를 수동으로 호출하는 메소드 / [16:56] trigger메소드 / [18:02] 이벤트 추가를 위해 bind메소드 선언 / [19:03] 버튼을 생성해서 trigger메소드가 호출되도록 구성 / [19:56] button의 이벤트 추가 / [21:22] 선택자 지정 / [21:55] trigger메소드 선언 / [23:52] trigger메소드에 이벤트 인자에대한 객체를 사용할 경우 / [24:15] 호출에 대한 부분 구성 / [25:21] row2를 선택할 때 row1도 선택되는 것 처럼 이벤트 적용 / [28:07] triggerHandler메소드 / [29:41] triggerHandler메소드를 추가할 경우 / [32:36] 단축에대한 부분 구성 / [33:20] mouseover선언 / [34:15] bind메소드를 호출하지 않더라도 이벤트 사용 / [34:49] 단축메소드는 trigger메소드를 대신하는 용도로 사용 가능 / [36:13] trigger메소드를 사용하기 위해 button생성 / [38:30] 문서 이벤트를 구성하는 메소드 / [39:00] load메소드, ready메소드, unload메소드 / [39:52] 브라우저 이벤트의 단축메소드 / [40:14] error메소드, resize메소드, scroll메소드 / [40:45] 마우스 이벤트 / [40:59] 폼에 관련된 메소드 / [41:21] 키보드 이벤트 / [42:07] hover메소드 적용 구성 / [42:52] 이벤트 핸들러 구성 / [44:45] 메소드 조합을 이용해 페이지 만들기 / [45:42] 행을 추가해서 엘리먼트 요소 추가하는 작업 / [46:14] 변수 선언 / [46:37] 이름을 배열로 선언 / [47:15] 새로운 행값에 대한 변수 선언 / [47:52] div태그에 id값 row3으로 선언 / [49:22] appendTo메소드 사용 / [50:00] 엘리먼트 추가 / [50:21] fTemplate변수 선언 / [51:29] template안에 들어갈 요소 for문 사용해서 삽입 / [53:20] filter메소드의 img값 / [54:44] 확장자 선언 / [55:27] filter메소드의 label값 / [56:07] label값의 형식 보기 / [56:52] filter메소드의 input값 / [58:05] 저장 후 결과 확인 / [58:58] 버튼을 사용해 이미지 변경하기 / [59:22] 왼쪽 버튼과 오른쪽 버튼 추가 / [60:30] prependTo사용해 form속성에 추가 / [60:52] style은 맵객체로 구성 / [62:45] 이미지값에 이벤트 추가 / [63:45] 이미지에 속성 지정 / [65:44] 버튼을 추가한 이유 / [66:09] row2와 row3 숨기기 / [66:45] hide메소드 사용 / [67:15] 버튼에 이벤트 핸들러 만들기 / [68:09] 이벤트 함수 선언 / [69:30] 이벤트 인자값 처리 / [70:45] oblock부분 구성 / [72:00] form값에 적용되는 이벤트 / [72:55] 이벤트 함수 추가 / [73:30] 변수 선언 / [75:41] targetRowIndex값 선언 / [76:08] left값 조건 만들기 / [77:54] right값 조건 만들기 / [79:15] fadeOut메소드 호출해서 구성 / [80:30] fadeIn메소드 호출 / [81:15] total count할 수 있는 부분 추가 / [81:44] 버튼 선택자 추가 / [82:58] clear:both속성 이용 / [84:39] 버튼을 눌렀을 때 total items이 계산이되는 부분 만들기 / [85:30] change메소드에 이벤트 인자를 받아서 사용 / [86:46] 값을 받아 처리하는 부분 / [87:17] 결과 확인

20 데이터 템플릿의 활용

제이쿼리 플러그인을 이용해 데이터 템플릿을 활용하는 방법을 알아봅니다.

1시간 43분

책갈피 : [00:09] 템플릿 라이브러리를 이용해 간단한 엘리먼트 구성 방법 / [00:56] 라이브러리 다운 / [01:23] css구성 살펴보기 / [01:52] 템플릿에대한 엘리먼트 구성 / [03:07] 엘리먼트를 추가하기 위한 데이터 만들기 / [04:24] 6개의 영역 선언 / [06:30] 엘리먼트 요소 추가 / [06:56] 템플릿 부분 선언 / [07:40] tmpl메소드 사용 / [08:37] 선언된 템플릿 구성 만들기 / [09:11] script선언 / [10:28] div태그값 형식 보기 / [11:26] 치환값 만들기 / [13:39] input name에 재고량과 가격에대한 부분 지정 / [14:37] 데이터명 지정하고 선택자 지정 / [15:13] 결과 확인 / [15:54] row2 추가 / [16:26] slice메소드 추가 / [18:03] 한줄로 나왔던 부분이 두줄로 나오는 것 확인 / [18:52] templResult변수 선언 / [20:40] 결과값 지정할 때 메소드 선언 / [21:03] template변수 선언 / [22:00] 호출된 tmpl메소드의 값 / [22:36] row2에 추가되는 부분 동일하게 작업 / [23:37] 재고량을 표현식으로 만들기 / [25:45] stocklevel값 변경 / [26:11] 저장 후 결과 확인 / [27:48] 템플릿에 사용되는 변수 알아보기 / [28:30] $data변수 / $item변수 / $ / [30:48] 표현식을 함수로 구성해서 만들기 / [31:22] stockDisplay함수 선언 / [32:52] value값의 표현식 부분이 변경 / [34:15] $data변수 사용 / [35:45] 달러함수를 사용해서 엘리먼트 제어하는 부분 구성 / [36:37] 달러함수 값을 h2태그에 추가 / [38:37] insertAfter메소드 이용해서 h1뒤에 선언될 수 있도록 설정 / [38:57] css메소드 호출해서 style지정 / [39:51] $item변수 사용 / [40:52] options변수 선언 / [43:04] options값 적용 / [43:45] 할인률에 데이터 값을 전달받기 위해 $item변수 사용 / [46:22] input템플릿 추가 생성 / [46:45] script를 생성해서 템플릿 구성 / [47:58] 중첩 템플릿 / [49:49] 배열로 선언된 data값을 템플릿으로 선언 / [50:22] 배열객체로 선언 / [50:52] 행별로 구성 / [55:30] row템플릿 구성 / [57:15] 데이터부분을 중첩템플릿으로 선언 / [59:34] div.drow값 삭제 / [60:45] rowTmpl적용을 위해 선언 / [61:45] 문서내에 포함되어야될 영역을 dtable에 추가 / [63:43] 저장 후 결과 확인 / [64:26] 데이터를 추출해서 적용하는 방법 / [66:40] 데이터 구조를 변경하는 작업 / [67:24] 엘리먼트 구성 수 설정 / [67:30] 다음행으로 넘어가는 배열 선언 / [68:30] 반복문 for문 선언 / [69:45] slicedData변수 사용 / [70:15] push메소드 호출 / [71:54] originalData로 인덱스가 위치하는 부분 만들기 / [73:15] drow값 삭제하고 템플릿 요소 적용 / [73:58] 결과 확인 / [75:23] if태그를 사용해 동적으로 템플릿 구성 / [77:27] 재고량이 0인 부분은 보이지 않도록 만들기 / [77:45] flowerTmpl에 if태그 삽입 / [78:10] stocklevel값이 0보다 클때만 보여지게 설정 / [79:44] 결과 확인 / [80:15] else태그까지 사용해서 재고량부분 구성 / [81:15] 재고값이 없는 값은 style을 따로 지정 / [82:00] span태그 추가 / [82:42] 저장 확인 / [83:10] 재고량이 일정 수 이상이거나 이하일 때 부분 작업 / [85:28] 확인 / [86:13] 태그값을 이용해서 엘리먼트로 선언했던 배열항목 제어 방법 / [86:45] each태그 사용 방법 / [87:45] each태그 적용될 범위 만들기 / [88:56] stockDisplay함수 선언 / [89:27] return값 선언 / [90:55] each태그 안에서 개별속성 참조 / [92:57] input태그 name구성 / [94:11] 결과 확인 / [95:15] each태그를 선언할 때 인자로 사용할 수 있는 변수 미리 선언 / [96:14] each태그를 활용해서 목록을 필터링하는 효과 / [96:55] filterLowStock함수 구성 / [97:45] 결과값으로 나타낼 수 있는 배열 선언 / [98:42] for문 사용 / [99:15] if조건문 / [00:13] return값 설정 / [00:48] filterLowStock함수명을 each태그에 선언 / [01:04] 결과 확인

샘플확인 : 알지오 검색후 -> 강의검색란 -> jquery [실무]