jquery mobile & UI 강의 추천 리뷰

알지오 평생교육원 jquery mobile & UI 강좌입니다.

전문가들이 뽑은 꼭 배워야하는 실무활용 강의

그동안 찾던 jquery mobile & UI 강좌의 완전판 !

여러분의 마지막 강의가 되어드리겠습니다.

알지오에서는 PC와 스마트폰, 태블릿을 이용해서 언제, 어디서나 공부를 할 수 있습니다.

열심히 공부해서jquery mobile & UI 강좌를 마스터해보세요.

<jquery mobile & UI 강좌 샘플동영상>

<jquery mobile & UI 강좌 리뷰>

제이쿼리 모바일 & UI 강좌 듣고 있는데 강의를 들어보니까 너무 좋아서 추천해 드릴려고요.

알지오를 알기 전부터 온라인 강좌만 들어서 강의 진짜 여러 군데 들어봤는데 

알지오만한데가 없어서 추천드려요

혼자 했을 때 너무 진도 나가지 않아서 어떻게 해야 하나 고민만 했었어요.

알지오강의 덕분에 큰 문제 없이 프로젝트를 끝낼 수 있었네요

제가 시간적으로 여유가 없어서 학원 강의를 듣지 못하니까 

온라인 강의 효율적인 걸로 골라듣는데

알지오강의는 스마트 폰으로도 수강할 수 있어서 이동할 때 듣기 너무 좋더라구요~

정말 잘 선택했다는 기분이 듭니다.

jquery mobile & UI 강좌 정보입니다. 추천 인터넷 강의 : 알지오

jquery강의,jquery강좌,jquery교육,jquery학원,jquery인강,jquery인터넷강의,jquery인터넷강좌,jquery동영상,jquery동영상강의,jquery동영상강좌,jquery배우기,jquery사용법,jquery사용방법,jquerymobile강의,jquerymobile강좌,jquerymobile교육,jquerymobile학원,jquerymobile인강,jquerymobile인터넷강의,jquerymobile인터넷강좌,jquerymobile동영상,jquerymobile동영상강의,jquerymobile동영상강좌,jquerymobile배우기,jquerymobile사용법,jquerymobile사용방법,jqueryUI강의,jqueryUI강좌,jqueryUI교육,jqueryUI학원,jqueryUI인강,jqueryUI인터넷강의,jqueryUI인터넷강좌,jqueryUI동영상,jqueryUI동영상강의,jqueryUI동영상강좌,jqueryUI배우기,jqueryUI사용법,jqueryUI사용방법,제이쿼리강의,제이쿼리강좌,제이쿼리교육,제이쿼리학원,제이쿼리인강,제이쿼리인터넷강의,제이쿼리인터넷강좌,제이쿼리동영상,제이쿼리동영상강의,제이쿼리동영상강좌,제이쿼리배우기,제이쿼리사용법,제이쿼리사용방법

• jQuery Mobile 기본 (입문)
• 01.1시간 7분 jQuery Mobile시작, 페이지구성, 전환효과, jQuery Button

  jQuery Mobile을 사용하기 위한 준비/기본 페이지 구성/애니메이션 효과/data-theme/data-corners/data-icon/data-mini/data-role

  책갈피 : [00:04] 강의 목적/[00:59] DOCTYPE 선언/[01:38] 제이쿼리다운/[02:38] css파일 가져오기/[03:20] css Link 방법/[04:37] jquery 가져오기/[05:03] jquery.mobile 가져오기/[05:37] 출력화면/[05:54] meta name="viewport"/[06:23] initial-scale=1/[07:11] jquery 파일/[08:03] div추가/[08:14] footer추가/[09:15] 출력화면/[10:22] 짜여진 태그 정리/[11:20] header h2태그/[12:26] 생략기호 출력/[13:15] content p태그/[14:07] p태그 기본설정/[14:35] footer h2태그/[14:56] id="two"추가/[15:55] content a태그/[16:11] div id="one" 생성/[17:27] 출력화면/[18:04] 주소값으로 확인/[18:34] title/[19:33] date-title 추가/[21:26] 주석처리/[21:35] 내부링크 YES/[21:48] 출력화면/[22:10] 내부링크 NO/[22:48] 출력화면/[23:03] rel/[24:15] dialog/[25:17] 닫기버튼/[25:48] date-transition="slide"/[26:14] date-transition="turn"/[26:34] 전환효과 참고/[27:34] 외부링크/[28:34] 내부링크/[29:06] date-ajax/[30:23] 3D 페이지로딩/[31:25] 애니메이션 효과 참고/[31:42] jQuery_Mobile이란?/[32:24] color기본값/[32:54] data-theme/[33:14] data-theme="c"/[33:35] data-theme="e"/[34:31] a요소 추가/[34:48] 버튼출력값/[36:23] data-icon/[36:28] css연동파일/[38:16] background-image/[38:58] css 배열바꾸기/[39:32] data-corners/[39:49] data-corners="false"/[40:43] data-icon="star"/[41:17] controlgroup 추가/[41:48] data-iconpos/[42:36] data-role="button"/[43:18] data-iconpos 밸류값/[44:37] data-theme 수정/[44:59] 버튼사이즈 정의/[45:23] data-liline="true"/[45:47] data-icon="alzio"/[47:01] ui-icon-minus/[47:15] 내아이콘 출력사항/[48:19] ui-icon-alzio/[48:39] background-color/[50:23] 아이콘 그림자/[50:50] data-iconshadow/[51:33] 그림자 출력사항/[51:51] data-theme 추가/[54:43] controlgroup 세로출력/[55:23] data-theme 추가/[55:36] data-type="horizontal"/[56:07] ul, li 추가/[56:45] li data-icon="minus"/[57:24] span, class추가/[57:29] ul-li-count/[59:31] data-mini/[01:01:43] input추가/[01:02:26] input data-mini/[01:03:09] placeholder/[01:03:37] input type="search"/[01:04:51] textarea추가/[01:05:08] select추가/[01:05:58] data-role="slider"

