jQuery Mobile 리스트 제목 — data-inset · listdivider · divider-theme 완전 정리

 

 

Web Development · jQuery Mobile

jQuery Mobile 리스트 제목
data-inset · divider-theme="e" 완전 정리

카드형 리스트에 화려한 색의 카테고리 헤더 얹기

시작 오늘 분석할 코드

이 코드는 두 가지 효과를 한꺼번에 적용한다. data-inset="true"로 리스트를 둥근 카드 형태로 만들고, data-divider-theme="e"로 모든 listdivider를 주황색 테마로 통일한다.

<ul data-role="listview" data-inset="true" data-divider-theme="e"> <li data-role="listdivider">박물관 종류</li> <li><a href="#">자연사박물관</a></li> <li><a href="#">등대박물관</a></li> <li><a href="#">공룡박물관</a></li> <li><a href="#">하늘박물관</a></li> </ul>

실제 출력 (inset + 주황 헤더)

• 박물관 종류
• 자연사박물관
• 등대박물관
• 공룡박물관
• 하늘박물관

---

용어 핵심 키워드

data-inset="true"리스트가 좌우 여백 + 둥근 모서리 → 카드처럼 보임

data-divider-themeul에 적용하면 안의 모든 divider에 일괄 테마

e 스와치밝은 주황·노란 계열 — 강조 색

listdivider 제목리스트 그룹의 머리말 (이 코드는 1개만 사용 → 단일 카드의 헤더 역할)

---

1 data-inset — 카드 형태

리스트의 기본은 화면 양 끝에 붙은 풀폭 형태다. data-inset="true"를 붙이면 좌우 여백이 생기고 모서리가 둥글어져 카드처럼 보인다.

data-inset	모양	적합한 위치
(없음) / false	풀폭, 모서리 직각	전체 화면 메뉴 / 메일 받은편지함
true	좌우 여백 + 둥근 모서리	본문 가운데 짧은 리스트 / 설정 그룹

---

2 ul의 data-divider-theme — 일괄 테마

각 divider li에 따로 색을 지정하지 않아도, ul에 한 번만 쓰면 안의 모든 listdivider가 같은 테마로 통일된다. 이 코드는 "e"를 줘서 주황 계열로 만들었다.

📌 e 스와치는 jQuery Mobile 기본에 있는 5가지 스와치 중 하나(a~e). 노란/주황 계열이라 "강조·주목" 용도로 쓰인다.

---

3 카드 + 헤더 = 정보 카드 패턴

이 패턴은 모바일에서 흔히 보는 "제목이 있는 카드형 그룹"이다. iOS 설정 화면, 안드로이드 정보 카드 등 여러 곳에서 같은 시각 패턴을 쓴다.

• 제목 줄 1개 (listdivider) — 그룹의 정체성
• 실제 항목 N개 (li > a) — 클릭 가능한 메뉴
• 전체를 카드로 감쌈 (data-inset)

---

 

반응형

 

4 자주 하는 실수

• data-divider-theme를 li 하나에 적용 → 일괄 적용하려면 ul에 부여
• e 테마가 너무 튀어 본문과 충돌 → 사용 시 본문 색감과 맞추기
• data-inset 없이 헤더만 강조 → 풀폭이라 카드 느낌 안남, 카드처럼 보이려면 inset 함께 사용

---

핵심 한 줄 요약

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

ul의 data-divider-theme안의 모든 divider 일괄 테마

e 스와치주황·노란 강조 색

패턴listdivider 제목 + li 항목 + inset 카드 = 정보 그룹

Tags

#jQuery-Mobile #listview #data-inset #listdivider #data-divider-theme #리스트제목 #카드형리스트 #스와치 #그룹헤더 #모바일웹 #jQuery #CSS #HTML #웹개발 #티스토리

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

jQuery-Mobile, listview, data-inset, listdivider, data-divider-theme, 리스트제목, 카드형리스트, 스와치, 그룹헤더, 모바일웹, jQuery, CSS, HTML, 웹개발, 티스토리