JQuery Mobile Button Icon
■ JQuery Mobile에서 기본적으로 제공되는 button icon의 종류를 알아보고 몇 가지만 예제에 삽입하고 아이콘의 위치도 조절해보겠습니다. 먼저 기본 제공되는 버튼의 종류는 다음과 같습니다. ▲ 좀 많네요. ^^ 이 중에서 몇 개만 버튼에 삽입해보겠습니다. ▲ 버튼에 아이콘을 넣는 형식은 예제처럼 data-icon="아이콘 이름"을 넣어주면 됩니다. 임의대로 몇 개만 넣어봤는데요. 브라우저에서 출력해보겠습니다. ▲ 이렇게 간단하게 버튼의 특성에 맞게 아이콘을 삽입할 수 있는데요. 기본은 이렇게 문자열의 왼쪽에 위치하지만 이 위치도 바꿔줄 수 있습니다. data-iconpos 속성을 이용하는데요. 속성값에 left(기본값), right, top, bottom, notext 를 설정할 수 있습니..
jquery mobile button property 속성
jquery mobile button property 지난 글에서 jquery mobile의 버튼이 자동 생성 되는 경우를 알아봤는데요. 이번 글에서는 그 버튼의 몇 가지속성에 대해서 알아보겠습니다. ■ 첫 번째로 jquery mobile 버튼의 모서리는 라운딩 처리가 되어 있는데요. (datat-conners="true") 이 속성을 제거하고 싶으면 다음과 같이 속성값에 flase를 넣어주면 됩니다. (data-corners="false") 예제에서 적용해볼게요.▲ 모서리의 라운드 효과가 없어졌는데 그림에서는 잘 안 보일 수도 있겠네요. 속성 하나만 적용하면 되니까 직접 해보세요.^^ 다음은 datat-inline인데요. 버튼의 크기를 결정하는 속성입니다. 기본 속성값은"false" 이고요. 위 그림처..
jquery mobile button 자동 생성
jquery mobile button 자동 생성 ■ 지난 글에서는 data-role 속성을 이용해서 button을 만들어서 넣어봤었는데요. 이번에는 자동으로 버튼 모양이 생성되는 경우를 보겠습니다. 즉, "button"이라는 이름을 직접 입력하지 않아도 자동으로 버튼으로 변환이 되는 경우는 두 가지가 있습니다. 1. 특정 영역에서 태그가 사용되었을 때2. 버튼임을 알 수 있는 태그를 사용했을 때 먼저 특정 영역에 태그를 사용했을 경우인데요. 대표적으로 '헤더'나 '푸터'에 링크를 사용하면 [nav]의 역할을 하기 때문에 jquery mobile에서는 자동으로 버튼을 생성합니다. 예제에서 확인해볼게요.▲ data-role 속성을 이용해서 두 개의 page를 만들었고요. 첫번째 페이지에서 태그 안에 datt..
JQuery Mobile data-role
JQuery Mobile data-role ■ 지난 글에서 JQuery Mobile을 사용하기 위해서 파일을 내려받아서 연결하는 방법과 CDN을 이용하는 방법 등을 정리해봤는데요. 이번 글에서는 data-role 속성에 대해서 알아보겠습니다. ■ 이 속성은 각 영역의 역할을 확실하게 정해주는 기능을 하는데요. 예를 들어 헤더는 헤더답게, 푸터는 푸터답게 알아서 바꿔주는 역할을 합니다. 여기서는 data-role의 속성값으로 page, header, section, footer를 지정해보겠습니다. ▲ HTML5로 작성된 문서에 예제와 같이 div 태그를 이용해서 박스를 만들고 data-role="page" 속성을 지정하고 있는데요. 이렇게 설정하면 이 박스가 하나의 페이지가 됩니다. 기본적으로 HTML 문..
JQuery Mobile 사용
JQuery Mobile 사용 ■ 지난 글에서 JQuery Mobile을 사용하기 위해서 CDN 연결하는 과정을 정리해봤었는데요. 이번에는 하이브리드 앱 등에서 사용하기 위해서 파일을 컴퓨터에 내려받아서 HTML 문서와 같은 폴더에 넣어서 연결하는 과정을 정리해보겠습니다. 역시 jquerymobile.com/download/ 로 이동해서 파일을 내려받겠습니다. ▲ 그림에서 표시한 압축파일을 내려받으시면 됩니다. ▲ 파일을 내려받아서 압축을 풀고 폴더를 열어보겠습니다. ▲ 꽤 만은 파일들이 있네요. 이 중에서 min이라는 단어가 있고 없고 차이는 파일 내용을 보기 좋게 나열하는지 아닌지에 차이일 뿐 똑같은 파일입니다. 이 파일들을 모두 사용해도 되고, 상황에 맞게 필요한것만 사용해도 되지만, 그림에서 표시..
JQuery Mobile 사용준비
JQuery Mobile 사용 준비 ■ 모바일 플랫폼 정말 다양하죠? IOS, Android, 블랙베리, WebOS, 윈도우 등 정말 많은데요. JQuery Mobile은 이런 모바일 플랫폼은 물론이고, 크롬, 파이어폭스, IE(구.버전 제외) 등 브라우저도 모두 지원하기 때문에 이 녀석으로 웹 문서를 만들면 플랫폼의 제약은 거의 없을 겁니다. 각종 테마도 제공하고, 코드도 정말 가볍게 만들 수 있는데요. 앞으로 공부하면서 하나씩 정리하기도 하고 이번 글에서는 JQuery Mobile을 사용하기 위해 head 태그 안에서 연결하는 과정을 정리해볼 텐데요. ■ 파일을 내려받아서 HTML 문서와 같은 폴더에 넣어놓고 연결해도 되고, CDN을 이용해서 연결할 수도 있습니다. 네트워크 연결 상황에 따라서 사용하..