jQuery Mobile 카운트 버블 — ui-li-count · data-count-theme 완전 정리

 

 

Web Development · jQuery Mobile

jQuery Mobile 카운트 버블
ui-li-count · data-count-theme 완전 정리

리스트 우측에 둥근 알림 숫자 · 텍스트 버블 표시

시작 오늘 분석할 코드

이메일 앱·메신저·알림함의 오른쪽에 보이는 둥근 숫자 알림을 jQuery Mobile에서 만드는 방법이다. 리스트 항목 안에 <span class="ui-li-count">를 한 줄 넣으면 된다.

<ul data-role="listview" data-inset="true" data-count-theme="a"> <li><a href="#">리스트1<span class="ui-li-count">5</span></a></li> <li><a href="#">리스트2<span class="ui-li-count">17</span></a></li> <li><a href="#">리스트3<span class="ui-li-count">hot</span></a></li> <li><a href="#">리스트4<span class="ui-li-count">new</span></a></li> </ul>

실제 출력 미리보기

리스트뷰 + 카운트 버블

• 리스트15
• 리스트217
• 리스트3hot
• 리스트4new

---

용어 핵심 키워드

data-role="listview"li 항목들을 모바일 리스트 스타일로 변환

data-inset="true"리스트 좌우에 여백 + 모서리 둥글게 — 카드 형태

ui-li-count우측 카운트 버블 — 숫자나 짧은 글자 둥글게 표시

data-count-theme카운트 버블의 색 테마 (a, b 등)

버블 (bubble)둥근 알약 모양의 작은 표시 영역

알림 카운터읽지 않은 메시지 수, 새 항목 수 등을 시각적으로 표시

---

1 ui-li-count — 카운트 버블 클래스

jQuery Mobile은 li 안에 class="ui-li-count"를 가진 span이 있으면, 자동으로 우측에 둥근 알약 모양으로 떠 있게 만든다. 안에 들어갈 내용은 자유 — 숫자뿐 아니라 "hot", "new" 같은 짧은 라벨도 가능.

<li><a href="#">메일함<span class="ui-li-count">12</span></a></li>

⚙ 왜 span인가 — span은 inline 요소라서 텍스트 흐름 안에 자연스럽게 들어간다. jQM은 이 span을 잡아서 position: absolute로 우측에 띄우고 둥근 배경을 입힌다.

---

2 data-count-theme — 버블 색

리스트 자체의 data-theme과 버블의 테마는 따로 지정할 수 있다. data-count-theme="a"는 리스트는 그대로 두고 버블만 a 테마(밝은 흰색 계열)로 바꾸겠다는 뜻이다.

속성	대상
data-theme (ul에)	리스트 전체 배경/글씨
data-count-theme (ul에)	안의 카운트 버블만
data-divider-theme (ul에)	안의 listdivider만

---

3 data-inset="true" — 카드 형태 리스트

data-inset이 false(기본)면 리스트가 화면 양 끝에 붙어서 표시되고, true면 좌우 여백이 생기며 모서리가 둥글어져 카드처럼 보인다.

※ 언제 inset을 쓰는가

• 본문 가운데 짧은 리스트일 때 — 카드처럼 강조
• 화면 전체를 채우는 메인 메뉴는 inset 없이가 일반적
• iOS 설정 앱의 그룹된 리스트 스타일과 비슷한 느낌

---

 

반응형

 

4 버블 안의 텍스트 — 숫자 vs 라벨

이 코드는 한 ul 안에서 숫자(5, 17)와 글자(hot, new)를 섞어 쓴다. jQuery Mobile은 둘 다 같은 둥근 박스로 표시한다.

⚙ 실용 팁 — 99 이상은 "99+"로 줄여 적는 게 모바일 관행이다. 너무 긴 글자가 들어가면 다른 행보다 li가 길어져 정렬이 깨진다.

---

5 자주 하는 실수

실수	증상	해결
ui-li-count 클래스 누락	그냥 텍스트로 따라붙어 표시	span에 정확한 클래스 명시
span을 a 밖에 둠	버블 위치 깨짐	반드시 a 안에 둘 것
data-count-theme 위치 오류 (li에)	적용 안 됨	ul에 적용
긴 텍스트 ("urgent!!!")	버블이 너무 커져서 행이 깨짐	3~4글자 이내로 (숫자+짧은 라벨)

---

핵심 한 줄 요약

ui-li-countli 안 span에 부여 → 우측 둥근 버블

data-count-theme버블만 따로 색 테마

data-inset="true"카드형 리스트 (좌우 여백 + 둥근 모서리)

버블 내용숫자·짧은 라벨 모두 가능 (3~4글자 권장)

활용 예시메일함, 알림 수, hot/new 표시

Tags

#jQuery-Mobile #ui-li-count #count-bubble #data-count-theme #data-inset #listview #알림 #카운트 #배지 #모바일웹 #jQuery #CSS #HTML #웹개발 #티스토리

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

jQuery-Mobile, ui-li-count, count-bubble, data-count-theme, data-inset, listview, 알림, 카운트, 배지, 모바일웹, jQuery, CSS, HTML, 웹개발, 티스토리