민자의 지식창고

스마트폰UI 기법 익히기 본문

개발노트/CSS

스마트폰UI 기법 익히기

전지적민자시점 2018. 6. 12. 16:33

1. 모바일 UI 프레임워크


사용자 경험(User Experience, 이하 UX)가 중요시


모바일 웹 = HTML5 + 모바일 UI 프레임워크


모바일 UI 프레임워크를 사용하면 네이티브앱과 UX가 거의 비슷해진다.


모바일 UI 프레임워크는 대부분 오픈 소스로 개발 되고 있다.

그 중 가장 유명한 것이 JQuery Mobile과 Sencha Touuch 모바일 이다


2.JQuery Mobile을 배워보자


특징

Write less, do more - 최소 작업으로 더 많은 효과를 얻을 수 있다.

자바스크립트를 전혀 모르더라도 HTML5 와 CSS3 로 만들어진 기존의 페이지를 손쉽게 변경이 가능하다.


최신의 UX를 제공 받을수 있따.


가장 많은 디바이스를 지원한다.


Ajax와 DOM을 사용하여 페이지를 직접 관리 한다.

Ajax(javascript + xml 통합 기술) 사용하여 페이지를 DOM(Document Object Model) 에 차곡 쌓아 놓는 작업을 한다.

그 후 브라우저는 덩어리를 한꺼번에 출력 한다.


스택 히스토리(Stack history)로 Back 단추 링크를 자동으로 연결한다.

JQuery Mobile이 DOM을 직접 관리하다 보니 또 한가지 장점 [Back] 단추를 눌렀을 때 이전 페이지가 어디인지 기억했다가

그곳으로 직접 이동 한다.


3.JQuery Mobile로 스마트폰 UI 시작


<link rel="stylesheets" href="jquery.mobile-1.4.2.css" />

 jQuery Mobile에서 사용하는 CSS 스타일. 이 스타일을 통해서 다양한 테마와 아이콘 등을 표시

뒤에 min 자가 붙는것은 압축을 해서 배포용으로 만들었다는 의미 이다.


<script src="jquery.js"></script>

Jquery Mobile 내부적으로 JQuery에 기반을 두어 자바스크립트가 작성


<script src="jquery.mobile-1.4.2.js"> </script>

JQuery Mobile의 실제 자바스크립트 파일. 모든 동작이 이 파일을 통해 이루어짐.


 파일을 직접 다운로드 받아 자신의 파일에 포함시키거나, JQuery Mobile의 직접 호스팅해서 그 파일들의 URL을 알려준다.

이러한 주소를 CDN(Contents Delivery Network)라 부른다. 

이방법의 장점은 한번 파일이 전송이 되면 스마트폰 단말기에 캐시되어 남아 있고 이에 내 파일에 접속하지 않아도 다른 앱에서 사용했다면 속도가 더 빨라 진다.,


뷰포트 설정하기


<meta name="viewport" content="width=device-width, initial-scale=1">


페이지 만들기

페이지 구성은 <body>안에 <div> 태그로 그룹을 만들고 data-role특성에 "page"라고 지정한다,.


사용법

<div data-role="page">

     ....

</div>


예제


<div data-role="page">

<div data-role="header">...</div>

<div data-role="content">...</div>

<div data-role="footer">...</div>

</div>


4. 화면 구성을 위한 UI 작성하기

한 페이지 안에 모두 구성하기


예제


<body>

<div data-role ="page" id="main">

<div data-role="header" data-theme="b">...</div>

<div data-role="content">

<h1> 메인페이지</h1>

<a href="#sub">서브페이지 </a>

</div>

<div data-role="footer">...</div>

</div>


<div data-role ="page" id="sub">

<div data-role="header" data-theme="b">...</div>

<div data-role="content">

<h2> 서브페이지</h2>

<a href="#main" data-direction="reverse"> 메인페이지</a>

</div>

<div data-role="footer">...</div>

</body>



href  특성에 북마크를 지정하듯이 <a>태그에 id선택자의 이름을 적어주면 해당 화면으로 이동한다.


JQuery Mobile의 장점은 이동하는 페이지의 히스토리를 기억한다는 것이며, <a> 태그에 다음처럼 data-direction을 reserve로 지정하면, 장면전화 효과를 자동으로 처리 해준다

JQuery 1.4.2 이상부터는  기본 장면전화 효과  Fade이기 때문에 좌우 이동 스라이드 효과를 주기 위해 data-transition="side"를 꼭 입력한다.

<a> 태그의 href가 아닌 이전 주소로 되돌아고 싶다면 data-direction="reserve" 대신에 data-rel="back"을 사용한다.

data-dircetion은 화면 전환효과가 적용되고 data-rel은 장면 전환뿐만 아니라 브라우저의 뒤로가기 단추와 유사한 기능을 한다.


여러개의 페이지로 구성하기


각각의 페이지를 완성된 형태로 구성하고 링크 내용도 페이지의 파일 이름을 직접 작성












728x90
저작자표시 비영리 변경금지

'개발노트 > CSS' 카테고리의 다른 글

CSS 정리 2  (0) 2020.09.08
CSS 정리 1  (0) 2020.09.07
반응형 웹 디자인하기  (0) 2018.06.12
CSS3 레이아웃 사용법 익히기  (0) 2018.06.11
CSS3 좌표계 사용법 익히기  (0) 2018.06.11
'개발노트/CSS' Related Articles more