jQuery Mobile 버튼 3종류 — a · button · input 완전 정리

 

 

Web Development · jQuery Mobile

jQuery Mobile 버튼 3종류
a · button · input 완전 정리

왜 똑같은 버튼을 만드는 방법이 세 가지나 있는가

시작 오늘 분석할 코드

jQuery Mobile에서 버튼을 만드는 3가지 표준 방법이다. 모양은 같아 보이지만 의미와 동작이 다르고, 상황에 따라 골라 써야 한다.

<a data-role="button" href="#">(1) a태그 버튼</a> <button>(2) button태그 버튼</button> <input type="button" value="(3) input태그 버튼">

실제 출력 미리보기

(1) a태그 버튼

(2) button태그 버튼

(3) input태그 버튼

---

용어 핵심 키워드

a 태그하이퍼링크 — 다른 위치로 이동하는 본질

button 태그HTML5 표준 버튼 — 클릭 동작을 위한 요소

input[type=button]구식 폼 버튼 — 텍스트는 value 속성에 작성

data-role="button"a 태그를 jQuery Mobile 버튼 디자인으로 변환

---

1 세 가지 버튼 비교

<a> + data-role

본질: 링크
용도: 다른 페이지/섹션 이동
jQM 권장: ★★★
특수 동작: href="#page2"로 페이지 전환

<button>

본질: 버튼
용도: 폼 제출, 클릭 동작
jQM 권장: ★★
특수 동작: form 안에서 자동 submit

<input type=button>

본질: 폼 입력 요소
용도: 구식 폼 호환
jQM 권장: ★
특수 동작: value="..." 안에 텍스트

---

2 어느 걸 언제 쓰는가

상황	추천	이유
다른 페이지로 이동	<a data-role="button">	본질이 링크 — SEO·접근성 좋음
폼 제출 (Submit)	<button type="submit">	버튼 클릭=폼 전송이 자동 연결
JavaScript로 제어할 동작	<button>	HTML5 표준 — 가장 의미가 명확
구식 폼·legacy 호환	<input type="button">	아주 오래된 시스템 호환용 — 신규 코드에서 비추천

---

3 input 버튼은 왜 value에 텍스트?

<input>은 닫는 태그가 없는 요소다. 그래서 안에 텍스트를 넣을 수 없고, value 속성에 표시할 글자를 적는다. 이 차이는 다른 두 방식과 큰 차이점이다.

⚠ input 버튼의 단점 — 아이콘이나 다른 요소를 버튼 안에 넣을 수 없다. 모바일에서 이미지 + 텍스트 버튼을 만들려면 <button>이나 <a>를 써야 한다.

---

 

반응형

 

4 jQuery Mobile은 왜 모두 같게 보이게 만드는가

본질이 다른 세 요소를 jQuery Mobile은 모두 같은 디자인의 둥근 박스로 통일한다. 이유는 사용자 경험 일관성이다. 사용자는 "버튼처럼 생긴 것은 누르면 동작한다"라고 학습한다. 코드 작성자가 의미 따라 골라쓰더라도, 화면에서는 다 같은 버튼으로 보여야 한다.

※ 자동 변환 흐름

• 페이지 로드 → jQuery Mobile JS가 DOM 스캔
• data-role="button"이 있는 a, 모든 button, 모든 input[type=button|submit] 발견
• 각 요소를 wrapper로 감싸고 jQM 버튼 클래스 부여
• 최종 HTML은 <span class="ui-btn ..."> 같은 구조로 변환됨

---

5 자주 하는 실수

실수	증상	해결
a 태그에 data-role="button" 빠뜨림	그냥 글씨 링크로 표시	버튼화 하려면 반드시 명시
input 버튼 안에 글자 넣음	표시 안 됨	반드시 value="..."에 작성
button 태그에 type 생략	form 안에서 자동 submit 발생	JS만 호출하려면 type="button" 명시
섞어 쓰면서 일관성 깨짐	크기·여백 미묘하게 다름	한 페이지 안에서는 한 종류로 통일

---

핵심 한 줄 요약

a + data-role=button링크형 버튼 — 페이지 이동 (jQM 표준)

<button>HTML5 표준 — 폼 제출·JS 동작

input[type=button]구식 — 텍스트는 value에, 신규엔 비추

의미 != 모양코드는 의미 따라, 화면은 jQM이 통일

Tags

#jQuery-Mobile #버튼 #a태그 #button태그 #input-button #data-role #폼버튼 #링크버튼 #HTML5 #모바일웹 #jQuery #CSS #HTML #웹개발 #티스토리

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

jQuery-Mobile, 버튼, a태그, button태그, input-button, data-role, 폼버튼, 링크버튼, HTML5, 시맨틱, 모바일웹, jQuery, JS, CSS, HTML, 웹개발, 티스토리