jQuery Mobile 썸네일 리스트 — li 안 img 좌측 이미지 완전 정리

 

 

Web Development · jQuery Mobile

jQuery Mobile 썸네일 리스트
li 안 img → 좌측 자동 정렬 완전 정리

앨범·상품·연락처 같이 이미지가 함께 있는 메뉴 리스트

시작 오늘 분석할 코드

li 안에 <img>를 두면 jQuery Mobile이 자동으로 좌측에 80px 크기의 썸네일로 배치한다. 텍스트는 그 우측에 자동 정렬된다.

<ul data-role="listview"> <li><a href="#"><img src="listimg.png">리스트1</a></li> <li><a href="#"><img src="listimg.png">리스트2</a></li> <li><a href="#"><img src="listimg.png">리스트3</a></li> <li><a href="#"><img src="listimg.png">리스트4</a></li> </ul>

실제 출력

 

리스트1

 

리스트2

 

리스트3

 

리스트4

---

용어 핵심 키워드

li 안 imgjQM이 좌측 80px 썸네일로 자동 배치

자동 사이즈img는 너비·높이 80px이 기본값 — 정사각형

ui-li-icon (대안)img에 이 클래스를 주면 더 작은 16x16 아이콘으로

활용앨범 커버, 상품 사진, 프로필 사진

---

1 jQM의 자동 처리

li 안의 첫 번째 img를 jQM이 발견하면 다음을 자동 적용한다.

• 너비 80px, 높이 80px 강제
• li 좌측에 부착 (절대 위치 아닌 자연스러운 정렬)
• li 좌측 padding을 80px 정도로 늘려 텍스트와 겹치지 않게
• 모서리 약간 둥글게 (li가 첫·마지막일 때 모서리 따라감)

---

2 더 작은 아이콘이 필요할 때

80px이 너무 크다면 img에 class="ui-li-icon"을 주면 된다. 이러면 16x16 픽셀 작은 아이콘으로 바뀐다 — 메뉴 좌측의 작은 표시 아이콘 용도다.

---

3 활용 시나리오

• 앨범/플레이리스트 — 좌측 앨범 커버 + 곡명
• 상품 카탈로그 — 좌측 상품 사진 + 이름·가격
• 주소록 — 좌측 프로필 사진 + 이름
• 채팅 목록 — 좌측 아바타 + 닉네임·미리보기

---

 

반응형

 

4 다중 줄 정보와 결합

multiline-listview에서 본 h3 + p 패턴과 결합하면 "좌측 사진 + 우측 제목/설명/날짜" 같은 풍부한 정보 카드를 만들 수 있다.

📌 실용 패턴 — img + h3 + p + ui-li-aside + ui-li-count의 조합으로 한 li에 사진·제목·설명·날짜·알림수까지 모두 담을 수 있다. 이게 모바일 앱의 "리스트 셀" 표준 형태다.

---

5 자주 하는 실수

• img 너비·높이를 인라인 스타일로 강제 변경 → jQM 자동 정렬 깨짐
• img에 alt 속성 누락 → 이미지 로드 실패 시 빈 자리, 접근성 떨어짐
• 이미지가 너무 커서 로드 느림 → 80px용 작은 이미지로 별도 만들기 (서버에서 리사이즈)
• img가 li의 첫 자식이 아닌 위치 → 자동 좌측 정렬 안 될 수 있음

---

핵심 한 줄 요약

li 안 img자동 좌측 80x80 썸네일

ui-li-icon작은 16x16 아이콘으로 (대안)

활용앨범 / 상품 / 주소록 / 채팅 목록

다중 줄과 결합img + h3 + p = 모바일 리스트 셀 표준

Tags

#jQuery-Mobile #listview #thumbnail #썸네일 #ui-li-icon #ui-li-thumb #li #img #모바일리스트 #모바일웹 #jQuery #CSS #HTML #웹개발 #티스토리

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

jQuery-Mobile, listview, thumbnail, 썸네일, ui-li-icon, ui-li-thumb, li, img, h3, 모바일리스트, 모바일웹, jQuery, CSS, HTML, 웹개발, 티스토리