jQuery Mobile navbar · fullscreen · data-icon 완전 정리

 

 

Web Development · jQuery Mobile

jQuery Mobile
navbar · fullscreen · data-icon 완전 정리

3페이지 탭 네비게이션 + 고정 헤더/푸터 + 풀스크린 모드

시작 오늘 분석할 코드

이 코드는 jQuery Mobile에서 3개의 page를 탭 네비게이션으로 연결하고, 헤더와 푸터를 스크롤해도 고정시키며, 일부 페이지에서는 풀스크린 모드까지 지원하는 구조다. navbar·data-icon·data-position·data-fullscreen이 핵심이다.

<div data-role="page" id="page1"> <div data-role="header" data-position="fixed"> <h1>페이지 제목</h1> <div data-role="navbar"> <ul> <li><a href="#page1" class="ui-btn-active ui-state-persist">page1</a></li> <li><a href="#page2">page2</a></li> <li><a href="#page3">page3</a></li> </ul> </div> </div> <div data-role="content"> ... </div> <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> </div> <!-- page2: data-direction="reverse" 사용 --> <!-- page3: header/footer에 data-fullscreen="true" -->

실제 출력 미리보기

페이지 제목

page1page2page3

content영역

첫번째 페이지

+추가−삭제✓확인

page1

페이지 제목

page1page2page3

content영역

두번째 페이지

+추가−삭제✓확인

page2

페이지 제목

page1page2page3

content영역

세번째 페이지

+추가−삭제✓확인

page3 (fullscreen)

---

용어 핵심 키워드

data-role="navbar"탭 형태의 네비게이션 바 — 안의 ul·li가 자동 가로 분할

data-position="fixed"스크롤해도 헤더/푸터가 화면에 고정

data-id같은 id를 가진 푸터들은 페이지 전환 시 동일 푸터로 인식 (깜박임 방지)

data-fullscreen화면 탭 시 헤더/푸터 토글 — 본문이 화면 전체 차지

data-icon버튼에 아이콘 부착 (plus, minus, check 등 내장)

ui-btn-active현재 활성화된 버튼 (시각적으로 강조)

ui-state-persist페이지 전환 후에도 active 상태 유지

data-direction="reverse"슬라이드 애니메이션 역방향 (뒤로가기 느낌)

---

1 navbar — 탭 네비게이션

data-role="navbar"를 div에 붙이고 안에 <ul><li>를 넣으면, jQuery Mobile이 자동으로 li 개수만큼 가로 균등 분할해서 탭처럼 만들어준다. 5개 이상이면 줄바꿈이 일어난다.

<div data-role="navbar"> <ul> <li><a href="#page1">page1</a></li> <li><a href="#page2">page2</a></li> <li><a href="#page3">page3</a></li> </ul> </div>

⚙ li 개수와 폭 — 1개=100%, 2개=각 50%, 3개=각 33.33%, 4개=각 25%, 5개부터는 첫 줄 4개 + 다음 줄로 자동 줄바꿈된다.

---

2 활성화 버튼 — ui-btn-active · ui-state-persist

현재 어느 페이지에 있는지를 사용자에게 알려주려면 해당 탭을 강조해야 한다. jQuery Mobile은 ui-btn-active 클래스로 강조 색을, ui-state-persist 클래스로 페이지 전환 후에도 그 상태가 유지되도록 한다.

ui-btn-active만

처음에는 활성 표시되지만 다른 페이지로 갔다 돌아오면 풀려있을 수 있다.

ui-btn-active + ui-state-persist

페이지 전환 후에도 같은 page를 다시 방문하면 항상 활성 상태로 유지된다.

※ 두 클래스의 차이

• ui-btn-active — "지금 활성 상태" 시각 표시
• ui-state-persist — "페이지 전환 후에도 이 상태를 기억해라"
• 둘 다 같이 써야 진짜 탭처럼 동작한다

---

3 고정 헤더/푸터 — data-position="fixed"

본문이 길어 스크롤이 생겨도 헤더와 푸터가 화면에 붙어 따라온다. 모바일 앱의 표준 UX다.

<div data-role="header" data-position="fixed"> ... <div data-role="footer" data-position="fixed"> ...

⚙ 내부적으로 CSS의 position: fixed를 적용한다. 화면 탭하면 일시적으로 사라졌다가 다시 나타나는 동작도 함께 따라온다.

---

 

반응형

 

4 data-id — 푸터 깜박임 방지

page1, page2, page3에 똑같은 푸터 영역이 들어 있는 경우, 페이지를 넘길 때마다 푸터가 사라졌다 다시 나타나면 화면이 깜박인다. 푸터에 같은 data-id="footerid1"을 주면 jQuery Mobile이 "이건 같은 푸터다"라고 인식하고, 페이지가 전환되어도 푸터는 그대로 유지한다.