• 02.1시간 16분 select, checkbox, radio, data-role

  셀렉트 박스, 체크 박스, 라디오 버튼, footer, navbar, listview, dialog, collapsible, content

  책갈피 : [00:44] data-native-menu/[01:03] select 추가/[01:17] data-native-menu="false"/[01:43] option 추가/[02:20] data-theme="a"/[02:38] data-overlay-theme/[03:45] multiple="multiple"/[04:45] select 추가/[05:28] div, select 추가/[05:47] data-role="controlgroup"/[06:38] data-type="horizontal"/[07:26] data-inline="true"/[08:12] input type="range"/[08:48] 출력값확인/[09:07] data-track-theme/[09:58] input type="checkbox"/[10:31] label/[10:47] input과 label 연결/[11:10] checkbox 추가/[11:38] data-role="controlgroup"/[12:25] data-type="horizontal"/[13:02] input type="radio"/[14:28] collapsible/[14:59] collapsible-set/[15:31] data-role="collapsible-set"/[16:14] data-collapsed="false"/[17:44] h1 -> p로 수정/[18:10] data-content-theme/[18:53] data-theme/[20:37] data-role="header"/[21:06] 출력값확인/[21:19] h6 삭제/[22:55] data-role="footer"/[23:49] h1 삭제/[24:53] data-role="controlgroup"/[25:35] 출력값확인/[26:01] data-role="navbar"/[27:10] ul, li 생성/[27:57] ul, li, a 생성/[29:04] li 5개 생성/[29:47] li 1개 생성/[30:19] 출력값확인/[31:12] div, h1, a 생성/[31:36] class="ui-btn-right"/[32:02] 내부 div추가/[32:56] data-role="footer"변경/[33:25] data-icon 추가/[33:53] data-iconpos 추가/[35:07] div 생성/[35:41] data-position="fixed"/[36:07] 실습14/[36:17] data-role="footer"/[37:25] data-role="navbar"/[37:59] data-thema="b"/[38:27] BR태그 추가/[39:49] 실습15/[40:22] data-role="listview"/[41:22] data-role="list-divider"/[41:59] 789코멘트/[42:28] p class="ui-li-aside"/[43:31] 실습16/[44:15] img추가/[44:32] h1추가/[45:29] p추가/[47:19] a추가/[47:58] data-role="dialog"/[49:30] data-icon="home"/[49:37] data-split-icon="home"/[49:55] li추가/[50:20] 실습17/[50:53] div class="ui-grid-a"/[52:41] div class="ui-block-b"/[54:29] div class="ui-bar"/[55:16] div class="ui-bar ui-bar-b"/[56:37] div style/[57:48] div class="ui-block-c"/[58:23] div class="ui-block-d"/[59:31] div class="ui-block-e"/[01:00:05] 실습18/[01:01:05] span 추가/[01:01:28] padding 미적용/[01:02:21] position:relative/[01:03:00] div class="ui-bar ui-grid-b"/[01:04:51] 실습19/[01:05:07] data-role="collapsible"/[01:05:38] div data-role="collapsible"/[01:06:31] 내부 div data-role="collapsible"/[01:07:05] 실습20/[01:07:29] ol 변경/[01:07:53] 실습22/[01:08:37] div data-role="content"/[01:10:08] li확장/[01:10:43] 실습23/[01:11:37] data-inset/[01:12:17] 실습25/[01:12:34] 실습26/[01:13:04] 실습27/[01:13:45] img class="ui-li-icon"

• jQuery Mobile UI (제작)
• 03.1시간 45분 제이쿼리모바일을 이용한 페이지 실무제작, 커스텀 테마

  실무에서 사용될 수 있는 모바일 페이지 제작, 나만의 스타일로 커스터마이징하는 방법, 제이쿼리의 기본 속성과 커스텀 속성을 사용한 새로운 작업

  책갈피 : [00:25] css파일/[01:15] div추가/[02:00] div id="A_header"/[03:13] h1, ul추가/[04:04] #A_header/[05:26] #A_header h1/[06:27] #A_header h1 a/[07:58] #A_nav/[09:00] #A_nav li/[10:36] #A_nav li a/[11:16] #A_nav li a span/[12:38] 아이콘 생성/[13:07] #A_nav li.nav1/[14:09] width:50px/[15:01] h2추가/[15:29] #A_min1/[17:04] div data-role="content"/[17:33] ul data-role="listview"/[18:18] .A_listview/[20:07] .A_listview li/[22:35] .A_listview li img/[23:57] a data-role="button"/[25:02] border-bottom/[25:57] 적용된 css사항/[27:13] main.css파일/[27:38] .ui-body-c/[30:42] css 중복적용/[31:43] .ui-link/[33:30] div class="ui-content"/[33:48] .ui-content/[35:01] .ui-listview/[36:29] 로딩이미지출력/[37:15] .ui-icon-loading/[37:51] ALZIO소스/[38:13] script 추가/[38:59] 로딩이미지의 위치/[39:32] data-transition/[40:44] div data-role="page"/[41:23] jquery.sil.css/[42:03] body/[42:16] data-theme="f"/[42:45] .ui-body-f/[43:25] div class="ui-body-f"/[43:53] .ui-bar-f.Aheader/[44:32] div class="ui-body-f Aheader"/[45:33] .Alogo/[45:40] @media screen and/[46:32] .ui-mobile/[47:08] .ui-page/[49:06] ui-body-f Aheader/[50:10] a href="#"/[50:38] div data-role="content"/[51:04] .ui-content/[50:49] img class="main-image"/[51:51] .main-image/[52:48] ul data-role="listview"/[53:27] .ui-content/[53:37] .ui-btn:nth-child(2n+1)/[54:18] .ui-li .ui-btn-text/[54:34] .ui-li .ui-icon/[55:14] .ui-icon-arrow-r/[55:52] border-radius/[56:22] 주석처리/[57:12] border-radius 제거/[57:51] .ui-btn-hover-f a.ui-link-inherit/[59:44] .ui-listview/[01:01:03] .ui-li/[01:02:57] css 614줄/[01:03:24] .ui-btn/[01:04:28] .ui-li>.ui-btn-inner/[01:04:55] padding-right:40px/[01:05:39] .ui-btn-inner/[01:06:18] border-top/[01:07:13] .ui-li .ui-btn-text/[01:07:34] .ui-btn-text/[01:08:33] .ui-li-has-arrow/[01:09:51] .ui-btn-up-f/[01:10:00] .ui-btn-icon-left/[01:10:38] .ui-icon-shadow/[01:12:13] div data-role="page"/[01:12:17] header 추가/[01:12:32] header/[01:13:49] .logo/[01:14:51] div data-role="navbar"/[01:15:58] div data-role="content"/[01:16:45] ul data-role="listview"/[01:17:15] #AListView li/[01:18:22] data-filter="true"/[01:18:32] li추가/[01:19:03] top검색/[01:20:07] .ui-btn-icon-left .ui-btn-inner .ui-icon/[01:20:18] top: 45%;/[01:21:17] a href="log.html"/[01:22:04] Login팝업/[01:23:30] div class="amainA"/[01:23:52] img, div추가/[01:24:47] .amainA/[01:25:36] background:-webkit-linear-gradient/[01:26:49] ui-body-c/[01:27:40] .amainA img/[01:27:56] div class="amainAright"/[01:27:59] .amainAright/[01:29:32] .amainA span/[01:29:36] .amainA span.a1/[01:29:55] .amainA span.a2/[01:30:18] a1~4 비교/[01:34:31] div class="maincon"/[01:34:37] .maincon/[01:35:23] .maincon a.alzioqr/[01:36:27] .maincon a/[01:37:04] float: left;/[01:37:30] .maincon a span/[01:38:06] position: absolute/[01:39:54] .line_up/[01:40:32] style="right:1px;"/[01:41:00] .line_left/[01:41:49] .line_across/[01:42:35] .line_right/[01:42:56] .line_down

