jQuery Mobile 6

jQuery Mobile 레이아웃

jQuer Mobile를 사용하면 쉽게 레이아웃을 구성할 수 있습니다. div 태그의 class 속성에 ui-grid를 입력해 레이아웃을 구성합니다. ui-grid-a 부터 ui-grid-d까지 입력이 가능합니다. 차이는 결과를 살펴보는 게 설명보다 훨씬 이해하기 쉬울 것입니다.
우선, 간단히 ui-grid-a를 사용해 봅시다. ui-grid-a를 사용해 레이아웃을 구성하면 내부 요소의 클래스에 ui-block-a와 ui-block-b를 입력해 위치를 지정합니다.

ui-grid 클래스(1)

							<div data-role="content">
								<div class="ui-grid-a">
									<div id="" class="ui-block-a"><h1>ui-block-a</h1></div>
									<div id="" class="ui-block-b"><h1>ui-block-b</h1></div>
								</div>
							</div>					
						

실행하면 화면이 이등분돼 div 태그를 출력하는데요. ui-grid-a 클래스는 화면을 이등분한다는 의미입니다. ui-grid-b는 화면을 3등분하며, ui-grid-c는 화면을 4등분합니다.

한 줄에 입력할 수도 있고, 아래의 소스코드처럼 ui-block 클래스를 입력하면 여러 줄에 요소를 구성할 수도 있습니다.

ui-grid 클래스(2)

							<div data-role="content">
								<div class="ui-grid-a">
									<div id="" class="ui-block-a"><h1>ui-block-a</h1></div>
									<div id="" class="ui-block-b"><h1>ui-block-b</h1></div>

									<div id="" class="ui-block-a"><h1>ui-block-a</h1></div>
									<div id="" class="ui-block-b"><h1>ui-block-b</h1></div>
								</div>
							</div>					
						

간단한 사용 방법을 알았으니 쉽게 응용할 수 있을 것입니다. ui-grid-b 클래스는 화면을 3등분하므로 내부에 ui-block 클래스를 c까지 지정할 수 있습니다.

ui-grid 클래스(3)

							<div data-role="content">
								<div class="ui-grid-b">
									<div id="" class="ui-block-a"><h1>ui-block-a</h1></div>
									<div id="" class="ui-block-b"><h1>ui-block-b</h1></div>
									<div id="" class="ui-block-c"><h1>ui-block-c</h1></div>

									<div id="" class="ui-block-a"><h1>ui-block-a</h1></div>
									<div id="" class="ui-block-b"><h1>ui-block-b</h1></div>
									<div id="" class="ui-block-c"><h1>ui-block-c</h1></div>
								</div>
							</div>
						

사용자의 화면 해상도에 따라 화면 구성이 깨질 수 있으므로 4등분 이상은 되도록 사용하지 마세요.

쉽게 레이아웃을 응용할 수 없을 거 같다고요? 예제를 하나 더 살펴 보겠습니다. 우선 레이아웃을 구성할 때 ui-grid를 하나의 구성 요소로 활용한다고 생각하세요. 아래의 코드는 원하는 곳에 버튼을 위치시키려고 ui-grid를 부분적으로 사용했습니다.

ui-grid 클래스를 사용한 레이아웃 구성

							<div data-role="content">
								<div data-role="fieldcontain">
									<label for="textinput">ID</label>
									<input type="text" name="id_input"id="id_input" />
								</div>
								<div data-role="fieldcontain">
									<label for="textinput">Password</label>
									<input type="text "name="password_input" id="password_input" />
								</div>
								<div class="ui-grid-a">
									<div class="ui-block-a"><input type="submit" value="submit" /></div>
									<div class="ui-block-b"><input type="reset" value="reset" /></div>
								</div>
							</div>