jQuery Mobile 중첩 리스트 — ul 안의 ul 자동 페이지화 완전 정리

 

 

Web Development · jQuery Mobile

jQuery Mobile 중첩 리스트
ul 안의 ul → 자동 페이지화 완전 정리

계층 구조의 메뉴를 한 번 클릭으로 깊은 페이지에 진입

시작 오늘 분석할 코드

li 안에 또 ul이 들어 있다. 이걸 만난 jQuery Mobile은 "이 li를 클릭하면 하위 ul이 별도 화면으로 등장"하도록 자동 변환한다. 즉 코드는 한 ul처럼 보이지만 실제 화면은 여러 페이지로 분리된다.

<ul data-role="listview"> <li>상위리스트 1</li> <li>상위리스트 2 <ul> <li data-icon="info"><a href="#">하위리스트 2.1</a></li> <li data-icon="info"><a href="#">하위리스트 2.2</a></li> <li data-icon="info"><a href="#">하위리스트 2.3</a></li> </ul> </li> <li>상위리스트 3 <ul> <li data-icon="gear"><a href="#">하위리스트 3.1</a></li> ... </ul> </li> </ul>

상위 리스트 (시작 화면)

• 상위리스트 1
• 상위리스트 2
• 상위리스트 3
• 상위리스트 4

"상위리스트 2" 클릭 후 (자동 생성된 하위 페이지)

• ⓘ 하위리스트 2.1
• ⓘ 하위리스트 2.2
• ⓘ 하위리스트 2.3

---

용어 핵심 키워드

중첩 ulli 안에 또 다른 ul — 계층 구조

자동 페이지화jQM이 하위 ul을 별도 페이지로 분리

우측 ▶ 화살표하위 메뉴가 있다는 시각 신호 — 자동 부착

data-icon (li에)하위 항목마다 별도 아이콘 (info, gear 등)

---

 

반응형

 

1 자동 페이지화의 마법

일반 HTML에선 ul 안의 ul은 그냥 들여쓰기된 리스트로 표시된다. jQuery Mobile은 다르게 처리한다. "이 li를 클릭하면 하위 ul만 펼쳐진 새 페이지로 이동"하도록 자동 변환한다.

• 1단계 — 외부 ul만 화면에 표시 (상위 항목들)
• 2단계 — 하위 ul이 있는 항목에는 자동으로 ▶ 화살표
• 3단계 — 클릭 시 슬라이드 → 하위 ul만 보이는 새 페이지
• 4단계 — 헤더에 "Back" 버튼 자동 + 페이지 제목은 부모 li의 텍스트

📌 코드 작성자의 부담 — 별도 page div를 만들 필요가 없다. 그냥 ul을 중첩만 시키면 jQM이 알아서 페이지·전환·뒤로가기까지 다 만든다.

---

2 깊이 제한은 없지만

이론적으로 ul을 무한히 중첩할 수 있다. 하지만 모바일 UX 관점에선 2~3단 깊이까지가 권장이다. 너무 깊으면 사용자가 자기가 어디 있는지 잃기 쉽다.

---

3 자주 하는 실수

• 외부 li에 a 태그를 둠 → 클릭 시 의도 충돌. 외부 li는 텍스트만, 하위로의 진입은 jQM이 자동 처리
• 하위 ul에 별도 data-role="listview" 추가 → 보통 자동으로 적용되므로 중복 — 명시해도 작동은 함
• 너무 많은 단계 중첩 → 사용자 길찾기 어려움

---

핵심 한 줄 요약

li 안의 ul자동 페이지화 — 클릭 시 하위 메뉴 페이지

자동 화살표 + Back개발자가 별도 코드 없이 다 처리됨

외부 li텍스트만 — a 태그 없이 둬도 동작

권장 깊이2~3단 (그 이상은 UX 악화)

Tags

#jQuery-Mobile #listview #nested #중첩리스트 #자동페이지화 #hierarchy #하위메뉴 #자동화살표 #Back버튼 #모바일웹 #jQuery #CSS #HTML #웹개발 #티스토리

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

jQuery-Mobile, listview, nested, 중첩리스트, 자동페이지화, hierarchy, 하위메뉴, 자동화살표, Back버튼, 모바일웹, jQuery, CSS, HTML, 웹개발, 티스토리