• 04.1시간 5분 HTML5를 응용한 페이지 실습, 모바일 페이지 실무제작 & CSS튜닝

  HTML5, CSS를 응용한 갤러리 제작, 제이쿼리 모바일을 이용한 페이지 제작, CSS오버라이딩으로 출력 결과물을 바꾸는 실습

  책갈피 : [00:24] div id="con"/[00:37] #con/[00:53] div data-role="content"/[01:11] div class="aont"/[02:04] 적용값확인/[03:37] text-shadow: none/[04:07] ul data-role="listview"/[04:49] class="ui-li-icon"/[05:31] .ui-content .ui-listview-inset/[06:43] .ui-listview/[07:10] .ui-shadow/[07:56] .ui-page/[08:33] footer, navbar/[09:12] .ui-page .ui-footer/[10:22] .ui-bar-a/[11:04] .ui-grid-d/[11:46] 갤러리제작/[12:11] class="ui-btn-active"/[12:58] section class="gallery"/[13:40] 적용값확인/[15:09] .gallery article a.inner/[16:45] .gallery article/[17:28] @media screen and/[18:47] .ui-body-c/[20:32] .ui-lnk/[21:18] .gallery article img/[22:02] show1/[23:21] div data-role="content"/[23:45] 적용값확인/[24:05] .ui-bar-a/[25:38] show1~4/[26:35] .ui-header/[27:16] h1적용내용/[28:21] si6.html/[28:46] header/[29:14] navbar/[29:37] 내부navbar/[30:00] footer/[31:10] .alzio li .ui-btn/[31:20] .alzio li a/[32:05] .alzio li.ui-block-a a/[32:28] .alzio li.ui-block-b a/[32:56] .alzio li a:hover/[33:36] .alzio li a span/[33:56] ul.white/[34:27] ul.white li a/[36:08] ul.white li a span/[36:44] ul.white li.qr/[37:27] .ui-footer p/[37:58] .ui-navbar/[38:45] .ui-navbar ul/[38:56] .ui-btn/[39:10] .ui-grid/[42:51] si7.html/[43:44] controlgroup/[44:25] listview/[45:22] button/[46:37] .ui-header/[46:52] .ui-bar-a/[47:27] .ui-icon/[47:48] .ui-btn-inner/[49:48] .ui-corner-tl/[50:56] .ui-btn/[52:27] .ui-content .ui-listview/[53:18] .ui-bar-a/[54:32] .ui-content/[55:08] .ui-body-c .ui-link/[55:41] .ui-li-heading/[56:13] .ui-li-thumb/[56:59] .ui-li-has-thumb/[57:39] .ui-controlgroup-horizontal/[58:20] .ui-controlgroup .ui-btn-inner/[59:08] .onn.ui-btn-up-c/[01:00:03] .ui-li-desc/[01:00:51] #footer/[01:01:11] #footer a/[01:01:48] #footer.ui-footer .ui-title/[01:03:17] .ui-corner-all/[01:04:37] background:#99ffff

• 05.1시간 28분 페이지 실무제작 & CSS튜닝

  제이쿼리 기본속성을 이용한 모바일 페이지 제작, 새로운 테마 생성, header, select, search, listview 꾸미기

  책갈피 : [00:13] si8.html 구조/[00:39] data-theme='d'/[00:52] data-inset='true'/[01:06] 적용값확인/[01:28] list-divider/[02:21] .ui-bar-b/[03:48] .ui-body-d .ui-link/[04:34] .ui-icon/[05:21] .ui-btn-up-c/[06:16] .ui-li/[07:12] .ui-btn-icon-left/[08:02] .ui-icon-shadow/[11:00] .ui-icon-loading/[12:01] h1 추가/[13:08] si8-2.html 구조/[13:29] data-iconpos="notext"/[14:06] 적용값확인/[15:00] .imagelo img/[15:25] .titlef/[15:34] .previous/[16:28] .slidetitle/[17:35] .next a/[18:05] .linebox/[19:27] .ui-body-d/[21:12] si8-3.html 구조/[21:59] 적용값확인/[22:36] data-theme="s"/[23:03] 적용값확인/[23:35] class="header"/[24:36] class="icons poa~c"/[25:16] class="alzioviewlist"/[26:06] 적용값확인/[26:24] h1/[27:19] .header/[28:24] .ui-shadow/[29:06] .ui-btn-corner-all/[30:00] .header .ui-btn-inner/[31:38] .header .ui-btn-right/[32:06] .mcontent h1/[32:55] .ui-body-s, .ui-btn-up-s/[33:20] .ui-body-s/[34:24] .ui-btn/[35:03] .icons/[35:32] .header .logo, .logo:hover/[36:16] .header .logo .ui-btn-inner/[36:41] .poa ~c/[37:42] text-shadow:none/[39:17] .title/[39:57] .alzioviewlist .ui-li/[40:27] position:static/[41:31] imgview img/[41:53] .ui-li-desc/[42:28] .alzioviewlist .ui-icon/[43:43] .ui-header/[44:24] displat: inline-block/[45:26] ui-btn-inner/[47:10] 기본적용상황/[48:03] div id="hader000"/[48:24] #hader000/[48:54] data-role="header"/[49:30] #headerbg/[49:36] border/[51:02] #top-right/[51:28] #top-right a/[52:14] 적용값확인/[53:18] .ui-header/[53:58] .ui-header h1/[54:12] p/[54:59] select on/[55:50] .selectwa/[57:06] input/[57:32] #minbox/[58:34] #minbox h4/[58:46] #minbox p/[59:13] h3/[01:00:08] .ui-btn/[01:00:49] .ui-content .ui-listview/[01:01:27] .ui-li/[01:01:53] .ui-corner/[01:02:40] .ui-link-inherit:before/[01:03:43] .continue-button .ui-btn/[01:05:01] .ui-btn-up-c/[01:05:51] .ui-content/[01:06:08] .ui-footer/[01:06:54] .ui-footer p/[01:07:12] #linbut/[01:08:13] #linbut a:hover/[01:09:10] #link1/[01:09:40] #link2~3/[01:10:42] #footab, #footac/[01:11:13] #copy, #copy a/[01:14:03] 라이브러리 파일/[01:14:56] .ui-bar-a/[01:14:12] .ui-body-c/[01:15:29] .ui-mobile a img/[01:16:00] .ui-content/[01:17:53] .ui-select/[01:18:40] .ui-btn-block/[01:20:02] Search/[01:20:23] continue-button/[01:24:27] Listview/[01:25:56] .ui-listview-inset/[01:27:36] 진행상황