<div data-role="footer" data-position="fixed" data-id="footerid1">

📌 UX 효과 — 본문만 부드럽게 슬라이드되고 푸터는 그대로. 사용자에게 "한 앱 안에서 화면을 옮긴다"는 느낌을 준다.

---

5 data-icon — 버튼 아이콘

네비바 버튼 위에 작은 아이콘을 자동 배치한다. jQuery Mobile에는 수십 개의 내장 아이콘이 있고, 키워드만 넣으면 된다.

<a href="#" data-icon="plus">추가</a> <a href="#" data-icon="minus">삭제</a> <a href="#" data-icon="check">확인</a>

data-icon	모양	data-icon	모양
plus	+	arrow-l	◀
minus	−	arrow-r	▶
check	✓	home	🏠
delete	✕	search	🔍
edit	✎	star	★

⚙ 아이콘 위치는 기본적으로 텍스트 위쪽이다. data-iconpos="left"를 주면 왼쪽에, "right"는 오른쪽에 붙는다.

---

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

일반 링크는 새 페이지가 오른쪽에서 왼쪽으로 슬라이드되며 등장한다. data-direction="reverse"를 주면 왼쪽에서 오른쪽으로 — 즉 "뒤로 가는" 느낌으로 동작한다.

<a href="#page1" data-direction="reverse">page1</a>

⚙ 왜 page2의 navbar에서 page1 링크에 reverse를 쓰는가 — page2에서 page1은 "이전 페이지"다. 자연스러운 뒤로가기 느낌을 주려고 일부러 역방향 애니메이션을 지정한 것이다.

---

7 data-fullscreen — 풀스크린 모드

page3의 헤더와 푸터에 data-fullscreen="true"가 추가되어 있다. 이러면 본문이 화면 전체를 차지하고, 화면을 한 번 탭하면 헤더·푸터가 토글(나타났다 사라졌다)된다. 사진·동영상 보기 같은 몰입형 화면에 쓴다.

<div data-role="header" data-fullscreen="true" data-position="fixed">

일반 fixed

헤더/푸터가 항상 보이고 본문은 그 사이 영역만 사용

fullscreen + fixed

본문이 화면 전체를 덮고, 헤더/푸터는 반투명으로 위에 떠 있음. 탭하면 토글

---

8 3페이지 전환 흐름

[page1] (active=page1, footer=확인 active) ↓ 사용자가 navbar의 [page2] 클릭 ↓ 슬라이드 (오른쪽 → 왼쪽, 정방향) [page2] (active=page2, 같은 footer 그대로 — data-id 효과) ↓ 사용자가 navbar의 [page1] 클릭 (data-direction="reverse") ↓ 슬라이드 (왼쪽 → 오른쪽, 역방향 — 뒤로 가는 느낌) [page1] 복귀 ↓ [page3] 클릭 ↓ 정방향 슬라이드 [page3] (fullscreen — 본문 전체 + 반투명 헤더/푸터, 탭으로 토글)

---

9 자주 하는 실수

실수	증상	해결
navbar 안에 ul·li 빠뜨림	가로 분할이 안 됨	navbar는 반드시 ul > li > a 구조
ui-btn-active만 사용	전환 후 강조 풀림	ui-state-persist 같이 적용
모든 페이지의 footer에 data-id 누락	전환 시 푸터 깜박임	같은 영역엔 같은 data-id 부여
data-fullscreen만 줌 (fixed 없음)	풀스크린 토글 안 됨	data-position="fixed"와 함께 사용
data-icon 키워드 오타	아이콘 없이 텍스트만 보임	공식 아이콘 이름 확인 (plus/minus/check 등)
li가 5개 이상이고 디자인 깨짐	의도 안 한 줄바꿈	4개 이하로 정리하거나 별도 메뉴로 분리

---

핵심 한 줄 요약

data-role="navbar"ul·li 자동 가로 분할 — 탭 네비게이션

ui-btn-active + persist현재 페이지 강조 + 전환 후에도 유지

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

data-id (footer)동일 푸터 인식 → 페이지 전환 시 깜박임 방지

data-iconplus/minus/check 등 내장 아이콘 — 키워드만으로 부착

data-direction="reverse"슬라이드 역방향 — 뒤로가기 느낌

data-fullscreen="true"본문이 화면 전체, 헤더/푸터는 반투명 토글

Tags

#jQuery-Mobile #navbar #data-position #data-fullscreen #data-icon #ui-btn-active #data-id #data-direction #data-role #탭네비게이션 #모바일웹 #jQuery #JS #CSS #HTML #웹개발 #티스토리

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

jQuery-Mobile, navbar, data-position, data-fullscreen, data-icon, ui-btn-active, data-id, data-direction, data-role, 탭네비게이션, 모바일웹, jQuery, JS, CSS, HTML, 웹개발, 티스토리