-
140325 Jquery Mobile, CSSWEB 2014. 3. 25. 23:09반응형
140325 수업내용
- 오늘은 주로 CSS와 JQuery, JQuery Mobile에 대해서 배우고 실습을 했다.
- JQuery Mobile에서 제공해주는 반응형 웹디자인에 대해서 실습하면서 m.xxx 라는 웹페이지와 그냥웹페이지에서 플랫폼에 따라 다르게 표시해주는 것이 방식이 다르다는 것을 알게 되었다.
* 서버 개발자 역할 : DB 설계
* 웹접근성
- 접근의 개념
- 플랫폼에 따라 다른 접근이 이루어짐
- 기기에 맞게 보여지는 방식이 다른 것
* HTML5
- 총칭 : HTML5 Markup / HTML5 API / CSS3
- 보완된 것 : 하위 호환성 / 간소화된 문법 / 새로운 콘텐츠 모델, 요소, 속성 추가
ex) <script
type="text/javascript">* 액티브X가 없다는 것
- 공인인증서만 있다(최근 미래부 발표)
ex) 폰뱅킹
- 플래시도 사라진다, 사람들 폰/탭으로 먼저 접속하기 때문
- 자바스크립트로 바뀌고 있는 추세
* 상호작용 요소
ex) <input ~~~ autofocus> 포커싱
<input ~~~ required> 필수 입력 요소(유효검사해줌)
- embeded -> vedio
- canvus -> 차트 등
- SVG (Scalable Vector Graphic) : 벡터기반 그래픽 구현 / 확대해도 깨지지 x
* HTML5 API
- canvus 2d API
- offline web application : offline 시 쓰던 메일 내용 등을 캐시에 넣어둠으로써 손실 방지
ex) 구글 메일
- Web SQL DB : 키/벨류로 저장
ex) 안드로이드 SQLite : 전화번호부 등 저장 되어 있음
* Web Storage (200mb)
- 키/값으로 저장
- session : 로그인/로그아웃이 x
- local : 로컬 저장소에 저장
- 쿠키는 4kb 4000자 text 형태
ex) 좋아요 등 db로 바로 접근하면 과부하가 많음. 메모리에 저장해놨다가 나중에 저장.
?? 웹이 왜 realtime이 안 되나
- 한 번 응답하면 끝남. 요청 & 응답
- 유지가 안 돼서 쿠키나 세션을 사용하는 것.
- 노드js가 짧은 소스로 웹소켓(realtime)을 지원해줌
- 폴링 : 요청&응답
- 소켓 : 바로바로 응답
* WebGL (Web-based Graphics Library)
- 브라우저에서 3D 그래픽 구현을 가능케 해줌
ex) 총게임
* CSS3
- 웹사이트를 반응형으로 디자인하기
- 기존 모바일 웹의 문제 -> 분기형으로 m.~ 를 따로 만들었었음.
- 같은 페이지 접속하더라도 단말기에 따라 다르게 나오도록 해야함
* 반응형웹디자인? 사용자 환경에 따라 유익하게 반응하는 디자인 => pc/mobile/os/화면크기
- HTML5 = Forms + CSS3 (미디어쿼리, Image replacement, image sprites)
=> 모바일에는 pc용 이미지 로드 대신, 모바일용 이미지를 띄워야 함
- 모바일 스프릿 : 따로 이미지 불러오는 것보다 한 줄로 한꺼번에 불러옴 ㅁ.ㅁ.ㅁ... x ㅁㅁㅁㅁㅁㅁ
ex) 게임할 때 주인공 불러올 때/ 움직이면 이미지 하나가 움직이는 것.
- 장점 : 플랫폼 고려x, 효율적
- 단점 : 디자이너의 일이 많아짐. 포털사이트는 너무 많은 사이트가 연결되어 있어서 반응형으로 바꾸는게 힘듬
- 어울리는곳 : sns 처럼 가벼운 곳
- 안어울림 : 대형포털 , 한국형 쇼핑몰, 무거운 곳
- pc사이트를 반응형으로 개선중 -> 새로 만들 수 없으므로
ex) asp->jsp로 바꿔나감
* 실행순서 : css -> js
- JS파일은 BODY밑에 둬야함. "</BODY> 전"
- 맨 위에 두면 JS를 다 읽을 때 까지 HTML을 뿌리지 않음 (모바일에서는 미세한 차이를 보임)
- 속도보다 중요한건 반응 => "서비스"와 직결 됨
- CDN(Content Delivery Service) : 내 사이트 트래픽 감소. 다운받았던 걸 캐시로 씀 -> 다음부터 새로 불오지 않아서 속도가 빨라짐.
- min.js : enter, 주석, whitespace 가 다 줄어듦. 원본 파일 불러올 때보다 속도가 빠름.
- 모바일용 저용량 이미지 따로 필요. PC용 그대로 쓰면 사용자가 엄청난 트래픽을 부담하게 됨.
* HTML 고치기
- input type="search, tel, url-email, number" => 모바일 자판을 알맞게 바꿔줌
- DOCTYPE ~~~ HTML4.0~~ -> <!DOCTYPE HTML> --> HTML5
- div로 나눠서 있으면 가독성 떨어짐. head/footer... 로 변경해주는 것이 좋다.
- 미디어쿼리 인식 못하는 기기의 브라우저도 있으므로 조건문 밖으로 @media => @charset 안에 써놓기
=> 책으로 정리하면 훨씬 체계적으로 정리 가능
* JQuery 플러그인
- javascript -> jquery -> 효율적
100줄 -> 10줄
- Ajax이후 javascript 코딩이 복잡해지면서 등장
- JQuery : 선택자/실행 중요
ex) <div> : HTML 선택자
#id : id 접근
.class : class 접근
-> 선택하고 실행한다. 초 간 단 / write less do more
-> JQuery Mobile은 5개 테마를 제공해줌
- 폰갭을 통해 모바일웹이 앱이 됨.
* Ajax
- Asyncrous javascript and XML
- 부분정보 할당. 요청
- AJAX는 이벤트에 따라 발생함.
- 비동기 = 문자 중간에 확인
동기 = 전화, 전화만 집중
ex) 카카오톡 : 비동기 카톡 연결됐을 때 message 가져옴. '1' 숫자가 중간에 사라짐. 빨라서 동기로 보일 뿐
* 폴더구조
- Dev
- CSS - .css
- images = css의 이미지
- JS - .js(JQuery mobile)
- images : png 등 저장
* 최근 뜨고 있는 편집기 : sublimetext
* JQuery Mobile :
- data-xxx : JQuery Mobile 에서 쓰는 태그 속성 접근 방식
- 장점 : less write, get more
- 단점 : 얻는 것에서 더 바꿀 순 없음
- 멀티페이지 ? html 한 페이지에 div를 여러개 써서 여러 페이지처럼 보이도록 함
* 서버 / 파일 코딩 시 저장을 누르면 자동으로 새로고침 해주는 크롬 확장 프로그램 : Live Page, Livepage, 라이브페이지
- https://chrome.google.com/webstore/detail/livepage/pilnojpmdoofaelbinaeodfpjheijkbh
* 크로스브라우저 : 각각 브라우저 마다 javascript 처리방식이 다름 => jquery는 크로스브라우징 처리해줌.
* 프로토타입?? javascript 언어는 객체지향언어다. 클래스 대신 프로토타입으로 관리해준다.
* Google DNS ??
- http://songhl1.tistory.com/717
- 이런 DNS 의 경우 일반적으로 ISP 쪽에서 제공해주는 것을 사용하는 것이 일반적이다. (보통 자동 설정으로 되어 있다.) 이럴 경우 우리나라를 기반으로 하는 web site access 는 느리지 않으나 가끔 해외 site 접속시 느려지는 경우가 있다. DNS 에서 해당 ip address 를 찾는데 시간이 걸리는 것이다.
그래서 이전에 이런 것을 참지 못하거나 혹은 국내 DNS 에서 막아놓은 특정 site 들 (애들은 못가는 곳)에 접속하려는 사람들은 openDNS 1 를 이용했다. 여튼 간에 Google 의 주장에 의하면 상당히 빠른 DNS 를 제공한다고 하므로 이번 기회에 한번 Google Public DNS 을 써보는 것도 괜찮겠다.사용법은 간단하지만 아래와 같다.1. 구글의 Public DNS 는 다음과 같다. - [8.8.8.8 / 8.8.4.4]2. "내 네트워크 환경" 의 속성 클릭3. 연결된 네트워크 연결 (ex. 로컬 영역 연결) 의 속성창을 클릭한다.4. 속성창을 클릭하면 아래와 같이 창이 뜨는데 여기서 "인터넷 프로토콜(TCP/IP)" 을 클릭하고 "속성"을 클릭한다.-------------------------------------실습내용--------------------------------------------
------------------------------------------- Template ------------------------------ -------------------- * header / article / section / footer<!DOCTYPE html><html><head><meta charset="utf-8"><title>My Page</title><meta name="viewport" content="width=device-width, initial-scale=1"><link rel="stylesheet" href="css/jquery.mobile-1.3.2.min.css" /> <script src="js/jquery-1.11.0.min.js"></script> <script src="js/jquery.mobile-1.3.2.min.js"></script> </head><body><article data-role="page"><header data-role="header"><h1>My Title2</h1></header><!-- /header --><section data-role="content">hello</section><!-- /content --><footer data-role="footer" data-position="fixed"><h1>Copyleft</h1></footer></article><!-- /page --></body></html>----------------------------------버튼적용-----------------------------------------------<a href="#" data-role="button" data-icon="delete">delete</a><a href="#" data-role="button" data-icon="delete" data-iconpos="notext">delete</a> <a href="#" data-role="button" data-icon="arrow-l">arrow-1</a> <a href="#" data-role="button" data-icon="arrow-r" data-iconpos="right">arrow-r</a> <a href="#" data-role="button" data-icon="arrow-u" data-iconpos="top">arrow-r</a><a href="#" data-role="button" data-icon="arrow-d" data-iconpos="bottom">arrow-d</a> <a href="#" data-role="button" data-icon="plus">plus</a><a href="#" data-role="button" data-icon="minus">minus</a><a href="#" data-role="button" data-icon="check">check</a><a href="#" data-role="button" data-icon="gear">gear</a><a href="#" data-role="button" data-icon="refresh">refresh</a> <a href="#" data-role="button" data-icon="forward">forward</a> <a href="#" data-role="button" data-icon="back">back</a><a href="#" data-role="button" data-icon="grid">grid</a><a href="#" data-role="button" data-icon="star">star</a><a href="#" data-role="button" data-icon="alert">alert</a><a href="#" data-role="button" data-icon="info">info</a><a href="#" data-role="button" data-icon="home">home</a><a href="#" data-role="button" data-icon="search">search</a>반응형'WEB' 카테고리의 다른 글
14.03.28 쓰레드 & 자바 & 폰갭 (0) 2014.03.28 140326 Jquery Mobile 실습 (0) 2014.03.26 20140324 HTML5 (0) 2014.03.24