• jQuery UI
• 06.1시간 14분 jQuery UI 정의, 테마 오버라이딩, 포지션 유틸리티

  jQuery UI 소개, 라이브러리 다운, CSS프레임워크, 적용된 테마를 쉽고 빠르게 변경하는 방법, 포지션 유틸리티의 사용법

  책갈피 : [00:10] jQuery란?/[01:14] jQuery UI란?/[02:21] jQuery UI 홈페이지/[02:48] Download/[04:25] 데모&도큐멘테이션/[04:42] Themes/[06:06] 폴더 구조/[06:52] js폴더/[07:34] development-bundle/[08:14] index.html/[09:35] 준비사항/[09:49] alzio0.html/[10:50] 제이쿼리 라이브러리/[11:17] 제이쿼리UI 라이브러리/[11:54] 구글 라이브러리사용방법/[12:47] 구글 라이브러리/[15:16] div 추가/[15:52] class명 확인/[16:47] 적용 값 확인/[17:04] CSS 링크/[17:51] 적용 값 확인/[18:48] CSS 프레임워크 적용/[19:15] ui-widget 삭제/[19:42] ui-widget-header 삭제/[20:32] .ui-widget-header/[20:55] .ui-widget-header 삭제/[22:38] .ui-widget-content/[23:00] .ui-widget-content 삭제/[23:53] div 추가/[25:11] css링크 삭제/[26:29] .ui-corner-all/[27:13] .ui-corner-all 삭제/[28:04] .ui-state-active/[28:33] .ui-state-active 삭제/[29:01] .ui-state-active a/[29:49] .ui-state-default/[30:14] .ui-state-default a/[31:54] script 선언/[32:05] hover효과/[34:20] 제이쿼리 라이브러리 추가/[34:39] 적용 값 확인/[35:46] 아이콘추가/[36:28] 적용 값 확인/[37:02] .ui-icon/[37:37] .ui-icon-circle-plus/[38:25] 아이콘 이미지/[38:57] .ui-icon-help/[39:44] 지난강의내용/[41:29] jQuery공식사이트/[41:50] Theme 변경/[42:38] Trontastic테마/[43:10] css파일추가/[43:51] custom2 적용/[46:11] CSS오버라이딩/[46:18] alzioOverrides.css파일/[46:42] alzioOverrides 적용/[47:59] .ui-widget/[48:42] .ui-corner-all/[49:33] .ui-state-default/[50:17] border/[50:56] .ui-state-active/[51:55] .ui-state-active a/[52:26] .ui-icon/[53:08] .ui-state-hover/[54:26] 적용 값 확인/[55:37] 오버라이딩파일 위치/[56:02] alzio1.html/[56:16] position 유틸리티/[56:57] position 옵션/[57:53] div 추가/[58:33] .alzio1~2/[59:29] 적용 값 확인/[01:01:00] $(".alzio2").position/[01:02:14] of: ".alzio1"/[01:04:27] my, at/[01:05:31] right/[01:05:46] right bottom/[01:07:15] my: "right top"/[01:07:55] my:"right", at: "left"/[01:08:20] 적용 값 확인/[01:10:36] collision/[01:11:08] collision:"none"/[01:11:30] collision:"fit"/[01:12:24] offset

• 07.1시간 11분 탭 위젯

  기본 탭 위젯을 구현하는 방법, 탭 환경설정 옵션, 탭 이벤트, 탭 메소드

  책갈피 : [00:41] tab 위젯/[01:42] css, 라이브러리 파일/[02:46] div id="alzioTab"/[02:52] HTML구조/[04:51] li요소의 사용/[05:36] div요소의 사용/[06:44] 적용 값 확인/[07:09] $("#alzioTab")/[07:26] tabs 메소드/[08:07] 적용 값 확인/[09:13] 탭 환경설정 옵션/[09:59] 옵션 사용 방법/[10:15] selected: 1/[11:35] 적용 값 확인/[12:29] selected: null/[13:14] 변수 사용/[14:34] 적용 값 확인/[15:51] disabled: [1]/[16:23] 적용 값 확인/[17:21] disabled: [0]/[18:35] selected: 1 추가/[19:12] 적용 값 확인/[19:57] fx/[20:41] 첫번째 인자/[21:38] 두번째 인자/[22:23] 적용 값 확인/[22:47] null값 추가/[24:23] 적용 값 확인/[25:02] height 수정/[25:23] width/[25:43] collapsible/[27:37] collapsible: true/[28:10] 적용 값 확인/[29:16] event/[29:46] event: "mouseover"/[30:30] 적용 값 확인/[31:11] event: "click"/[31:30] event: "dbclick"/[31:54] event: "mouseup"/[33:52] 탭 이벤트/[35:21] $("#alzioTab").tabs/[35:34] select이벤트/[36:43] 변수 eventSelect/[37:19] select 설명/[38:03] p태그삽입/[38:19] appendTo/[39:00] fadeOut/[40:09] text/[40:17] tab.index/[41:17] class: "message"/[41:42] .message/[42:20] 적용 값 확인/[43:15] 수식과 문자열 관계/[44:01] event 옵션/[45:40] show이벤트/[46:23] 적용 값 확인/[46:55] alzio3.html/[47:14] 탭 메소드/[48:12] disabled 옵션/[48:56] button 추가/[49:24] $("#enable").click/[49:37] enable/[51:00] enable 설명/[51:33] 적용 값 확인/[51:50] $("#disable").click/[52:51] disable/[54:12] 적용 값 확인/[53:36] 주석처리/[53:56] input, button 추가/[54:12] 적용 값 확인/[54:28] $("#add").click/[54:55] add/[55:11] 첫번째 인자/[55:37] 두번째 인자/[56:01] 적용 값 확인/[56:26] 세번째 인자/[57:04] 적용 값 확인/[57:37] $("#remove").click/[57:52] remove메소드/[58:04] parseInt($("#index").val())/[59:30] val()/[01:00:16] parseInt/[01:01:06] 적용 값 확인/[01:02:41] select 메소드/[01:02:58] 적용 값 확인/[01:04:17] $("#alzioTab").tabs("length")-1/[01:04:48] length 메소드/[01:06:14] select 메소드 실습/[01:07:33] rotate 메소드/[01:09:17] 적용 값 확인/[01:10:13] destroy 메소드/[01:10:45] 적용 값 확인

