jQuery Mobile data-role 완전 정리 — 페이지·리스트·전환 효과

 

 

Web Development · jQuery Mobile

jQuery Mobile data-role —
페이지·리스트·전환 효과 완전 정리

data-role 한 줄로 모바일 UI를 만드는 jQuery Mobile 1.4.5 가이드

시작 jQuery Mobile이란?

2010년대 초반 모바일 웹 시대에 등장한 "HTML 마크업만으로 모바일 앱 같은 UI"를 만들기 위한 라이브러리. data-role 속성에 "page", "header", "listview" 같은 값을 적기만 하면 라이브러리가 자동으로 모바일 친화적인 디자인과 동작을 입혀준다. 지금은 React Native·Flutter 같은 네이티브 친화 도구에 자리를 내줬지만, data 속성으로 마크업에 의미를 부여하는 패턴을 익히는 데 여전히 좋은 학습 대상이다.

기본 셋업 (CDN 3줄)

<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>

⚠️ 모바일 페이지를 만들 때는 <meta name="viewport" content="width=device-width, initial-scale=1">를 반드시 head에 넣어야 모바일 화면에 맞게 렌더링된다.

용어 data-role 핵심 키워드

data-role="page"한 화면 전체를 감싸는 컨테이너

data-role="header"상단 바 (제목 영역)

data-role="content"본문 영역

data-role="footer"하단 바

data-role="listview"리스트를 모바일 친화 UI로 변환

data-inset="true"listview 좌우 여백 + 둥근 모서리

data-position="fixed"스크롤해도 따라오는 고정 영역

data-transition페이지 전환 효과 (slide, fade, flip 등)

data-ajax="false"전체 페이지 새로고침 강제 (외부 페이지 이동)

data-rel="back"브라우저 뒤로가기와 동일

data-direction="reverse"전환 애니메이션을 역방향으로

data-icon="grid"버튼에 아이콘 표시

---

1 단일 페이지 기본 구조

<div data-role="page"> <div data-role="header"> <h1>머리말(header)영역</h1> </div> <div data-role="content"> <p>내용(content)영역</p> </div> <div data-role="footer"> <h4>꼬리말(footer)영역</h4> </div> </div>

머리말 (header)

내용(content)영역 — 본문 텍스트가 여기 들어간다.

꼬리말 (footer)

📱 한 페이지에 3개의 핵심 영역이 있다. page 안에 header + content + footer. 각 영역은 jQuery Mobile이 자동으로 모바일 스타일을 입힌다.

---

2 멀티 페이지 + 페이지 전환

jQuery Mobile은 한 HTML 파일 안에 여러 page를 넣을 수 있다. 각 페이지에 id를 주고, 링크에서 #id로 이동한다. 페이지 이동 시 부드러운 애니메이션이 자동 적용된다.

<div data-role="page" id="page1"> <div data-role="content"> <a href="#page2">페이지2로 이동</a> </div> </div> <div data-role="page" id="page2"> <div data-role="content"> <a href="#page1" data-direction="reverse">뒤로</a> <a href="#page3" data-transition="slide">slide 전환</a> <a href="#page3" data-transition="flip">flip 전환</a> </div> </div>

data-transition 종류

값	효과
slide	좌→우 슬라이드 (기본 페이지 전환)
slideup	아래에서 위로 슬라이드
slidedown	위에서 아래로 슬라이드
fade	페이드 (대화상자 기본값)
flip	3D 카드 뒤집기
turn	책장 넘기기 효과
flow	줌아웃 후 슬라이드
pop	가운데서 팝업
none	전환 효과 없음

※ 페이지 전환 옵션

• data-direction="reverse" — 효과를 역방향으로 (뒤로가기 느낌)
• data-rel="back" — 브라우저 뒤로가기와 동일 (히스토리 사용)
• 대화상자(data-rel="dialog") — 페이지를 모달처럼 띄움

---

3 listview — 모바일 리스트

<ul>에 data-role="listview"만 추가하면 평범한 리스트가 탭 가능한 모바일 리스트로 변신한다.

<ul data-role="listview" data-inset="true"> <li><a href="mailto:gdhong@hot.co.kr">이메일</a></li> <li><a href="tel:0311234567">전화</a></li> <li><a href="sms:0101234567">SMS</a></li> </ul>

스마트 페이지 링크

• 📧 이메일 링크
• 📞 전화번호 링크
• 💬 SMS 문자 링크
• 🗺 위성좌표 링크
• 📍 주소 링크

Index ⊞

외부 프로그램 연동 링크

스킴	예시	실행
mailto:	mailto:user@example.com	메일 앱 열기
tel:	tel:01012345678	전화 다이얼러
sms:	sms:01012345678	문자 앱
지도 URL	maps.google.com/maps?q=...	지도 앱 또는 브라우저

---

4 외부 페이지 링크 vs 내부 링크

내부 링크 (#id)

• 같은 HTML 파일 안의 다른 page로
• 전환 애니메이션 자동 적용
• 예: href="#page2"
• 로딩 없이 즉시 전환

외부 페이지 링크

• 다른 .html 파일로 이동
• 기본은 Ajax로 로드 (애니메이션 유지)
• 전체 새로고침 원하면 data-ajax="false"
• 예: href="page2.html"

<!-- 외부 파일이지만 Ajax로 로드 (기본) --> <a href="page2.html">페이지2</a> <!-- 전체 새로고침으로 이동 (jQM 비활성) --> <a href="page2.html" data-ajax="false">페이지2</a> <!-- 외부 사이트 (Ajax 불가) --> <a href="http://example.com" rel="external">외부</a>

---

5 footer 고정 (data-position)

<div data-role="footer" data-position="fixed"> <a href="index.html" data-icon="grid">Index</a> </div>

스크롤해도 footer가 화면 하단에 계속 붙어있게 한다. 모바일 앱의 하단 탭 바와 비슷한 효과.

---

6 자주 하는 실수

실수	증상	해결
viewport meta 태그 누락	모바일에서 데스크톱처럼 작게 보임	head에 viewport 추가
data-role="page" 없음	jQM 스타일이 적용 안 됨	최상위 div에 data-role="page"
같은 파일에 같은 id가 두 개	전환 시 엉뚱한 페이지로	id는 유일해야 함
스마트 따옴표(”) 사용	HTML 파싱 오류	일반 따옴표(") 사용
외부 페이지에서 jQM 미작동	data-ajax 자동 전환 시 스크립트 로드 안 됨	data-ajax="false" 또는 페이지마다 jQM 로드
data-role 오타 (data-roll)	아무 동작 없음	철자 확인 — role(역할)

---

요약 핵심 한 줄 정리

jQuery Mobile data-role 핵심

page한 화면 전체 — header + content + footer 구성

listviewul을 모바일 탭 가능한 리스트로 변환

data-inset="true"리스트에 좌우 여백 + 둥근 모서리

data-position="fixed"스크롤해도 따라오는 고정 영역

data-transitionslide / fade / flip / pop / none

data-direction"reverse"로 역방향 애니메이션

data-ajax="false"외부 페이지로 전체 새로고침

data-rel="back"브라우저 뒤로가기와 동일

mailto: tel: sms:외부 앱 호출 URI 스킴

Tags

#jQueryMobile #data-role #page #listview #data-transition #data-ajax #모바일웹 #멀티페이지 #외부링크 #mailto #웹개발 #티스토리

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

jQueryMobile, data-role, page, listview, data-transition, data-ajax, 모바일웹, 멀티페이지, 외부링크, mailto, 웹개발, 티스토리