[JQueryMobile] theme

테마

테마는 색을 눈으로 직접 볼수있게 직접 실행해서 보는것이 좋다.
따라서 테마에 대한 개념을 설명하고 예시로 정리하고자 한다.
다른것들도 그렇지만 테마는 보다 더 직접 실행 시켜보는것을 추천한다.

테마란 영역별,컴포넌트에 다양한 색깔을 부여한다.
data-theme(속성명)=a~e 을 사용한다.(a~e는 각각 다른 효과)
1.4.5버전에서는 색깔이 명확하지 않아서 이전 버전인 1.3.2버전을 적용하는것이 좋다.

1.4.5버전보단 그 이전 버전인 1.3.2버전을 연곃하는것이 좋다

<link href="../mobile/jquery.mobile-1.3.2.min.css" rel="stylesheet">

---

header에 테마 적용

data-theme="a"~"c"는 각각 효과가 다 다르다

<div data-role="header" data-theme="a">
		<h1>Bar A</h1>
	</div>
	
	<div data-role="header" data-theme="b">
		<h1>Bar B</h1>
	</div>
	
	<div data-role="header" data-theme="c">
		<h1>Bar C</h1>
	</div>
	
	<div data-role="header" data-theme="d">
		<h1>Bar D</h1>
	</div>
	
	<div data-role="header" data-theme="e">
		<h1>Bar E</h1>
	</div>

---

content에 테마 적용

data-theme="a"~"c"는 각각 효과가 다 다르다
영역별로 색깔의 진함을 표시 가능

<div data-role="content" data-theme="a">
		Content A
	</div>
	
	<div data-role="content" data-theme="b">
		Content B
	</div>
	
	<div data-role="content" data-theme="c">
		Content C
	</div>
	
	<div data-role="content" data-theme="d">
		Content D
	</div>
	
	<div data-role="content" data-theme="e">
		Content E
	</div>

---

footer에 테마 적용

header와 footer의 색깔은 유사하다.
footer에 버튼들을 만들어서 버튼에 테마를 적용하고자 한다.

<div data-role="footer">
		<h1>화면 하단</h1>  <!-- 버튼에 테마적용 -->
		<a href="#" data-role="button" data-theme="a">버튼A</a>
		<a href="#" data-role="button" data-theme="b">버튼B</a>
		<a href="#" data-role="button" data-theme="c">버튼C</a>
		<a href="#" data-role="button" data-theme="d">버튼D</a>
		<a href="#" data-role="button" data-theme="e">버튼E</a>
	</div>

---

2022-08-12