demun(대문블로그)

퍼블리셔/jQueryMobile2011. 12. 31. 06:00

jQuery Mobile 은 리스트 항목을 검색할 수 있도록 지원합니다. 검색 가능한 리스트로 만들려면 data-filter="true" 속성을 추가하면 됩니다. 이렇게 하면 리스트 상단에 검색 입력 창이 추가되며 검색 값을 기준으로 항목을 필터(Filter) 할 수 있다. 참고로 검색 단어는 대/소문자를 구분하지 않습니다. 다음은 간단한 마크업 예와 그결과 이미지 입니다. Split button 리스트 Split button 리스트는 리스트의 각 항목을 좌우 두 구간으로 나눠서 왼쪽에는 일반적인 항목을 표현하고 오른쪽에는 아이콘 버튼을 둬서 별도의 링크를 가능하게 합니다. 이때 data-split-icon 속성을 이용해 특정 아이콘을 지정할 수 있으며, data-split-theme 속성으로 아이콘 버..

퍼블리셔/jQueryMobile2011. 12. 30. 06:00

리스트는 버튼과 함께 모바일 애플리케이션에서 자주 사용되는 UI 컨트롤입니다. jQuery Mobile 은 기존 HTML의 목록 태그 ul, ol 에 data-role="listview" 속성을 지정함으로써 리스트가 생성됩니다. 그러면 가장 기본적인 리스트 형태가 만들어 집니다. 아래는 대략적인 형태의 코드와 이미지 입니다. Numbered 리스트. Numbered 리스트는 리스트 항목에 숫자가 순차적으로 부여되는 것으로 html의 순서있는 목록 태그인 을 이용합니다. Inset 리스트. 기본 리스트는 여백없이 브라우져를 꽉 채우는 형태로 표현됩니다. 그러나 한 페이지에 리스틀와 다른 UI 컨트롤이 함께 구성된다면 이런 형태의 스타일은 어울리지 않을 수 있습니다.Inset 리스트는 상.하.좌.우 여백과 ..

퍼블리셔/jQueryMobile2011. 12. 29. 06:00

버튼은 매우 광범위하게 사용되는 UI 컨트롤입니다. jQuery Mobile 에서 버튼은 앵커 태그에 data-role="button" 속성을 지정해서 만들 수 있습니다. 다만 폼 요소 중 버튼 타입에 해당하는 submit, reset, image 등의 input 양식은 이 속성을 따로 지정하지 않아도 자동으로 jQuery Mobile 버튼으로 만들어 집니다. 다음과 같이 앵커 태그에 data-role="button" 속성을 지정해서 버튼을 생성합니다. button 이렇게 생성한 버튼은 모바일 브라우져의 가로 크기를 꽉 채우게 됩니다. 그러나 data-inline="true" 속성을 추가로 지정하면 버튼의 크기를 텍스트에 맞춰 줄일수 있습니다.(이전글에서 블럭과 인라인이라고 잠시 이야기 한적이 있지요.)..

퍼블리셔/jQueryMobile2011. 12. 28. 06:00

jQuery Mobile 에서는 표준 아이콘을 22개를 지원합니다. 아이콘은 보통 버튼이나 리스트 컨트롤과 함께 사용하며 data-icon 속성을 이용해 특정 아이콘을 지정할 수 있습니다. 다음 코드는 버튼에 인쪽 화살표 아이콘을 적용하는 간단한 예입니다. button 아이콘 위치.버튼에 아이콘을 추가하면 아이콘은 기본적으로 왼쪽에 위치하게 됩니다. 이 위치를 변경하려면 data-iconpos 속성을 지정하면 됩니다. 아이콘 위치로 다음과 같이 4개의 값 중 하나를 선택할 수 있습니다. icon 위치 : left(혹은 false, 기본 값), right, top, bottom data-iconpos 의 적용 예. button data-iconpos 에 top,bottom,right,left 로 아이콘이 ..

퍼블리셔/jQueryMobile2011. 12. 27. 06:00

사용자 인터페이스에 대해서 알아봅니다. 이전에 발행된 글도 참고하시기 바랍니다. jQuery Mobile 의 UI 구성은 html5의 data-* 속성을 지정하는 방식으로 이뤄집니다. 또한 거의 모든 UI컨트롤은 기존 HTML의 표준 태그 기반으로 하기 때문에 최신 브라우져가 아니더라도 최소한의 사용성이 보장됩니다. 물론 최신 브라우져에서는 향상된 스타일과 최상의 UI 경험을 얻을수 있습니다. 1. Page, Header, Content, Footer jQuery Mobile 은 Page 영역 단위로 화면을 구분한다고 했습니다. Page 영역은 와 같은 컨테이너 태그에 data-role="page" 속성이 지정된 영역을 말합니다. 하나의 html 페이지에 두개 이상의 Page 영역이 존재할 경우 제일 먼..

퍼블리셔/jQueryMobile2011. 12. 26. 06:00