• 08.1시간 13분 탭 위젯, 아코디언 위젯

  탭 메소드, 아코디언 위젯, 아코디언 옵션, 아코디언 이벤트, 아코디언 메소드

  책갈피 : [00:16] option메소드/[01:14] 메소드 성격/[02:09] option 인자값/[02:39] button추가/[03:07] option의 getting/[03:33] 적용 값 확인/[04:05] $("button").click/[04:29] p 내부 text/[04:49] ("option", "selected")/[07:07] class: "message"/[07:27] .message/[07:42] 적용 값 확인/[08:39] label, input, button 추가/[09:12] option의 setting/[10:15] 두번째 인자값/[11:18] parseInt/[11:40] 적용 값 확인/[12:20] disabled/[13:08] 두번째 인자값 수정/[14:24] Ajax탭/[15:16] 적용 값 확인/[15:38] tab.txt/[16:35] select 추가/[17:01] $("#select").change/[17:36] url 메소드/[18:42] 두번째 인자값/[19:39] tab2.txt/[19:52] 적용 값 확인/[21:24] load 메소드/[22:05] 적용 값 확인/[22:26] 아코디언 위젯/[23:57] html구조/[25:12] 컨텐트 요소변경/[26:18] div id="alzioAccordion"/[27:02] accordion메소드/[28:21] 아코디언 옵션/[29:11] event 옵션/[30:28] active 옵션/[32:57] active: false/[34:06] collapsible옵션/[36:49] autoHeight/[37:11] ALZIO3 수정/[37:20] 기본Accordion구현/[37:59] autoHeight: true/[39:24] fillSpace/[40:09] div id="ALL"/[40:54] fillSpace: false/[42:44] animated/[43:29] animated: false/[43:56] 적용 값 확인/[44:41] animated: "bounceslide"/[45:16] 제이쿼리 라이브러리/[45:34] jquery.effects.core/[47:12] easeOutCirc/[47:33] easeInBounce/[48:12] 아코디언 이벤트/[49:40] 코드 작성/[49:50] change 이벤트/[50:25] ui 객체/[51:34] div text/[53:45] ui.newHeader/[54:07] insertAfter/[54:44] fadeOut/[56:00] changestart 이벤트/[57:03] 아코디언 메소드/[59:09] label, input, button 추가/[59:49] $("#activate").click/[01:00:37] activate 메소드/[01:01:09] val()/[01:01:23] parseInt/[01:01:50] 적용 값 확인/[01:03:09] resize/[01:03:17] alzio6.html/[01:04:10] 적용 값 확인/[01:04:31] 코드 작성/[01:04:53] changestart/[01:05:12] if문/[01:07:20] accordion.txt/[01:07:45] data/[01:08:00] 적용 값 확인/[01:08:43] change 이벤트 추가/[01:09:06] resize 메소드/[01:10:11] 적용 값 확인/[01:11:14] 탭, 아코디언 위젯 결합/[01:11:35] 적용 값 확인/[01:12:12] accordion, tabs/[01:12:36] 적용 값 확인

• 09.1시간 14분 대화상자 위젯, 동적 대화상자 제작

  대화상자 옵션, 대화상자 이벤트, 대화상자 메소드, 실무에서 사용할 수 있는 동적 대화상자를 제작

  책갈피 : [00:05] 대화상자(Dialog) 위젯/[01:16] 대화상자 마크업/[01:53] 적용 값 확인/[02:22] dialog/[03:03] title 역할/[03:36] 이동가능/[03:54] 크기조절가능/[04:52] 대화상자 옵션/[06:20] autoOpen: false/[07:39] 기본 대화상자 생성/[08:11] position 옵션/[09:50] 적용 값 확인/[10:28] position: (100, 100)/[10:53] position: (200, 200)/[11:04] title옵션/[11:50] title: "알지오"/[12:29] title: a요소 출력/[13:10] modal옵션/[14:15] modal: true/[15:18] 아코디언 위젯 추가/[15:37] 적용 값 확인/[16:09] dialog, accordion 구현/[16:55] modal 적용/[18:26] buttons 옵션/[19:16] buttons 인자값 입력/[20:06] 적용 값 확인/[21:29] buttons 복수 지정/[22:26] close메소드 추가/[23:19] 적용 값 확인/[24:08] show, hide 옵션/[24:59] 적용 값 확인/[26:06] 애니메이션 종류 예/[26:25] explode, highlight/[27:00] 적용 값 확인/[28:37] width, height 옵션/[29:54] minWidth, minHeight 옵션/[30:58] maxWidth, maxHeight 옵션/[31:24] 적용 값 확인/[32:34] 대화상자 추가/[33:16] 적용 값 확인/[34:21] stack옵션/[35:04] 적용 값 확인/[36:16] 대화상자 이벤트/[36:47] 기본 대화상자적용/[37:04] div id="massage"/[38:05] 적용 값 확인/[39:15] open이벤트/[39:52] children(":last")/[40:38] 적용 값 확인/[41:37] close이벤트/[42:20] 적용 값 확인/[42:51] beforeclose이벤트/[43:41] 콜백함수 입력/[45:04] if조건문/[45:23] width()>300/[45:50] return false/[46:13] 적용 값 확인/[47:45] 대화상자 메소드/[48:39] button 추가/[49:58] autoOpen: false/[50:41] $("#button").click/[50:59] if조건문/[51:14] else문/[53:31] isOpen메소드/[54:01] 적용 값 확인/[54:34] 설문조사 대화상자/[55:30] p, label, input 추가/[55:59] 적용 값 확인/[56:48] buttons옵션 추가/[57:32] var option1/[57:44] var answer/[01:00:10] dialog("close")/[01:00:23] var option2/[01:00:51] 적용 값 확인/[01:01:27] value="알지오" 수정/[01:03:02] alzioAccordion 추가/[01:03:07] 적용 값 확인/[01:03:36] accordion위젯/[01:04:05] alzio9.html/[01:04:17] 동적 대화상자 제작/[01:05:01] html 구조/[01:05:23] 적용 값 확인/[01:06:32] css프레임워크 적용/[01:07:52] css커스터마이징/[01:08:40] #ALL/[01:09:17] .page/[01:10:27] .page img/[01:10:51] .page h3/[01:11:17] #ALL .page p/[01:12:01] #ALL .ui-widget-header

