jQuery Mobile 다중 줄 리스트 — h3 · p · ui-li-aside 완전 정리

 

 

Web Development · jQuery Mobile

jQuery Mobile 다중 줄 리스트
h3 · p · ui-li-aside 완전 정리

한 li 안에 제목·설명·여러 줄 + 우측 상단 보조 정보

시작 오늘 분석할 코드

한 줄짜리 단순 리스트가 아니라 각 항목 안에 여러 줄의 정보를 담는 패턴이다. 영화 정보·뉴스 카드·메일 미리보기에 자주 사용한다.

<ul data-role="listview"> <li><a href="#"> <p class="ui-li-aside">2014/12/25</p> <h3>겨울왕국</h3> <p>등급: 12세관람가</p> <p>상영시간: <strong>108분</strong></p> <p>줄거리: 언니 ‘엘사’는 모든 것을 얼려버리는 신비로운 힘이...</p> </a></li> </ul>

실제 출력

2014/12/25

겨울왕국

등급: 12세관람가

상영시간: 108분

줄거리: 언니 '엘사'는 모든 것을 얼려버리는 신비로운 힘이 두려워 떠나고...

2014/12/25

겨울왕국

등급: 12세관람가

상영시간: 108분

줄거리: 언니 '엘사'는 모든 것을 얼려버리는 신비로운 힘이 두려워 떠나고...

---

용어 핵심 키워드

li 안 h3항목의 제목 — 가장 굵게 강조

li 안 p항목의 본문 — 작은 글씨로 부가 설명

ui-li-aside우측 상단에 작은 보조 정보 (날짜, 시간 등)

strong (li 안)강조 — 자동으로 굵은 글씨

---

1 한 li 안에 여러 요소 가능

일반 리스트는 li 안에 글자만 들어간다. jQuery Mobile listview는 h3, p, strong, span 등을 li 안에 두면 각 요소를 자동으로 인식해서 적절한 위치·크기로 배치한다.

li 안 요소	jQM의 처리
h1~h3	제목 — 굵고 큰 글씨, 첫 줄에 표시
p	본문 — 작은 글씨, 옅은 색상
strong	본문 안에서만 강조 (굵은 글씨)
p.ui-li-aside	우측 상단 보조 정보
span.ui-li-count	우측 카운트 버블

---

2 ui-li-aside — 우측 보조 정보

p 태그에 class="ui-li-aside"를 주면 그 단락은 li 우측 상단에 작은 글씨로 떠 있게 변환된다. 메일 앱의 "오후 2:30", 영화 카드의 "개봉일" 같은 정보를 표시하기에 적합하다.

⚙ 왜 우측 상단인가 — 메인 정보(제목)는 좌측, 메타 정보(날짜·시간)는 우측이라는 모바일 UI 관습. iOS 메일 앱과 비슷한 레이아웃이다.

---

3 본문 텍스트가 길면

긴 줄거리는 자동으로 줄바꿈되어 다음 줄로 넘어간다. 카드 높이가 늘어나며 li가 그만큼 커진다. 줄바꿈 없이 자르고 싶다면 CSS의 text-overflow: ellipsis를 추가해야 한다.

---

 

반응형

 

4 자주 하는 실수

• li 안의 a를 닫지 않음 → 다음 li까지 클릭 영역에 포함
• p의 ui-li-aside를 잘못된 위치에 두면 우측에 안 떠있을 수 있음 → 모든 형제 요소 중 첫 번째에 두는 게 안전
• 너무 많은 정보를 한 li에 담음 → 화면이 답답해짐, 4~5줄 이상은 비추

---

핵심 한 줄 요약

li 안 h3 + p제목 + 본문 자동 스타일링

ui-li-aside우측 상단 작은 보조 정보 (날짜·시간)

strong본문 안 강조 (자동 굵은 글씨)

활용메일 미리보기, 영화 정보, 뉴스 카드

Tags

#jQuery-Mobile #listview #multiline #h3 #p #ui-li-aside #strong #다중줄리스트 #보조정보 #메일미리보기 #모바일웹 #jQuery #CSS #HTML #웹개발 #티스토리

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

jQuery-Mobile, listview, multiline, h3, p, ui-li-aside, strong, 다중줄리스트, 보조정보, 메일미리보기, 모바일웹, jQuery, CSS, HTML, 웹개발, 티스토리