jQuery Mobile 시작 — data-role · navbar · 페이지 전환 완전 정리

 

 

Web Development · jQuery Mobile

jQuery Mobile 시작
data-role · navbar · 페이지 전환 완전 정리

CDN 한 줄 → 모바일 웹앱 골격까지

시작 jQuery Mobile이란

jQuery Mobile은 HTML 속성에 data-role만 붙이면 모바일 웹앱 UI(헤더·푸터·페이지 전환·네비바·버튼)가 자동 생성되는 라이브러리다. JavaScript를 거의 안 써도 페이지 전환 애니메이션, 뒤로가기, 풀스크린 모드까지 다 된다.

📌 현재 상태 — jQuery Mobile은 2021년 공식 EOL(End of Life). 신규 프로젝트에서는 React Native, Vue, Bootstrap 5 등으로 대체. 다만 기존 운영 사이트나 학습용으로는 여전히 만나게 된다.

---

용어 핵심 키워드

CDN콘텐츠 전송 네트워크 — 외부 서버 라이브러리 사용

data-rolejQuery Mobile이 자동 인식하는 역할 속성

page하나의 화면(div 단위)

header / content / footer화면 3분할 영역

navbar탭 형태의 네비게이션 바

data-icon버튼에 아이콘 부착

data-position: fixed스크롤해도 헤더/푸터 고정

data-add-back-btn뒤로가기 버튼 자동 추가

data-fullscreen탭하면 헤더/푸터 토글

data-direction: reverse전환 애니메이션 역방향

---

1 CDN 연결 — 한 번에 3줄

jQuery Mobile은 jQuery 본체 + Mobile CSS + Mobile JS가 모두 필요하다. 직접 다운로드하지 않고 CDN(외부 서버)에서 바로 가져온다.

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css"/> <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script> <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>

※ CDN을 쓰는 이유

• 속도 — 사용자와 가까운 서버에서 빠르게 다운로드
• 캐시 — 다른 사이트에서 이미 받았으면 재다운로드 없음
• 장애 분리 — 우리 서버가 멈춰도 라이브러리는 살아있음 (반대도 가능)
• 해커 공격 분산 — 한 서버가 다운돼도 다른 데서 복구 가능

⚠ http vs https — 요즘은 https://로 써야 한다. http://는 mixed content 차단으로 막힐 수 있다.

---

2 data-role — 한 페이지의 골격

<div data-role="page" id="page1"> <div data-role="header"> <h1>페이지 제목</h1> </div> <div data-role="content"> <p>본문 영역</p> </div> <div data-role="footer"> <h4>페이지 꼬리말</h4> </div> </div>

하나의 page = header + content + footer

페이지 제목

content 영역
첫번째 페이지

페이지 꼬리말

data-role 값	역할
page	하나의 화면 단위 — id로 구분
header	상단 제목 영역
content	본문 영역
footer	하단 영역
navbar	탭 형태의 네비게이션
listview	리스트 (이후 폴더에서 다룸)

---

3 멀티 페이지 + 뒤로가기 버튼

한 HTML 파일 안에 data-role="page"가 여러 개 있으면 jQuery Mobile이 알아서 페이지 전환을 처리한다. href="#page2"로 이동하고, data-add-back-btn="true"로 자동 뒤로가기 버튼을 만든다.

<div data-role="page" id="page1"> <div data-role="header"> <a href="#page1">홈</a> <h1>페이지제목</h1> <a href="#page2">페이지2</a> </div> ... </div> <div data-role="page" id="page2"> <div data-role="header" data-add-back-btn="true"> <!-- 자동으로 좌측에 "뒤로" 버튼이 생김 --> <h1>페이지제목</h1> </div> </div>

page2의 header data-add-back-btn="true"

← Back페이지제목

두번째 페이지

💡 왜 자동 뒤로가기가 좋나 — 모바일 사용자는 뒤로가기 버튼이 익숙하다. 따로 코드 짤 필요 없이 속성 하나로 끝.

---

반응형

4 navbar — 탭 네비게이션

data-role="navbar"를 header나 footer 안에 넣으면 탭 네비게이션이 만들어진다. 보통 footer에 두는 게 모바일 패턴.

<div data-role="footer" data-position="fixed" data-id="footerid1"> <div data-role="navbar"> <ul> <li><a href="#" data-icon="plus">추가</a></li> <li><a href="#" data-icon="minus">삭제</a></li> <li><a href="#" data-icon="check" class="ui-btn-active ui-state-persist">확인</a></li> </ul> </div> </div>

footer 안의 navbar — data-icon으로 아이콘 부착

페이지 제목

세번째 페이지

＋추가

－삭제

✓확인

data-icon 종류

data-icon	아이콘	data-icon	아이콘
plus	＋ 추가	minus	－ 삭제
check	✓ 확인	delete	✕ 삭제(엑스)
arrow-l/r	← / →	home	🏠 홈
search	🔍 검색	star	★ 즐겨찾기

