* Mobile JQUERY *
- www.gseek.kr
1. html tag
<!doctype html> : 문서형식 지정. html5로 작성된 웹문서를 의미
utf-8 : 한글+영문+모든 언어 사용가능
<span> : 인라인 엘리먼트를 그룹으로 묶을 때 사용.
element 2종류 : 블럭레벨, 인라인레벨 엘리먼트
<article> : main content 영역을 article일 한다.
<fieldset> : n개의 filed(input)를 그룹으로 묶음
<legend> : fieldset에 그룹으로 묶은 라인에 lable을 넣는다.
<lable> : 시작장애인에게 lable내용을 읽어준다.
2. css
- * {..} : 모든 element에 css적용
hi { ...}
.css_nm {..}
#id {..}
#id li {...} : id 하위의 li만 적용 (#id는 부모, li:자식)
#id1 > #id2 {..} : id 2개의 상하 구조는 (> : 부등호)를 추가해야 됨
p + #id {..} : p elemet와 같은 level의 id의 css적용
header ~ p {..} : header와 같은 level의 모든 p tag의 css적용
#id li:nth-child(n) : id하위의 n번째 li 요소에 css적용
(#id li:first-child, #id li:last-child,
- padding : box(table)내부의 텍스트와의 간격
margin : box(table)외부와 다른 영역(텍스트, table등)과의 간격
- css. 속성
float : 화면 크기에 따라서 유동적으로 해당 객체가 이동됨
clear : float 속성을 제외(clear)시킨다.
display : 블럭레벨 엘리먼트를 옆으로 이동될 수 있도록 해준다.
반대로도 가능
display:none; display:hidden
. none : 객체의 위치가 아에 존재하지 않음
. hidden : 객체가 안보여지지만 해당위치는 찾이하고 있음
- position : 웹문서 안에 원하는 위치에 요소를 배치하기 위한 속성
1. static : 요소를 문서의 흐름대로 배치
2. relative : 요소를 상대적으로 배치
3. absolute : 문서의 흐름과는 상관 없이 배치
4. fixed : 지정한 위치에 고정해서 배치
3. 웹폰트
- 웹폰트 정의
. 예를 들어, 나눔고딕은 windows system font가 아니다.
그래서 html 작성시 나눔고딕 font를 적용하게 되면 일반 사용자들은 폰트가 깨진다.
이럴 경우 font-face를 이용해서 나눔고딕.ttf를 download받아 자동 설치 될 수 있도록 한다.
. 즉, 웹폰트라는건 웹상세 존재 하는 font를 download받아 내 pc에 설치 후 해당 html에 적용되어
웹site를 적용된 font를 기준으로 볼 수 있도록 해준다.
- @font-face{font-family:"나눔고딕"; src:url("./font/나눔고딕.ttf"); format("truetype"); }
4. javascript
- document.write("..") : document란, 현재 문서를 의미
- document.getElementByTagName("div")[0].firstChild.nodeValue
- var aa = document.getElementByTagName("div")[0];
aa.innerHTML = "good~~";
-
5. jQuery
- javascript보다 10~100배 정도 느리다.
- <script src="//code.jquery.com/jquery-latest.min.js"></script> : min이란 소스가 압축되었다는 뜻
- jQuery = $ : selector, 선택자
- $("*") : document문서 전체 element 얻기
- $('#id') = jQuery('#id') ; id에 대한 element 얻기
- $(".id") 또는 $(".id1, .id2") : class id에 대한 element 얻기
- $("span, #id1, .id2")
- $("[name=id1], [name=id2]") :
- $("[name^=d]"); : name이 d로 시작하는 element 얻기
- $("[name$=d]"); : name이 d로 끝나는 element 얻기
- $("[name*=d]"); : name이 d로 포함된(like) element 얻기
- $('[name~="id1"]'); : name이 id1이 아닌 element 얻기
6. Mobile jQuery
- 기본 event 1
var init = function() {...});
$(document).bind('mobileinit', init); : 제이쿼리 모바일이 초기화 될 수행
$(document).bind('pageinit', init); : 페이지가 초기활 될 경우 init 수행
$(document).read(init); : 모든 초기화가 완료된 경우 init수행
- event 2 (아래는 모두 동일 event)
var init = function() { $('#btn').tap(function() { ..... });
var init = function() { $('#btn').on(function() { ..... });
var init = function() { $('#btn').click(function() { ..... });
var init = function() { $('#btn').bind(function() { ..... });
$(document).bind('pageinit', init);
- 버튼text변경
. $('btn1').prop('value', '버튼명');
. $('btn1').attr('value', '버튼명');
. $('btn1').val('버튼명');
. $('btn1').text('버튼명');
. $('btn1').refresh(); //마지막에 refresh를 해줘야 됨
- 버튼 option변경
. $('btn1').button('option', 'iconpos', 'top');
- class
. <button class="...."></button>
. 버튼 clss종류 : ui-btn, ui-icon-heart, ui-btn-icon-notext, ui-btn-inline, ui-shadow, ui-corner-all
. div class 종류 :
- mobile용 jQuery include
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
<script src="http://code.jquery.com/jquery.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
- option 및 option속성
. data-role, data-icon, data-iconpos, data-enhanced, footer, data-iconshadow
, data-thme, data-inline, data-mini, data-role, data-position
. class : ui-content, ui-body, ui-bar ui-bar-a, ui-body ui-body-a, ui-corner-all,
. data-icon속성 : check, carat-r, carat-l, carat-u, carat-d, delete, info, false, gear, phone, heart, lock, shop,
. data-iconspos 속성 : left, right, left, bottom
. data-iconshadow 속성 : true/false
. data-inline 속성 : true/false
. data-mini 속성: true/false
. data-role 속성 : button, listview , list-divider,
. data-position 속성 : fixed
. data-them 속성 : a, b,
. data-clear-btn : true/false
. placeholer : "내용"
. data-divider-theme 속성 : a
. data-autodividers 속성 : true/false
. data-inset 속성 : true/false
. data-filer 속성 : true/false
- input
. <input typ="...">
. type 종류 : text, search, number, date, month, week, time, email, url, checkbox,
- div
. class 종류 : ui-field-contain,
- jQuery Grid
. 정의 : div와 class 속성을 이용해서 grid를 만든다.
. <div class="ui-grid-a">
<div class="ui-block-a" style="background-color:yellow">1블럭(열/컬럼)</div>
<div class="ui-block-b" style="background-color:red">2블럭(열/컬럼)</div>
</div>
-
- 기본 body 구조
<body>
<div data-role="page">
<div data-role="header" data-position="fixed">...</div>
<div data-role="main" class="ui-content">...</div>
<div data-role="footer" data-position="fixed">...</div>
</div>
</body>
-
-
-
-
2-1 : 9장
