jQuery Mobile 이미지 버튼 — img·input[type=image] 완전 정리

 

 

Web Development · jQuery Mobile

jQuery Mobile 이미지 버튼
img · input[type=image] · a[data-role] 완전 정리

버튼에 그림을 넣는 4가지 방식과 차이점

시작 오늘 분석할 코드

같은 "이미지가 그려진 버튼"을 4가지 방식으로 만든다. HTML 태그가 다르면 jQuery Mobile의 처리도 다르다는 점을 보여주는 비교 코드다.

<button> <img src="buttonimg.png"> </button> <input type="image" src="buttonimg.png" data-role="button"> <a href="#" data-role="button"> <img src="buttonimg.png"> </a> <a href="#" data-role="button"> <img src="jqmlogo.png"> </a>

 

---

용어 핵심 키워드

<img>이미지를 화면에 그리는 표준 태그

<input type="image">이미지를 폼 제출 버튼으로 — 클릭 좌표가 같이 전송됨

data-role="button"a 태그에만 의미 있음 — 다른 태그는 자체 디자인

버튼 내부 이미지img를 button/a 안에 넣으면 클릭 영역이 이미지

---

1 4가지 방식 비교

방식	처리 결과	용도
<button><img></button>	jQM이 button을 버튼화 — 내부에 이미지가 자리잡음	일반 클릭 버튼
<input type="image">	이미지 자체가 클릭 가능한 폼 버튼 — 클릭 위치도 서버에 전송	폼 제출용 (마우스 좌표 활용 시)
<a><img></a>	jQM이 a를 버튼화 — 모바일 표준 패턴	이미지로 표현된 링크

---

2 input type="image"의 특별한 점

일반 <input type="submit">은 글자만 가능하다. type="image"는 이미지를 그대로 폼 제출 버튼으로 만든다. 게다가 클릭한 픽셀 좌표(x, y)도 함께 폼 데이터로 서버에 전송한다 — 지도에서 클릭 위치를 받는 등 특수 용도가 있었다.

⚠ 요즘은 거의 안 씀 — 좌표가 필요한 경우는 JavaScript로 처리하는 게 표준이다. type="image"는 레거시 호환용으로만 남아 있다.

---

3 권장 패턴 — a + img

jQuery Mobile에서는 <a><img></a>가 가장 자연스럽다. 이유:

• a 태그라서 페이지 이동에 적합 (jQM은 모바일 페이지 전환에 a를 활용)
• data-role="button"으로 jQM 디자인 적용 가능
• 이미지 주변에 자동 padding · 그림자 · 둥근 모서리
• 접근성 — img의 alt 속성으로 이미지 설명 추가 가능

---

 

반응형

 

4 자주 하는 실수

• img에 alt 속성 누락 → 이미지 깨졌을 때 빈 버튼, 스크린 리더가 못 읽음
• 이미지 크기 지정 안 함 → 원본 사이즈로 거대한 버튼 발생
• 버튼 안의 이미지에 외부 padding 줘서 클릭 영역과 차이 발생
• type="image"를 일반 버튼 자리에 사용 → 폼이 의도치 않게 제출됨

---

핵심 한 줄 요약

button + img표준 버튼 + 내부 이미지

input type="image"이미지 자체가 폼 버튼 (좌표 전송)

a[data-role=button] + imgjQM 권장 — 이미지 링크

필수 choresimg alt + 너비 명시

Tags

#jQuery-Mobile #image-button #button #input-image #img #alt #data-role-button #이미지버튼 #이미지링크 #모바일웹 #jQuery #CSS #HTML #웹개발 #티스토리

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

jQuery-Mobile, image-button, button, input-image, img, alt, data-role-button, 이미지버튼, 이미지링크, 모바일웹, jQuery, CSS, HTML, 웹개발, 티스토리