jQuery Mobile 분할 리스트 — 한 li에 a 두 개 완전 정리

 

 

Web Development · jQuery Mobile

jQuery Mobile 분할 리스트
한 li에 a 두 개 완전 정리

한 항목에 두 가지 동작 — 본문 클릭과 우측 보조 동작 분리

시작 오늘 분석할 코드

각 li 안에 a 태그가 두 개씩 있다. jQuery Mobile은 이걸 보면 자동으로 좌측은 본문 영역(전체 항목 클릭), 우측은 별도의 작은 버튼으로 분할한다. iPhone 메일 앱의 "메일 본문 / 답장 버튼" 같은 패턴이다.

<ul data-role="listview"> <li><a href="#">리스트1</a><a href="#">상세내용</a></li> <li><a href="#">리스트2</a><a href="#">상세내용</a></li> <li><a href="#">리스트3</a><a href="#">상세내용</a></li> <li><a href="#">리스트4</a><a href="#">상세내용</a></li> </ul>

실제 출력

리스트1

▶

리스트2

▶

리스트3

▶

리스트4

▶

---

용어 핵심 키워드

li 안 a 두 개jQM이 자동 분할 — 좌측 본문 + 우측 보조 버튼

첫 번째 ali 본문 — 큰 클릭 영역

두 번째 a우측 작은 버튼 — 보조 동작 (상세보기·삭제 등)

자동 ▶ 화살표두 번째 a에 기본 화살표 아이콘 표시

---

1 자동 분할의 마법

같은 li 안에 <a>가 두 개라는 것만으로 jQM은 다음을 자동 처리한다.

• li를 좌·우로 분할 (좌측이 80% 넓음)
• 좌측: 첫 번째 a → 본문(텍스트) + 큰 클릭 영역
• 우측: 두 번째 a → 작은 버튼 영역 (자동 ▶ 화살표 부착)
• 가운데 세로 구분선 자동 추가

---

2 활용 시나리오

• 메일 리스트 — 좌측 클릭 = 메일 본문, 우측 = 답장
• 음악 앱 — 좌측 = 재생, 우측 = 좋아요
• 주소록 — 좌측 = 상세 보기, 우측 = 통화
• 리스트의 부가 동작 패턴이라면 어디든 적합

---

3 보조 버튼의 텍스트는?

두 번째 a의 텍스트는 화면에 보이지 않을 수도 있다. 아이콘만 표시되며 텍스트는 title 속성처럼 접근성용으로 사용된다 (스크린 리더가 읽음). 이 코드의 "상세내용"이 그 역할이다.

📌 접근성 챙기기 — 보조 버튼이 명확히 무엇을 하는지 텍스트로 적어두면 스크린 리더가 정확히 안내한다. "상세내용", "삭제", "답장" 등 동사/명사를 명확히 적자.

---

 

반응형

 

4 자주 하는 실수

• li 안에 a 3개 이상 → jQM이 첫 두 개만 인식, 나머지 무시
• 두 번째 a의 href 누락 → 클릭이 안 됨
• li 안에 a + button 혼합 → 동작이 일관되지 않음

---

핵심 한 줄 요약

li 안 a 두 개자동 좌·우 분할 (큰 본문 + 작은 보조 버튼)

첫 a본문 — 큰 클릭 영역, 텍스트 표시

두 번째 a우측 보조 버튼 — 자동 ▶ 화살표

활용메일/음악/주소록의 부가 동작 패턴

Tags

#jQuery-Mobile #listview #split-list #분할리스트 #ui-li-link-alt #li #a태그두개 #부가동작 #모바일웹 #jQuery #CSS #HTML #웹개발 #티스토리

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

jQuery-Mobile, listview, split-list, 분할리스트, ui-li-link-alt, ui-li-link, li, a두개, 부가동작, 모바일웹, jQuery, CSS, HTML, 웹개발, 티스토리