---

5 활성 표시와 고정 헤더/푸터

ui-btn-active ui-state-persist

• 현재 페이지 표시 (활성 강조)
• persist = 페이지 전환 후에도 유지
• "내가 어느 탭에 있는지" 시각화

data-position="fixed"

• 스크롤해도 헤더/푸터가 화면에 고정
• 긴 컨텐츠에서 네비 항상 보이게
• data-id로 그룹화하면 전환 시 깜빡임 방지

<div data-role="header" data-position="fixed"> <!-- 스크롤해도 위에 붙어있음 --> </div> <div data-role="footer" data-position="fixed" data-id="footerid1"> <!-- data-id로 페이지 간 동일한 footer라고 알림 → 부드러운 전환 --> </div>

---

6 data-fullscreen · data-direction

data-fullscreen — 탭하면 헤더 숨김

이미지 갤러리 같은 곳에서 본문에 집중하고 싶을 때. 탭하면 헤더/푸터가 사라지고, 다시 탭하면 나온다.

<div data-role="header" data-fullscreen="true" data-position="fixed"> <!-- 화면 탭 → 헤더 토글 --> </div>

data-direction="reverse" — 역방향 전환

기본 페이지 전환은 왼쪽 → 오른쪽으로 슬라이드. data-direction="reverse"는 뒤로 가는 느낌의 역방향 슬라이드를 준다.

<a href="#page1" data-direction="reverse">page1</a> <!-- 앞 페이지로 돌아가는 느낌 -->

💡 UX 팁 — 사용자의 정신 모델은 "앞으로 가면 오른쪽으로 슬라이드, 뒤로 가면 왼쪽으로 슬라이드". 페이지가 비순차적으로 연결될 때 reverse를 적절히 쓰면 자연스럽다.

---

7 실전 — "솔로의 식탁" 반응형 메뉴

jQuery Mobile은 안 썼지만, 같은 폴더에서 학습한 flexbox + media query 반응형 패턴. 모바일은 1단, 태블릿은 2단, PC는 3단으로 메뉴를 배치한다.

/* 기본 — 모바일 (1단) */ #menu1, #menu2, #menu3, #menu4, #menu5 { width: 100%; } /* 태블릿 — 2단 */ @media all and (min-width: 768px) { #menus { display: flex; flex-wrap: wrap; justify-content: space-between; } #menu1, #menu2, #menu3, #menu4 { width: 49%; } #menu5 { width: 100%; } } /* PC — 3단 + 마지막은 2배 폭 */ @media all and (min-width: 992px) { #menu1 ~ #menu5 { width: 33%; } #menu5 { flex: 2 2 0; } /* 남는 공간 2배 차지 */ }

3단 레이아웃 (PC) — 마지막 메뉴는 2배 폭

밥/죽

국/찌개

반찬

일품요리

음료/칵테일

※ flex: 2 2 0 의 의미

• 3개의 숫자 = flex-grow flex-shrink flex-basis
• flex: 2 2 0 → 늘어날 때 다른 형제(flex:1)의 2배, 줄어들 때도 2배 비율로
• "남는 공간을 2배 받는다"고 생각하면 쉬움

---

8 자주 하는 실수

증상	원인	해결
data-role이 안 먹힘	jQuery 본체보다 Mobile이 먼저 로드됨	jquery → jquery.mobile 순서로 script 배치
CDN이 차단됨	http로 로드, 사이트는 https	https://code.jquery.com/... 로 변경
page 전환이 안 됨	href에 #id가 아니라 .html을 씀	한 파일 안 멀티 페이지면 #id로
fixed 헤더가 깜빡임	data-id로 그룹화 안 함	모든 페이지의 헤더에 같은 data-id 부여
네비 활성 상태 안 유지됨	ui-state-persist 누락	active와 함께 ui-state-persist도 추가

---

9 핵심 한 줄 요약

JQUERY MOBILE — KEY POINTS

필수 CDNjQuery + Mobile CSS + Mobile JS (이 순서)

페이지 골격page → header / content / footer

멀티 페이지한 파일에 page 여러 개 + href="#id"

뒤로가기 자동data-add-back-btn="true"

탭 네비navbar + ul/li + data-icon

고정 헤더/푸터data-position="fixed" + data-id 그룹

현재 탭 강조ui-btn-active ui-state-persist

전환 방향data-direction="reverse" → 뒤로 슬라이드

Tags

#jQueryMobile #dataRole #navbar #dataIcon #dataPosition #fixedHeader #fullscreen #페이지전환 #CDN #모바일웹 #솔로의식탁 #티스토리

▼ 티스토리 태그 입력란 복사용

jQueryMobile, dataRole, navbar, dataIcon, dataPosition, fixedHeader, fullscreen, 페이지전환, CDN, 모바일웹, 솔로의식탁, 티스토리