본문 바로가기

비개발자의 개발 일지

현장 팀장에서 수출 ERP까지 — AI와 함께 시스템을 만든 기록

시리즈 보기
php

jQuery Mobile 뒤로가기 버튼 — data-add-back-btn 완전 정리

by 왕진 2026. 6. 22.
반응형

 

 

Web Development · jQuery Mobile

jQuery Mobile 뒤로가기 버튼
data-add-back-btn 완전 정리

한 파일 안의 멀티 페이지와 자동 뒤로가기 버튼
시작 오늘 분석할 코드

jQuery Mobile에서 한 HTML 파일 안에 여러 페이지를 만들고 그 사이를 이동하는 코드다. data-role="page"가 핵심이고, data-add-back-btn="true" 한 줄로 헤더 좌측에 자동 "Back" 버튼이 생긴다.

<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <meta name="viewport" content="width=device-width, initial-scale=1"/> <link rel="stylesheet" href="...jquery.mobile-1.4.5.min.css"/> <script src="...jquery-1.11.1.min.js"></script> <script src="...jquery.mobile-1.4.5.min.js"></script> </head> <body> <!-- 페이지 1 --> <div data-role="page" id="page1"> <div data-role="header"> <a href="#page1">홈</a> <h1>페이지제목</h1> <a href="#page2">페이지2</a> </div> <div data-role="content"> <p>content영역</p> <h1>첫번째 페이지</h1> </div> <div data-role="footer"> <h4>페이지꼬리말</h4> </div> </div> <!-- 페이지 2 — 자동 Back 버튼 --> <div data-role="page" id="page2"> <div data-role="header" data-add-back-btn="true"> <h1>페이지제목</h1> </div> </div> </body> </html>
실제 동작 미리보기
홈 페이지제목 페이지2

content영역

첫번째 페이지

페이지꼬리말
page1 (시작 화면)
◀ Back 페이지제목
(빈 본문)
page2 (자동 back 버튼)
용어 핵심 키워드
CDN외부 서버에서 라이브러리·이미지를 받아오는 콘텐츠 전송 네트워크
data-role="page"jQuery Mobile에서 한 화면 단위 (div 하나 = 한 페이지)
id="page1"페이지를 구분하는 식별자 — 링크 대상으로 사용
href="#page2"같은 파일 안의 다른 page id로 이동 (해시 라우팅)
data-add-back-btn"true"이면 헤더 좌측에 자동으로 ◀ Back 버튼 생성
data-role="header"상단 검은 바 — 제목·좌우 버튼 자동 정렬
data-role="content"본문 영역 — 자유롭게 마크업 작성
data-role="footer"하단 영역 — 꼬리말·복사권 표시 등
1 CDN 3줄 — 외부 서버에서 받아오기

jQuery Mobile은 직접 다운로드하지 않고 code.jquery.com이라는 외부 서버에서 그때그때 받아온다. 이렇게 외부에서 받아오는 방식을 CDN(Content Delivery Network)이라고 한다.

※ 왜 CDN을 쓰는가
  • 속도 — 사용자와 가까운 서버가 응답해서 다운로드가 빠름
  • 캐시 재활용 — 다른 사이트에서 이미 jQuery를 받아본 사용자는 우리 사이트에서도 캐시 사용 → 재다운로드 없음
  • 장애 분리 — 우리 서버가 죽어도 라이브러리는 살아있음 (반대도 가능)
  • 이미지 서버도 같은 원리 — 큰 이미지를 우리 서버에 두면 트래픽이 폭주, 별도 이미지 CDN을 쓰면 부하가 분산됨
⚠ http vs https — 원본 코드는 http://인데 요즘 브라우저는 mixed content 차단으로 막힐 수 있다. 실제 적용 시 https://로 바꾸는 게 맞다.
2 한 파일에 여러 페이지 — data-role="page"

jQuery Mobile의 강력한 특징은 HTML 파일 하나에 여러 페이지를 담을 수 있다는 점이다. 일반 웹은 페이지마다 별도 .html 파일이 필요하지만, 모바일에서는 페이지 전환을 부드럽게 하기 위해 한 파일 안에 여러 data-role="page" div를 둔다.

<div data-role="page" id="page1"> ... <div data-role="page" id="page2"> ...
⚙ jQuery Mobile의 동작 — 처음 로드 시 맨 처음 page만 화면에 보임. 나머지는 숨겨져 있다가 링크가 클릭되면 슬라이드 애니메이션으로 등장한다.
구성 역할 비유
data-role="page" 한 화면 단위 책의 한 페이지
id="page1" 페이지 식별자 책의 페이지 번호
data-role="header" 상단 영역 (제목·버튼) 책 페이지 머리말
data-role="content" 본문 본문 내용
data-role="footer" 하단 영역 각주·꼬리말
3 페이지 사이 이동 — href="#page2"