• 10.1시간 14분 동적 대화상자 제작, 슬라이더 위젯, RGB컬러 슬라이더

  동적 대화상자 제작을 위한 코드 작성, 슬라이더 위젯, 슬라이더 메소드, 실무에서 사용할 수 있는 컬러 슬라이더를 구현

  책갈피 : [00:29] dialog 위젯 구현/[00:48] 적용 값 확인/[01:09] width, height 옵션 설정/[01:27] modal: true/[01:42] autoOpen: false/[02:33] click이벤트/[02:52] preventDefault/[03:28] fileName, titleText/[04:45] dialog("open")/[06:08] open이벤트/[06:26] empty()/[06:51] img 생성/[07:39] dialog("option", "title", titleText)/[09:20] 적용 값 확인/[10:49] 슬러이더 위젯/[12:31] HTML 마크업/[13:01] slider 구현/[13:31] a요소 자동생성/[15:07] 슬라이더 옵션/[15:56] orientation옵션/[17:41] min, max 옵션/[19:57] value 옵션/[21:04] step 옵션기본설정/[21:34] step: 50/[23:04] animate 옵션/[24:40] animate: "slow"/[24:53] animate: 3000/[25:48] values 옵션/[26:40] values 옵션값추가/[27:47] range 옵션/[28:16] range: "min"/[28:52] range: "max"/[29:13] 복수핸들일때의 range/[30:21] 슬라이더 이벤트/[31:39] 이벤트의 순서/[33:22] 기본 슬라이더 구현/[33:26] change이벤트/[34:26] div생성/[35:42] 적용 값 확인/[36:25] css커스터마이징/[36:54] #alzioSlider/[37:06] #percent/[38:45] left: e.pageX - 35/[39:16] 적용 값 확인/[39:51] start이벤트/[40:31] fadeOut()/[41:06] stop이벤트/[42:03] 슬라이더 메소드/[42:22] value, values 옵션/[43:31] button 추가/[43:50] $("#set1").click()/[44:19] var max/[44:36] slider("option", "max")/[45:52] slider("value", max)/[46:40] 적용 값 확인/[47:29] button 추가/[47:54] 복수핸들설정/[48:19] $(".button").click()/[48:54] if조건문/[49:56] else문/[50:07] 적용 값 확인/[51:39] 주석처리/[52:55] Slider, Tab HTML 추가/[53:31] tabs, slider 메소드구현/[54:08] style="width:270px"/[54:50] min, max 옵션/[55:20] 적용 값 확인/[55:59] slide 이벤트/[56:13] tabs("select", ui.value)/[57:03] 적용 값 확인/[57:34] select 이벤트/[57:55] slider("value", ui.index)/[58:30] 적용 값 확인/[59:12] alzio11.html/[59:45] 이번실습완성본/[01:00:19] HTML구성/[01:01:26] 프레임워크 클래스/[01:02:02] 적용 값 확인/[01:02:22] $("#R, #G, #B").slider()/[01:02:37] css커스터마이징/[01:03:06] #ALL/[01:03:55] #ALL label/[01:04:29] .ui-slider/[01:05:12] #colorShow/[01:05:58] #ALL #RGBcolorLabel/[01:06:10] #RGBcolor/[01:06:37] min,max,value 옵션설정/[01:07:46] 적용 값 확인/[01:08:06] slide 이벤트/[01:08:28] var r, g, b/[01:09:08] var rgbText/[01:10:26] $("#colorShow").css/[01:11:01] background-color값 사용예/[01:11:29] $("#RGBcolor").val/[01:12:58] 에러수정/[01:13:11] 적용 값 확인

• 11.46분 데이트 픽커 위젯

  데이트 픽커 위젯에 대해 알아보고, 환경 설정 옵션에 대해 실습합니다.

  책갈피 : [00:06] 데이트픽커 위젯/[00:38] 데이트픽커 출력/[01:32] 데이트픽커 구성/[02:21] HTML 구성/[02:53] 적용값확인/[03:17] $("#alzioDate").datepicker()/[04:20] 키보드이동/[05:21] 데이트픽커 옵션/[05:57] appendText/[06:29] 적용값확인/[07:13] defaultDate/[08:55] defaultDate 적용가능값/[10:34] defaultDate 복수값/[11:06] showOtherMonths: true/[11:57] showOtherMonths: false/[12:09] minDate/[13:40] maxDate/[14:45] changeMonth/[15:06] changeYear/[17:20] yearRange/[19:20] showButtonPanel/[20:37] closeText/[22:19] showOn/[24:09] buttonText/[24:54] buttonImage/[27:15] buttonImageOnly/[29:11] duration/[30:21] showAnim/[31:25] showAnim 적용가능값/[31:58] showAnim: "explode" /[32:33] numberOfMonths/[34:31] numberOfMonths: 2/[35:20] stepMonths/[36:36] showCurrentAtPos/[39:31] dateFormat/[39:59] 날짜 포맷 참조/[40:35] yy mm dd/[41:19] y m d/[41:56] y m d DD/[42:19] yy년 mm월 dd일/[43:11] yy 'y' mm 'y' dd 'y'/[44:29] 미리 정의된 날짜 포맷/[44:49] $.datepicker.ATOM

• 12.40분 데이트픽커 위젯 이벤트, 메소드

  데이트 픽커 위젯에 대한 이벤트와 메소드를 실습을 통해 학습합니다.

  책갈피 : [00:07] alzio12.html/[01:04] showButtonPanel/[02:08] nextText, prevText/[03:18] nextText, prevText 삭제/[03:39] monthNames/[04:51] monthNames 값입력/[05:58] 적용값확인/[06:44] monthNamesShort/[07:42] monthNamesShort 지정이유/[08:44] dayNamesMin/[09:15] 적용값확인/[09:55] dayNamesMin 값수정/[10:31] dayNames, dayNamesShort/[11:27] dateFormat/[11:55] 적용값확인/[12:23] yy/mm/dd - M/D/[13:23] firstDay/[14:17] firstDay: 1/[14:57] isRTL: true/[15:24] 데이트픽커 이벤트/[16:15] onSelect/[17:46] 적용값확인/[18:23] beforeShow/[18:59] select 추가/[19:23] 적용값확인/[20:00] jquery-ui-i18n.js/[21:46] var lang/[22:20] $.datepicker.setDefaults/[23:53] 괄호추가/[24:06] 적용값확인/[25:52] 데이트픽커 메소드/[27:07] button 추가/[27:33] $("button").click/[27:48] setDate 메소드/[28:14] 적용값확인/[29:54] "setDate", "+1m +1d"/[30:38] "setDate", "10/27/2012"/[31:26] "setDate", "2012/10/27"/[32:50] $("#alzioDate").focus/[33:11] dialog 메소드/[34:32] 첫번째인자-초기값/[35:59] 두번째인자-콜백함수/[36:15] function selectDate/[37:14] 적용값확인/[38:15] 세번째인자-버튼/[39:43] 네번째인자-위치

