그리드(표) 형식 레이아웃(문서구조) 다루기
페이지 정보
작성자 서방님 댓글 0건 조회 115회 작성일 15-07-27 14:37본문
html 에서 table 은 행을 가지고 있고, 각 행안에 1개 이상의 셀을 가지고 있는 표형식의 구조를 표현하는 태그입니다.
이런 표형식의 표현을, jquery mobile 에서는 어떤식으로 표현하는지에 대해서 한번 알아보겠습니다.
먼저 이 강좌는 jquery 사이트의 아래 강좌를 보면서 설명을 했습니다.
http://jquerymobile.com/demos/1.2.0/docs/content/content-grids.html
jquery mobile 에서 그리드(표)를 만들고자 한다면, 다음과 같이 해주면 됩니다.
1. 행단위으로 묶는 div 태그에다가 클래스명을 ui-grid-solo, ui-grid-a, ui-grid-b, ui-grid-c, ui-grid-d 이렇게 다섯가지 중에 하나를 줍니다.
다섯개의 클래스명은 한 행안에 설정할 컬럼의 개수에 따라서 맞게 설정해 주어야 합니다.
ui-grid-solo : 컬럼이 한개일때
ui-grid-a : 컬럼이 두개일때
ui-grid-b : 컬럼이 세개일때
ui-grid-c : 컬럼이 네개일때
ui-grid-d : 컬럼이 다섯개일때
2. 1번의 행단위로 묶는 div 태그 안에다가, 셀단위 div 태그들을 추가해주고, ui-block-a, ui-block-b, ui-block-c, ui-block-d, ui-block-e 를 한행에 표현할 셀 개수만큼만 앞에서부터(a~e) 차례대로 클래스명을 주면 됩니다.
그리고 셀단위 div 태그 안에다가 텍스트라든지, 이미지, 버튼 등등 각종 컨텐트를 그 안에서 코딩해 주면 됩니다.
표의 한 행에는 최대 다섯개 까지만 표현 가능합니다.
즉 위의 클래스명이 다섯개인 이유가, 총 다섯개의 컬럼만 지원합니다.
보통 jquery mobile 로 코딩한 화면을, 스마트폰 등의 가로폭이 작은 기기에서 주로 볼 것이기 때문에, 많은수의 컬럼 개수를 지원하지 않는 것 같습니다.
그리고 컬럼의 가로 길이는, 컬럼의 개수만큼 다음과 같이 동등한 비율로 정해집니다.
컬럼이 한개면, 100%
컬럼이 두개면, 50% : 50%
컬럼이 세개면, 33% : 33% : 33%
컬럼이 네개면, 25% : 25% : 25% : 25%
컬럼이 다섯개면, 20% : 20% : 20% : 20% : 20%
이제 이 레이아웃을 활용한 샘플 코드를 아래와 같이 원강좌내용을 토대로 하여 약간 편집해 보았습니다.
아래 소스를, asp 페이지를 아무 이름으로나 만드셔서 저장하시고 웹브라우저에서 확인하시면 됩니다.
<!DOCTYPE html> <html> <head> <title>My Page</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" /> <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script> <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script> </head> <body> <div data-role="page" id="page1"> <div data-role="header"> <h1>기본 그리드</h1> </div><!-- /header --> <div data-role="content"> <!-- ui-grid- 뒤에, a 이면 두개의 컬럼, b 이면 세개의 컬럼, c 이면 네개의 컬럼, d 이면 다섯개의 컬럼을 가짐 --> <div class="ui-grid-a"> <div class="ui-block-a"><strong>I'm Block A</strong> and text inside will wrap</div><!-- 첫번째 컬럼셀 --> <div class="ui-block-b"><strong>I'm Block B</strong> and text inside will wrap</div><!-- 두번째 컬럼셀 --> </div><!-- /grid-a --> </div><!-- /content --> <div data-role="footer"> <h4><% printFooter %></h4> </div><!-- /footer --> </div><!-- /page --> <div data-role="page" id="page2"> <div data-role="header"> <h1>그리드의 각 셀에 버튼 배치</h1> </div><!-- /header --> <div data-role="content"> <fieldset class="ui-grid-a"> <!-- data-theme : 모든 태그들에 디자인 테마를 적용함, a~e 까지 적용가능 --> <!-- button 태그로 감싸면, 버튼형태로 디자인이 나오게 됨, 기능도 버튼으로 동작함 --> <div class="ui-block-a"><button type="submit" data-theme="c">Cancel</button></div> <div class="ui-block-b"><button type="submit" data-theme="b">Submit</button></div> </fieldset> </div><!-- /content --> <div data-role="footer"> <h4><% printFooter %></h4> </div><!-- /footer --> </div><!-- /page --> <div data-role="page" id="page3"> <div data-role="header"> <h1>그리드 두개 컬럼 행과 한개 컬럼 행, 두개의 행 표현</h1> </div><!-- /header --> <div data-role="content"> <div class="ui-grid-a"> <div class="ui-block-a"><button type="button" data-theme="c">Previous</button></div> <div class="ui-block-b"><button type="button" data-theme="c">Next</button></div> </div> <div class="ui-grid-solo"><!-- 한개짜리 컬럼을 만들려면, 일단 행div 에다가 클래스를 이렇게 줌--> <div class="ui-block-a"><button type="v" data-theme="b">More</button></div> </div> </div><!-- /content --> <div data-role="footer"> <h4><% printFooter %></h4> </div><!-- /footer --> </div><!-- /page --> <div data-role="page" id="page4"> <div data-role="header"> <h1>그리드 셀에 Bar 클래스를 적용하여, 타이틀행처럼 스타일 적용하기</h1> </div><!-- /header --> <div data-role="content"> <div class="ui-grid-a"> <!-- class 명에 ui-bar-e 는 바 형태의 디자인을 적용해줌, a~e 까지 바꾸면서 테마를 적용가능합니다. --> <div class="ui-block-a ui-bar-e" style="height:40px;padding:10px">Block A</div> <div class="ui-block-b ui-bar-e" style="height:40px;padding:10px">Block B</div> </div><!-- /grid-b --> </div><!-- /content --> <div data-role="footer"> <h4><% printFooter %></h4> </div><!-- /footer --> </div><!-- /page --> <div data-role="page" id="page5"> <div data-role="header"> <h1>그리드 세개의 컬럼 표시하기</h1> </div><!-- /header --> <div data-role="content"> <div class="ui-grid-b"><!-- ui-grid- 뒤에, a 이면 두개의 컬럼, b 이면 세개의 컬럼, c 이면 네개의 컬럼, d 이면 다섯개의 컬럼을 가짐 --> <div class="ui-block-a ui-bar-e" style="height:40px;padding:10px">Block A</div> <div class="ui-block-b ui-bar-e" style="height:40px;padding:10px">Block B</div> <div class="ui-block-c ui-bar-e" style="height:40px;padding:10px">Block C</div> </div><!-- /grid-b --> <div class="ui-grid-b"><!-- 텍스트 대신 각 셀에 버튼을 표시 --> <div class="ui-block-a"><button type="button" data-theme="a">Button1</button></div> <div class="ui-block-b"><button type="button" data-theme="b">Button2</button></div> <div class="ui-block-c"><button type="button" data-theme="c">Button3</button></div> </div><!-- /grid-b --> </div><!-- /content --> <div data-role="footer"> <h4><% printFooter %></h4> </div><!-- /footer --> </div><!-- /page --> <div data-role="page" id="page6"> <div data-role="header"> <h1>그리드 네개의 컬럼 표시하기</h1> </div><!-- /header --> <div data-role="content"> <div class="ui-grid-c"> <div class="ui-block-a ui-bar-e" style="height:40px;padding:10px">Block A</div> <div class="ui-block-b ui-bar-e" style="height:40px;padding:10px">Block B</div> <div class="ui-block-c ui-bar-e" style="height:40px;padding:10px">Block C</div> <div class="ui-block-d ui-bar-e" style="height:40px;padding:10px">Block D</div> </div><!-- /grid-c --> <div class="ui-grid-c"> <div class="ui-block-a"><button type="button" data-theme="a">Button1</button></div> <div class="ui-block-b"><button type="button" data-theme="b">Button2</button></div> <div class="ui-block-c"><button type="button" data-theme="c">Button3</button></div> <div class="ui-block-d"><button type="button" data-theme="d">Button4</button></div> </div><!-- /grid-c --> </div><!-- /content --> <div data-role="footer"> <h4><% printFooter %></h4> </div><!-- /footer --> </div><!-- /page --> <div data-role="page" id="page7"> <div data-role="header"> <h1>그리드 다섯개의 컬럼 표시하기</h1> </div><!-- /header --> <div data-role="content"> <div class="ui-grid-d"> <div class="ui-block-a ui-bar-e" style="height:40px;padding:10px">Block A</div> <div class="ui-block-b ui-bar-e" style="height:40px;padding:10px">Block B</div> <div class="ui-block-c ui-bar-e" style="height:40px;padding:10px">Block C</div> <div class="ui-block-d ui-bar-e" style="height:40px;padding:10px">Block D</div> <div class="ui-block-e ui-bar-e" style="height:40px;padding:10px">Block E</div> </div><!-- /grid-d --> <div class="ui-grid-d"> <div class="ui-block-a"><button type="button" data-theme="a">Button1</button></div> <div class="ui-block-b"><button type="button" data-theme="b">Button2</button></div> <div class="ui-block-c"><button type="button" data-theme="c">Button3</button></div> <div class="ui-block-d"><button type="button" data-theme="d">Button4</button></div> <div class="ui-block-e"><button type="button" data-theme="e">Button5</button></div> </div><!-- /grid-d --> </div><!-- /content --> <div data-role="footer"> <h4><% printFooter %></h4> </div><!-- /footer --> </div><!-- /page --> <div data-role="page" id="page8"> <div data-role="header"> <h1>그리드 여러컬럼 여러행 표시하기</h1> </div><!-- /header --> <div data-role="content"> <div class="ui-grid-b"> <div class="ui-block-a ui-bar-e" style="height:120px;padding:10px">Block A</div> <div class="ui-block-b ui-bar-e" style="height:120px;padding:10px">Block B</div> <div class="ui-block-c ui-bar-e" style="height:120px;padding:10px">Block C</div> </div><!-- /grid-b --> <div class="ui-grid-b"> <div class="ui-block-a ui-bar-e" style="height:120px;padding:10px">Block A</div> <div class="ui-block-b ui-bar-e" style="height:120px;padding:10px">Block B</div> <div class="ui-block-c ui-bar-e" style="height:120px;padding:10px">Block C</div> </div><!-- /grid-b --> <div class="ui-grid-b"> <div class="ui-block-a ui-bar-e" style="height:120px;padding:10px">Block A</div> <div class="ui-block-b ui-bar-e" style="height:120px;padding:10px">Block B</div> <div class="ui-block-c ui-bar-e" style="height:120px;padding:10px">Block C</div> </div><!-- /grid-b --> </div><!-- /content --> <div data-role="footer"> <h4><% printFooter %></h4> </div><!-- /footer --> </div><!-- /page --> <div data-role="page" id="page9"> <div data-role="header"> <h1>바에 그리드를 이용하여 표현하기</h1> </div><!-- /header --> <div data-role="content"> <div data-theme="a" class="ui-bar-a ui-grid-c"> <div class="ui-block-a"><h3 style="margin-top:10px;margin-left:20px;">Settings</h3></div> <div class="ui-block-b"><label for="value" style="margin:8px 10px 0 0; text-align:right;">Price</label></div> <div class="ui-block-c"><input id="value" value="5,000"></div> <div class="ui-block-d"> <div style="margin:6px 0 0 10px;"><button type="submit" data-theme="b">Update</button></div> </div> </div> </div><!-- /content --> <div data-role="footer"> <h4><% printFooter %></h4> </div><!-- /footer --> </div><!-- /page --> </body> </html> <% Sub printFooter Dim i,j,k Dim cnt : cnt = 9 For i = 1 To cnt %> <a href="#page<%=i%>"><%=i%></a><% If i<>cnt Then %> | <% End If %> <% Next End Sub %> |
댓글목록
등록된 댓글이 없습니다.