한 파일 안의 페이지로 이동하려면 <a href="#대상id"> 형태로 작성한다. 샵(#)은 "같은 페이지 안의 어떤 위치"를 가리키는 앵커 표시인데, jQuery Mobile은 이를 페이지 전환 명령으로 해석해서 슬라이드 애니메이션을 자동 실행한다.

<a href="#page1">홈</a> // 자기자신 (page1) 으로 — 헤더에 두면 홈 버튼처럼 동작 <a href="#page2">페이지2</a> // 다음 페이지로 이동
일반 HTML의 #앵커
같은 페이지 안의 특정 위치로 스크롤 이동한다 (예: 목차 클릭 시 해당 단락으로).
jQuery Mobile의 #page
같은 파일 안의 다른 페이지로 슬라이드 전환한다 (이전 페이지는 사라지고 새 페이지가 등장).
※ 헤더의 좌·우 버튼 자동 배치
  • 헤더 안에 <a>가 1개면 왼쪽에 배치
  • 2개면 첫 번째는 왼쪽, 두 번째는 오른쪽
  • 가운데에는 <h1> 제목이 자동 정렬

 

반응형

 

4 data-add-back-btn — 자동 Back 버튼

page2의 헤더에 한 줄만 추가하면 좌측에 ◀ Back 버튼이 자동 생성된다. 클릭하면 직전 페이지로 슬라이드 역방향으로 돌아간다.

<div data-role="header" data-add-back-btn="true"> <h1>페이지제목</h1> </div>
📌 왜 편한가 — 직접 <a href="#page1">뒤로</a>를 만들면 어느 페이지에서 왔는지 일일이 추적해야 한다. data-add-back-btn은 브라우저의 History를 따라가서 직전 페이지로 자동 복귀하므로 어디서 왔든 정확히 돌아간다.
속성 값 결과
data-add-back-btn="true" 좌측에 자동 Back 버튼 생성
data-add-back-btn="false" 또는 생략 버튼 없음 (기본값)
data-back-btn-text="이전" 버튼 글씨 변경 (기본 "Back")
5 페이지 전환 흐름
초기 화면 : page1 표시 (page2는 DOM에 있지만 숨김) ┌─────────────────────────────┐ │ [홈] 페이지제목 [페이지2] │ │ content영역 │ │ 첫번째 페이지 │ │ ─────────────────────────── │ │ 페이지꼬리말 │ └─────────────────────────────┘ [페이지2] 클릭 → 슬라이드 애니메이션 → page2 등장 ┌─────────────────────────────┐ │ [◀ Back] 페이지제목 │ │ │ └─────────────────────────────┘ [◀ Back] 클릭 → 슬라이드 역방향 → page1 복귀
6 자주 하는 실수
실수 증상 해결
id 중복 (page1이 두 개) 전환이 엉뚱한 페이지로 감 모든 page의 id는 유일해야 함
data-role="page" 누락 jQuery Mobile이 인식 못함 — 일반 div로 표시 각 화면 단위 div에 반드시 명시
스크립트 로딩 순서 잘못 jQuery Mobile이 동작 안 함 jquery → jquery.mobile 순서로
http:// CDN 사용 https 사이트에서 차단 (mixed content) https://로 변경
back-btn 직접 만든 후 추적 어디서 왔는지 못 따라감 data-add-back-btn="true"에 맡김
7 참고 — 현대식 대안

jQuery Mobile은 2021년 EOL(공식 지원 종료)이다. 같은 "한 파일/여러 화면" 패턴은 오늘날 SPA 프레임워크가 대신한다.

jQuery Mobile (2014)
  • 속성만 붙이면 끝
  • data-role, #page 라우팅
  • 2021년 EOL
React Router / Vue Router
  • JS 컴포넌트 기반
  • <Route path="..."> 라우팅
  • 현재 표준

핵심 한 줄 요약

data-role="page"한 div = 한 화면 (멀티 페이지의 단위)
id + href="#id"같은 파일 안에서 페이지 전환 (해시 라우팅)
data-add-back-btntrue 한 줄로 헤더 좌측에 자동 Back 버튼
CDN 3줄jquery → jquery.mobile.css → jquery.mobile.js 순서
헤더 a 태그 위치1개=좌, 2개=좌·우, 가운데=h1
현대 대안React/Vue Router (jQuery Mobile은 EOL)

Tags

#jQuery-Mobile #data-add-back-btn #data-role #page #멀티페이지 #해시라우팅 #CDN #뒤로가기 #헤더 #모바일웹 #jQuery #JS #CSS #HTML #웹개발 #티스토리
▼ 티스토리 태그 입력란 복사용
jQuery-Mobile, data-add-back-btn, data-role, page, 멀티페이지, 해시라우팅, CDN, 뒤로가기, 헤더, 모바일웹, jQuery, JS, CSS, HTML, 웹개발, 티스토리
반응형

'php' 카테고리의 다른 글

솔로의 식탁 — 시맨틱 레이아웃 + 외부 CSS 완전 정리  (0) 2026.06.22
jQuery Mobile navbar · fullscreen · data-icon 완전 정리  (0) 2026.06.22
미디어쿼리 3단계 카드 레이아웃 — 모바일·태블릿·데스크톱 완전 정리  (0) 2026.06.22
미디어쿼리 orientation — 가로/세로 모드 감지 완전 정리  (0) 2026.06.22
미디어쿼리 — 해상도에 따라 다른 배경 이미지 보내기 완전 정리  (0) 2026.06.22

관련글

댓글

티스토리툴바