알지오 평생교육원

로그인|회원가입|고객센터
HOME>IT전문가>Javascript / jQuery>jquery mobile & UI

jquery mobile & UI

jquery mobile & UI
20회차 속성과정
전체 : 20시간 3분|회차당 평균 : 1시간 0분8초

이용기간 2개월

전문강사 : 채명수

300,000185,000





jquery mobile & UI 사용법 강좌
모바일 웹페이지 제작을 좀더 쉽게 하기 위한 프레임워크로, 다른 플랫폼들은 자바스크립트 같은 선수학습과정이 필요하지만 jquery mobile은 html5 css3의 기본 지식만으로 쉽게 웹사이트를 만들수 있습니다.
  • jQuery Mobile 기본 (입문)
  • 01.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추가

  • 02.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

  • jQuery Mobile UI (제작)
  • 03.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

  • 04.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

  • 05.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
  • 06.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

  • 07.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 메소드

  • 08.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] 탭, 아코디언 위젯 결합

  • 09.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

  • 10.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] 에러수정

  • 11.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

  • 12.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] 세번째인자-버튼

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

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

    책갈피 : [00:09] 프로그레스바 위젯/[05:11] 프로그레스바 이벤트/[12:14] appendTo/[19:43] if, else문 생성/[26:28] progressbar구현/[32:14] button/[44:40] 프로그레스바의 활용

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

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

    책갈피 : [00:07] 버튼위젯/[04:38] HTML구성-input/[10:30] 적용값확인/[16:55] input요소의 아이콘/[23:22] $("#alzioButton1").buttonset/[30:44] #refresh 버튼/[37:19] source : 문자열

  • 15.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

  • 16.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 삭제

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

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

    책갈피 : [00:25] 드롭 이벤트/[06:56] empty()/[13:27] droppable, draggable 적용/[17:57] 드래그&드롭 게임/[25:03] droppable, draggable 적용/[29:35] containment: "#maze"/[34:06] 드래그요소 div 재생성

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

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

    책갈피 : [00:12] resize/[07:45] handles 옵션가능값/[14:48] p 요소 추가/[20:17] HTML구성/[25:24] ghost 옵션/[30:56] stop: NewSize/[36:56] 탭위젯과 결합

  • 19.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

  • 20.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호