demun(대문블로그)

퍼블리셔/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-' 접두어로 시작해서..

퍼블리셔/css2011. 12. 20. 06:00

jquery mobile 에는 jquery.mobile.css 가 자동으로 포함되어 다섯가지 테마를 제공하고 버튼이나 아이콘도 포함되어 모바일에서 보기좋게 설정을 알아서 해줍니다. 따로 스타일을 설정하지 않아도 다 알아서 해주죠. 그중에 아이콘과 버튼의 스타일이 맘에 들어서 가지고 와서 조금 만쳐봤습니다. 현재 jqm홈페이지에서는 1.0을 배포하고 있습니다. zip파일로 제공하는데요. 거기에 이미지와 css 관련 자료는 다 있습니다. jquery mobile 의 버튼은 a, b, c, d, e 이렇게 다섯가지를 기본으로 제공합니다. 그중에서 맘에 드는것은 바로 아이콘입니다. 하나의 이미지의 png 파일을 backgrpund-position 을 이용해서 배치를 합니다. 요넘을 블로그에서 어떻게 사용해볼까하..

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

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