jQuery Mobile 아이콘 버튼 — data-icon · iconpos · data-role="none" 완전 정리

 

 

Web Development · jQuery Mobile

jQuery Mobile 아이콘 버튼
data-icon · iconpos="notext" · data-role="none" 완전 정리

버튼에 아이콘 추가 · 글자 없애기 · 디자인 끄기

시작 오늘 분석할 코드

이 코드는 같은 두 개념(취소/확인)을 7가지 다른 방식으로 보여준다. 핵심은 세 가지 옵션 — data-icon(아이콘 종류), data-iconpos(아이콘 위치), data-role="none"(jQM 디자인 끄기) — 의 조합이다.

<button data-icon="delete" data-inline="true">취소</button> <button data-icon="check">확인</button> <button data-icon="delete" data-iconpos="notext" data-inline="true">취소</button> <button data-icon="check" data-iconpos="notext" data-inline="true">확인</button> <button data-role="none" data-icon="refresh" data-iconpos="notext">새로고침버튼</button> <input type="button" value="검색버튼" data-icon="search" data-iconpos="notext"> <a href="#" data-role="button" data-icon="info" data-iconpos="notext">정보버튼</a>

✕ 취소 ✓ 확인 (전체폭)

✕ ✓ ↻ 🔍 ⓘ

---

용어 핵심 키워드

data-icon버튼의 아이콘 종류 (delete, check, refresh, search, info, gear...)

data-iconpos아이콘 위치 — left(기본), right, top, bottom, notext

notext텍스트는 숨기고 아이콘만 표시 (가장 컴팩트)

data-inline="true"버튼 너비를 글자만큼만 (기본은 풀폭)

data-role="none"jQM 디자인 비활성화 — 원래 HTML 모양 유지

접근성 (a11y)notext여도 텍스트는 DOM에 남아 스크린리더 인식 가능

---

1 data-iconpos — 아이콘 위치 5가지

data-iconpos	모양	용도
(없음) / left	[✓ 확인]	기본 — 가장 자연스러움
right	[확인 ✓]	"다음으로 가기" 같은 화살표 우측 배치
top	[✓ 위 / 확인 아래]	버튼이 클 때, 카드형 디자인
bottom	[확인 위 / ✓ 아래]	네비게이션 푸터 패턴
notext	[✓]	아이콘만 — 가장 컴팩트

---

2 notext의 의미 — 시각만 숨김

data-iconpos="notext"는 화면에서만 글자를 숨기고 DOM에는 그대로 둔다. 이 차이가 중요한데, 스크린 리더(시각장애인용 보조기기)는 DOM의 글자를 읽기 때문이다. 즉 시각적으론 아이콘만 보이지만 접근성은 유지된다.

📌 왜 이런 설계? — 모바일 헤더의 작은 아이콘들을 만들 때 aria-label처럼 별도 속성을 쓸 필요 없이 그냥 글자를 적어두면 자동으로 접근성이 챙겨진다.

---

3 data-role="none" — 디자인을 끄는 비상구

5번 새로고침 버튼은 data-role="none"이 붙어 있다. 이러면 jQuery Mobile이 그 요소를 손대지 않는다 — 버튼 디자인 변환을 건너뛰고 원래의 HTML <button> 모양 그대로 표시한다.

⚠ 주의 — data-role="none"이 있으면 data-icon도 함께 무시된다. 5번 버튼은 결과적으로 평범한 회색 버튼이 되고, refresh 아이콘은 표시되지 않는다.

⚙ 언제 쓰나 — jQM 디자인이 마음에 안 들거나 별도 CSS로 직접 꾸미고 싶을 때, 부분적으로 jQM을 끄는 용도다.

---

 

반응형

 

4 같은 동작, 3가지 마크업 — 6번 비교

3·4·6번 버튼은 모두 "정보 아이콘만"을 보여준다. 하지만 마크업이 다르다.

• 3번 <button data-icon="check"> — HTML5 표준 버튼
• 5번 <input type="button"> — 구식 폼 버튼 (data-role="none"이라 jQM 무시)
• 6번 <a data-role="button"> — 링크형 버튼 (jQM 표준 패턴)

모바일에선 6번 패턴(a 태그)이 가장 자연스럽고 jQM이 가장 잘 처리한다.

---

5 data-inline="true" — 글자만큼 폭

jQuery Mobile 버튼은 기본이 풀폭(부모 영역의 100%)이다. data-inline="true"를 주면 글자·아이콘만큼만 폭을 차지한다.

data-inline	너비
(없음)	풀폭 — 한 줄 전체
true	내용 너비 — 여러 버튼 가로 나열 가능

---

6 자주 하는 실수

• data-iconpos="notext"인데 텍스트도 빼버림 → 스크린 리더 인식 안 됨
• data-icon 키워드 오타 → 빈 자리만 남음
• data-role="none"을 줘놓고 jQM 속성을 추가 → 무시됨
• 여러 inline 버튼인데 data-inline 누락 → 한 줄씩 풀폭으로 따로 표시

---

핵심 한 줄 요약

data-icon아이콘 종류 — delete/check/refresh/search/info/gear 등

data-iconposleft(기본)/right/top/bottom/notext

notext시각만 숨김 — 접근성 유지

data-inline="true"글자만큼 폭 (가로 나열)

data-role="none"jQM 디자인 끄기 — 원본 HTML 그대로

Tags

#jQuery-Mobile #data-icon #data-iconpos #notext #data-inline #data-role-none #아이콘버튼 #icon-only #접근성 #모바일웹 #jQuery #CSS #HTML #웹개발 #티스토리

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

jQuery-Mobile, data-icon, data-iconpos, notext, data-inline, data-role-none, 아이콘버튼, icon-only, 접근성, 모바일웹, jQuery, CSS, HTML, 웹개발, 티스토리