jQuery Mobile 리스트뷰 기본 — data-role="listview" 완전 정리

 

 

Web Development · jQuery Mobile

jQuery Mobile 리스트뷰 기본
data-role="listview" 완전 정리

평범한 ul·li를 모바일 메뉴 리스트로 변환하는 한 속성

시작 오늘 분석할 코드

가장 단순한 형태의 jQuery Mobile 리스트다. 평범한 HTML <ul>에 속성 한 개만 붙이면 모바일 앱에서 보던 메뉴 리스트 모양으로 바뀐다.

<ul data-role="listview"> <li>기본리스트1</li> <li>기본리스트2</li> <li>기본리스트3</li> <li>기본리스트4</li> </ul>

data-role 없음 (일반 ul)

• 기본리스트1
• 기본리스트2
• 기본리스트3
• 기본리스트4

data-role="listview"

• 기본리스트1
• 기본리스트2
• 기본리스트3
• 기본리스트4

---

용어 핵심 키워드

data-role="listview"평범한 ul을 모바일 리스트로 변환

li 자동 변환jQM이 li마다 클래스·테두리·간격 자동 부여

읽기 전용 리스트a 없으면 클릭 불가 — 표시만

클릭 가능 리스트li 안에 a를 두면 우측 화살표 자동 추가

---

 

반응형

 

1 자동 변환되는 것들

jQuery Mobile이 data-role="listview"를 만나면 다음을 자동 처리한다.

• 기본 불릿(•) 제거
• 각 li의 좌우 padding 16px씩 자동
• li마다 아래쪽에 1px 테두리 → 카드처럼 분리
• 모서리는 첫 li와 마지막 li만 둥글게
• 페이지 너비 가득 채움
• 호버/탭 시 색 변화

---

2 a 태그 유무 차이

이 코드는 li 안에 a 태그가 없다. 따라서 표시만 되는 정보 리스트다. 클릭 가능한 메뉴를 만들려면 li를 다음처럼 작성한다.

<li><a href="#">메뉴1</a></li>

📌 a 태그가 있으면 jQM이 자동으로 우측에 화살표(▶)를 추가한다. "이 항목을 누르면 다음 화면으로 갑니다"라는 시각 신호다.

---

3 자주 하는 실수

• data-role을 ol에 적용 — 동작 가능하지만 메뉴는 ul 권장
• li 안에 div나 다른 블록 요소 깊게 중첩 — 자동 변환이 깨질 수 있음
• jquery.mobile JS를 안 불러옴 → data-role 무시되고 일반 리스트로 표시

---

핵심 한 줄 요약

data-role="listview"평범한 ul을 모바일 리스트로 변환

li (그냥)정보 표시 — 클릭 불가

li > a클릭 메뉴 — 우측 ▶ 자동 추가

자동 처리불릿 제거, padding, 구분선, 모서리 둥글기

Tags

#jQuery-Mobile #listview #data-role #ul #li #모바일리스트 #메뉴리스트 #리스트뷰 #모바일웹 #jQuery #CSS #HTML #웹개발 #티스토리

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

jQuery-Mobile, listview, data-role, ul, li, 모바일리스트, 메뉴리스트, 리스트뷰, 모바일웹, jQuery, CSS, HTML, 웹개발, 티스토리