jQuery Mobile data-theme — 버튼 색상 테마 완전 정리

 

 

Web Development · jQuery Mobile

jQuery Mobile data-theme
버튼 색상 테마 완전 정리

속성 한 줄로 흰 버튼·검은 버튼 자유롭게 바꾸기

시작 오늘 분석할 코드

jQuery Mobile은 a, b 같은 한 글자 키워드로 색 테마를 바꿀 수 있다. 버튼 종류(button·input·a)가 무엇이든 같은 data-theme으로 일관되게 적용된다.

<button>버튼1(기본)</button> <button data-theme="a">버튼2(a-테마)</button> <input type="button" value="버튼3(b-테마)" data-theme="b"> <a href="#" data-role="button" data-theme="b">버튼4(b-테마)</a>

실제 출력 미리보기

버튼1

기본

버튼2

data-theme="a"

버튼3

data-theme="b"

버튼4

data-theme="b"

---

용어 핵심 키워드

data-themejQuery Mobile의 색상 테마 — 한 글자 (a~e) 키워드로 지정

스와치 (swatch)한 글자가 가리키는 색 조합 — 배경·글씨·테두리 묶음

a 스와치밝은 회색·흰색 — 깔끔한 기본 스타일

b 스와치검은 배경·흰 글씨 — 강조용 / 다크 테마

---

1 data-theme — 한 글자로 색 변경

jQuery Mobile은 사전에 정의된 색 묶음(스와치)에 알파벳 한 글자씩 이름을 부여했다. a, b를 기본 제공하고, 테마를 직접 만들면 c, d, e도 쓸 수 있다.

키워드	색상 분위기	주된 용도
(없음)	밝은 회색	기본 — 가장 평범한 버튼
a	흰색 / 밝은 회색	깔끔한 기본형 — 본문 대부분
b	검정 / 진한 회색	강조 / 다크 모드 / 헤더

---

2 4가지 버튼이 모두 같은 속성을 받는다

이 코드의 핵심은 버튼을 만드는 4가지 방식이 모두 똑같은 data-theme 속성으로 색이 바뀐다는 점이다.

방식	예시	특징
<button>	<button>클릭</button>	HTML 표준 버튼
<input type="button">	<input type="button" value="클릭">	구식 폼 버튼
<a data-role="button">	<a href="#" data-role="button">클릭</a>	링크형 버튼 — 모바일 표준

⚙ 왜 a 태그를 버튼처럼? — 모바일은 "버튼=다른 화면으로 이동"인 경우가 많아 a 태그가 의미상 더 정확하다. 또 jQuery Mobile은 a를 우선적으로 디자인 처리한다.

---

3 컨테이너에 테마를 주면 자식이 상속

data-role="page"나 data-role="header"같은 부모 요소에 data-theme="b"를 주면, 그 안의 모든 자식이 검은 테마로 통일된다. 자식이 자기 data-theme을 명시하면 그 값이 우선이다.

※ 실무 팁

• 전체 페이지를 다크로: <div data-role="page" data-theme="b">
• 위험한 동작 버튼만 빨간색으로 따로: 별도 스와치를 정의해서 data-theme="r"
• jQuery Mobile ThemeRoller(웹툴)에서 색 직접 만들 수 있음 — 결과 CSS만 가져와 붙여넣기

---

 

반응형

 

4 자주 하는 실수

실수	증상	해결
존재하지 않는 키워드 ("red" 등)	기본 테마로 표시	a/b 또는 직접 만든 c/d/e만 사용
대문자 사용 ("A")	jQuery Mobile은 소문자만 인식	소문자로
a 태그에 data-role="button" 빠뜨림	일반 링크 글씨로 표시	a를 버튼화하려면 반드시 명시
page 전체에 데이터테마 + 자식 충돌 의도	일부만 다른 색	자식에 명시한 테마가 우선임을 의식

---

핵심 한 줄 요약

data-theme="a"밝은 흰색 계열 — 기본형

data-theme="b"검은 계열 — 강조 / 다크 / 헤더

스와치 키워드한 글자로 색 조합 전체를 가리킴

상속부모에 주면 자식 상속, 자식 명시값이 우선

3가지 버튼button / input[type=button] / a[data-role=button] 동일 속성으로 통일

Tags

#jQuery-Mobile #data-theme #스와치 #버튼테마 #색상 #다크모드 #라이트 #상속 #ThemeRoller #모바일웹 #jQuery #CSS #HTML #웹개발 #티스토리

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

jQuery-Mobile, data-theme, 스와치, 버튼테마, 색상, 다크모드, 라이트, 상속, ThemeRoller, 모바일웹, jQuery, CSS, HTML, 웹개발, 티스토리