jQuery Mobile 은 기본적으로 5가지 테마를 제공합니다. 그런데 추가적으로 사용자테마를 만들수 있습니다. 현재 홈페이지에서 제공하고 있는 정식버젼인 1.0 파일에 css 파일에 보면 /* A */, /* B */ 형식으로 5가지의 테마를 제공합니다. 만약 새로운 테마 즉 F 라는 테마를 만들려면 기존의 Swatch 중 하나를 복사해서 CSS 셀렉터 이름을 새로운 Swatch 문자(여기서는 F) 로 수정하고 색상과 효과를 다르게 구현하면 됩니다. 예를들면 다음과 같습니다. .ui-bar-f { /* 셀렉터 이름의 끝을 새로운 Swatch 문자로 수정 */ border:1px solid #555; /* 새로운 색상 #555 를 지정함 */ .... } CSS 파일을 이렇게 수정한후에는 마찬가지로 h..

퍼블리셔/jQueryMobile2011. 12. 25. 06:00

jQuery Mobile 은 CSS3의 최신 기술을 적극 활용해 향상되고 세련된 테마를 구현하고 있으며 이미지 사용을 초치대한 절제해 모바일 네트워크를 위한 경량화에 힘을 기울이고 있습니다. 또한 레이아웃과 UI 컨트롤 하나하나에 서로 다른 색상과 질감을 적용할 수 있어 다양하고 섬세한 테마 구현이 가능합니다. 그리고 테마롤러(ThemeRoller)라는 자동화된 테마 도구를 제공해 사용자 정의 테마를 손쉽게 만들수 있게끔 지원하고 있습니다. jquery mobile 테마 특징. CSS3 확용. 최근 출시되는 대부분의 모바일 UI 라이브러리처럼 jQuery Mobile 역시 CSS3의 향상된 기능을 많이 활용하고 있습니다. CSS3 를 이용하면 좀더 세련된 디자인이 가능하며, 많은 부분에서 이미지를 대체할..

퍼블리셔/jQueryMobile2011. 12. 24. 06:00

jQuery Mobile 은 핵심 라이브러리를 참조하는것만으로도 시작준비가 끝입니다. 즉 해더에 관련 js와 css를 참조하는 것이죠. 아래의 코드를 넣는것만으로 준비는 끝입니다. 예제를 한번 보시죠. 1.0버젼이든 1.0a3버젼이든 상관없습니다. HTML5 의 data-* 속성. jquery Mobile은 페이지의 각 요소가 어떤 역활을 하게 될지 결정하기 위해 data-* 속성을 활용합니다. data-* 속성은 html5에 새로 추가된 것으로 로컬(Local)에 임의의 사용자정의 데이터를 저장하기 위한 표준 스펙(Spec)이며 html 요소에 직접 데이터를 정의할 수 있어 태그와 데이터의 연관성을 주기 편리합니다. 키/값 형태로 데이터를 정의할 수 있으며, 다음과 같이 'data-' 접두어로 시작해서..

퍼블리셔/jQueryMobile2011. 12. 23. 06:00

jQuery Mobile 은 모바일 웹 애플리케이션 개발을 위한 자바스크립트 프레임워크 입니다. 이름에서도 알듯이 jQuery진영에서 직접 개발한 프레임워크로 네이티브 수준의 모방일 웹 , 즉, 모바일 웹앱을 개발하기 위한 각종 UI 컨트롤과 이벤트 처리, 애니메이션 효과 및 자동 네비게이션, Ajax 통신 등 모바일에 최적화된 기능을 선보이고 있습니다. jQuery Mobile 개발 진영에서 밝힌 전략에서도 기기 지원과 브라우져 화환성을 중요하게 다루고 있습니다. jQuery Mobile 이 추구하는 점진적 향상(Progressive Enhancement), 적절한 퇴보((Graceful Degradation)와 같은 설계원칙 역시 이러한 전략을 잘 설명해 주는 대목입니다. jQuery Mobile 의..

퍼블리셔/jQueryMobile2011. 11. 21. 20:40

요즘 html5 와 모바일로 많은 관심을 두고 있습니다. 그중 jquery mobile 에 대해서 배웠는데 복습차원에서 하나 하나 뜯어보았습니다. 그중 기본 템플렛에 대해서 이야기 할려고 합니다. 뭐 다 아는 이야기이지만 처음 입문하시는분을 위해서 몇자 적습니다. jquery mobile 를 인클루드하는것만으로 모바일 페이지는 끝이라고 해도 과언이 아닙니다. 웹사이트를 만들때는 float 가 어떻고, IE 의 버그를 잡고 하는데....모바일은 그게 없습니다. 심지어는 css 까지 직접 작성하지 않고 그냥 링크만 거는것으로 겜 끝~~~ 먼저 홈페이지를 알려드려야지요. jquery mobile 홈페이지 : http://jquerymobile.com/ 시작해볼까요... 시작은 html5 입니다. 그럼 대략 기..