WEB

140325 Jquery Mobile, CSS

계발꿈나무 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>
----------------------------------버튼적용-----------------------------------------------

본문 이미지 1
<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>


반응형