• 13.45분 프로그레스바 위젯, 실용 프로그레스바 제작

  프로그레스바에 대해 알아보고, 사용자와 상호작용하는 프로그레스바를 제작합니다.

  책갈피 : [00:09] 프로그레스바 위젯/[00:56] alzio14.html/[01:10] HTML 구성/[01:26] ("#alzioProgressbar").progressbar/[03:09] 프로그레스바 옵션/[04:09] value 옵션/[05:11] 프로그레스바 이벤트/[05:53] button추가/[06:34] $("#up").click/[06:52] var currentValue/[07:34] var newValue/[07:57] ("option", "value", newValue)/[08:41] 적용값확인/[10:20] change 이벤트/[10:32] var val/[10:53] if문 생성/[12:14] appendTo/[12:25] 적용값확인/[13:21] else문 생성/[13:50] 적용값확인/[15:33] 주석처리/[16:17] 프로그레스바 메소드/[16:42] var progress/[17:08] $("#up").click/[17:30] value 메소드의 사용/[18:43] ("value", newVal)/[19:24] 적용값확인/[19:43] if, else문 생성/[20:52] 실용 프로그레스바 제작/[21:20] 실습완성본/[21:56] HTML 구성/[22:51] fieldset/[25:01] 적용값확인/[25:31] ui-helper-hidden/[26:28] progressbar구현/[26:51] alzioprogress.css/[27:16] h1, h2 /[27:45] p/[28:50] form/[29:20] .form-container/[30:02] .page/[30:45] fieldset/[31:36] label, input, textarea/[32:14] button/[33:02] var pro, option/[33:22] change이벤트/[34:55] $("#next, #back").click/[35:04] $("button").attr/[35:41] if (this.id==="next")/[37:00] fadeOut()/[38:33] $("#back").attr/[39:05] 적용값확인/[39:40] if문 추가/[40:39] 적용값확인/[41:47] else문 추가/[42:35] prev().fadeIn/[43:33] 적용값확인/[44:40] 프로그레스바의 활용

• 14.42분 버튼 위젯, 자동완성 위젯

  버튼위젯에 대해 알아보고 나아가 자동완성 위젯을 구현해봅니다.

  책갈피 : [00:07] 버튼위젯/[01:24] HTML구성-a/[01:55] $("#alzioButton1").button/[03:28] HTML구성-button/[03:57] $("#alzioButton2").button/[04:38] HTML구성-input/[05:54] $("#alzioButton3").button/[06:01] 적용값확인/[08:27] 버튼 옵션/[09:07] label 옵션/[10:16] #alzioButton2, #alzioButton3 적용/[10:30] 적용값확인/[11:29] icons 옵션/[12:35] ui-icon 불러오기/[13:20] 적용값확인/[15:10] text 옵션/[15:51] #alzioButton2, #alzioButton3 적용/[16:55] input요소의 아이콘/[18:09] 버튼 이벤트/[19:16] create 이벤트/[20:21] "visibility", "hidden"/[21:55] buttonset /[22:37] checkbox 타입버튼/[23:22] $("#alzioButton1").buttonset/[25:02] 체크박스 속성 상속/[25:47] radio 타입버튼/[26:12] name="alzio"/[26:59] $("#alzioButton1,#alzioButton2").buttonset/[27:57] 버튼 메소드/[28:47] html요소추가/[29:20] 적용값확인/[29:40] buttonset 구현/[30:27] #ALL 버튼/[30:44] #refresh 버튼/[31:02] 적용값확인/[31:51] $("#alzioButtons").buttonset 삭제/[33:33] refresh 메소드추가/[33:55] 적용값확인/[34:15] 자동완성 위젯/[35:42] HTML구성/[36:14] $("#alzio").autocomplete/[36:47] 자동완성 옵션/[37:19] source : 문자열/[38:44] 적용값확인/[40:21] source : 배열객체

• 15.44분 자동완성 위젯, 드래그 인터렉션

  자동완성 위젯에 대해 자세히 알아보고, 드래그 인터렉션을 알아봅니다.

  책갈피 : [00:49] 자동완성 기본 구현/[01:19] minLength 옵션/[03:26] delay 옵션/[04:59] autoFocus 옵션/[06:07] position 옵션 /[06:47] my, at/[08:28] 적용값확인/[09:00] my, at 값변경/[09:30] 자동완성 이벤트/[10:12] 위젯 구현/[10:39] price 속성/[10:58] 적용값확인/[11:19] select 이벤트/[11:42] if, else문/[14:30] 적용값확인/[15:21] 드래그 기능/[17:53] HTML구성/[18:16] 적용값확인/[18:32] #alzioDrag/[19:41] $("#alzioDrag").draggable/[20:36] 드래그 옵션 /[21:31] cursor:move/[22:15] cursor 옵션/[22:47] 적용값확인/[24:03] axis 옵션/[24:58] distance 옵션/[25:58] distance: "500"/[26:34] cursorAt 옵션/[28:32] delay 옵션/[29:28] grid 옵션/[30:39] revert 옵션/[31:55] revertDuration 옵션/[33:38] div id="alzio" 추가/[34:03] #alzio/[34:52] handle 옵션/[36:26] alzio19.html/[37:32] #container/[38:09] containment 옵션/[39:46] div id="alzioDrag" 추가/[40:39] stop 옵션/[41:51] snapMode/[43:04] snapTolerance

• 16.44분 드래그 이벤트와 메소드, 드롭 인터렉션

  드래그 이벤트와 메소드에 대해 실습하고, 드롭 인터렉션을 알아봅니다.

  책갈피 : [00:10] 드래그 이벤트/[01:13] var option/[01:29] ui.helper/[02:10] helper요소/[03:05] addClass("up")/[03:39] .up/[03:58] 적용값확인/[04:39] div id="result"/[05:16] stop 이벤트/[05:51] var offset /[06:33] P생성/[07:50] 적용값확인/[09:06] 드롭/[09:51] html구성/[10:15] #alzioDrag, #alzioDrop/[10:34] 적용값확인/[10:54] draggable, droppable 메소드/[12:26] 드롭옵션/[12:57] 드래그요소 추가/[13:33] .alzioDrag/[14:37] accept 옵션/[15:11] accept: "#alzioDrag1"/[16:03] 적용값확인/[16:26] activeClass 옵션/[17:01] .active/[17:26] 적용값확인/[19:28] accept 옵션삭제/[20:55] accept: drag/[21:35] 삼항연산자/[23:19] 적용값확인/[24:10] 기본기능구현/[24:37] hoverClass 옵션/[25:52] .over/[26:54] tolerance 옵션/[27:30] tolerance 옵션값/[29:41] alzio21.html/[30:26] 실습완성작/[31:01] html구성/[32:02] #drop_a_container, #drop_b_container, #drag_a_container, #drag_b_container/[33:21] .drag_a, .drag_b/[33:57] .drag_b/[35:45] droppable, draggable 구현/[37:19] dropOption_a, dragOption_a 생성/[37:36] scope: "a"/[38:36] 적용값확인/[38:50] hoverClass: "over"/[40:33] scope: "b"/[41:17] 적용값확인/[42:53] dropOption_a 삭제/[43:18] 적용값확인

• 17.37분 드롭 이벤트, 드래그앤드롭 게임 제작

  드롭이벤트에 대해 알아보고, 드래그앤드롭 게임을 제작하며 완벽하게 이해합니다.

  책갈피 : [00:25] 드롭 이벤트/[01:05] HTML구성/[01:38] CSS정의/[02:07] 적용값확인/[02:30] droppable, draggable 적용/[02:57] accept: "#alzioDrag"/[03:21] 이벤트구현/[04:39] eventMessages 정의/[05:40] function Callback/[06:56] empty()/[07:11] 적용값확인/[08:44] drop 이벤트의 구현/[10:07] deactivate이벤트 삭제/[10:40] HTML구성/[11:54] CSS정의/[13:27] droppable, draggable 적용/[13:50] drop: Callback/[14:09] function Callback/[15:29] 적용값확인/[16:23] 이벤트 중복적용/[17:01] greedy: true/[17:57] 드래그&드롭 게임/[19:24] HTML구성/[20:48] alziodrag.css/[21:25] #maze/[21:55] #start, #end/[22:22] #drag/[23:25] .wall/[25:03] droppable, draggable 적용/[25:23] 적용값확인/[25:53] for (var x=1; x<47; x++)/[27:49] 생성될 벽 구조/[28:13] 적용값확인/[28:33] $(".wall").droppable/[29:35] containment: "#maze"/[30:30] endOption/[31:15] 적용값확인/[31:40] alert 생성/[32:26] wallOption/[33:03] over 이벤트/[33:36] 적용값확인/[34:06] 드래그요소 div 재생성/[35:05] 적용값확인/[35:39] left: 15

• 18.40분 resize 인터렉션, 크기 조절 기능

  크기를 조절할 수 있는 resize 기능에 대해 알아봅니다.

  책갈피 : [00:12] resize/[01:20] HTML구성/[01:42] CSS정의/[02:12] $("#resize").resizable/[05:03] .ui-resizable-xx/[05:58] 크기조절 옵션/[06:43] handles 옵션/[07:45] handles 옵션가능값/[09:32] 핸들이미지생성/[10:33] .ui-resizable-sw/[11:45] 적용값확인/[12:22] autoHide 옵션/[13:36] maxWidth, minWidth 옵션/[14:48] p 요소 추가/[15:53] overflow:hidden/[16:33] ghost 옵션/[17:28] background:#FFCC66/[18:24] helper 옵션/[19:14] .myhelper/[20:17] HTML구성/[21:03] 적용값확인/[21:51] aspectRatio 옵션/[23:00] aspectRatio:1/[23:33] animate 옵션/[25:24] ghost 옵션/[25:58] animateDuration 옵션/[26:32] img id="resize2"/[27:27] alsoResize 옵션/[28:01] 적용값확인/[28:18] img id="resize3"/[29:34] 크기조절 이벤트/[30:56] stop: NewSize/[31:20] function NewSize/[32:06] Math.round/[33:23] div생성/[34:27] 적용값확인/[35:12] $(".text").empty/[35:54] .text/[36:32] 적용값확인/[36:56] 탭위젯과 결합/[37:28] div id="alzioTab"/[38:05] #alzioTab/[39:13] autoHide, minHeight, minWidth

• 19.59분 select 인터렉션, 선택기능 이미지 뷰어

  아이템을 선택할 수 있는 select 기능에 대해 알아보고, 선택기능이 부여된 이미지 뷰어를 제작합니다.

  책갈피 : [00:10] 선택기능 /[01:28] HTML구성/[02:16] CSS정의/[02:31] selectable 메소드/[04:06] 자동생성 클래스/[04:54] .ui-selecting, .ui-selected/[07:01] 선택 기능 옵션/[07:24] filter 옵션/[08:15] select 클래스추가/[09:17] cancel 옵션/[10:31] 선택 기능 이벤트/[11:36] selected 이벤트/[13:08] 적용값확인/[13:57] unselected 이벤트/[14:47] 적용값확인/[16:04] start 이벤트/[16:47] if (!$("#tip").length)/[17:17] class/[18:36] fadeIn()/[18:45] 적용값확인/[19:48] stop 이벤트/[20:43] 적용값확인/[21:29] 선택 기능 메소드/[21:54] refresh 메소드/[22:36] HTML구성/[23:07] CSS정의/[23:43] $("#ALL").selectable/[24:03] 적용값확인/[24:16] $("#ALL div").draggable/[24:57] autoRefresh: false/[25:51] 적용값확인/[27:50] 선택기능 이미지뷰어/[29:20] HTML구성/[30:20] 적용값확인/[31:26] alzioselect.css/[31:43] #imageView /[32:16] #name/[33:41] #view/[34:44] #image/[35:17] #image img/[36:12] #image img.right /[36:39] #image img.ui-selected /[38:07] #tabs/[38:35] $("#image").selectable/[39:39] stop 이벤트/[40:36] 적용값확인/[40:56] 이미지 틀 재구성/[41:47] 적용값확인/[42:07] 선택방법정의/[43:33] function select1()/[44:29] 상단 name 재구성/[46:11] 뷰어이미지 재구성/[47:45] 적용값확인/[48:23] function select2()/[49:00] var tabList /[49:36] 탭 기본구성/[51:20] each 함수 설정/[52:29] var tabA/[54:06] var tabPanel/[54:32] 탭패널내부 뷰어이미지 구성/[56:05] $("#view").appendTo("#tabs"); /[56:29] $("#tabs").tabs/[57:54] 적용값확인

• 20.39분 sort 인터렉션, 정렬기능

  요소를 정렬시킬 수 있는 sort 기능에 대해 알아보고 실습합니다.

  책갈피 : [00:17] 정렬기능/[00:51] HTML구성/[01:30] 적용값확인/[01:43] CSS정의/[02:13] sortable 메소드/[03:52] 정렬기능 옵션/[04:16] axis 옵션/[05:17] containment 옵션/[05:32] div id="container"/[05:56] 적용값확인/[06:24] cursor 옵션/[07:19] distance 옵션/[08:52] items 옵션/[10:03] items: ".sort"/[11:31] items: ":not(.unsort)"/[12:03] 적용값확인/[12:16] span 추가/[13:10] #alzioSort span/[13:37] revert 옵션/[14:54] handle 옵션/[16:09] placeholder 옵션/[18:07] .place/[18:30] 적용값확인/[19:13] forcePlaceholderSize/[20:04] helper 옵션/[21:05] helper: helperOption/[22:23] 적용값확인/[22:53] alzio31.html/[23:02] 연결 리스트의 정렬/[23:26] HTML구성/[23:50] 적용값확인/[24:13] $("#alzioSort1, #alzioSort2").sortable/[25:08] connectWith 옵션/[26:20] 적용값확인/[26:54] connectWith: ("#alzioSort1")/[27:45] 정렬기능 이벤트/[28:59] start 이벤트/[29:38] 적용값확인/[30:14] stop 이벤트/[30:40] 적용값확인/[31:43] beforeStop, receive 이벤트/[33:07] var position/[33:15] var Message/[34:30] $("#text").remove()/[37:42] 적용값확인