[JQueryMobile] Grid 사용방법 / Grid 개념

JQueryMobile은 참 매력적이다. JQuery도 그렇지만 Javascript의 복잡성을 줄이고 직관적으로 바꿔주는 능력은 엄청나다.

거기다가 JQueryMobile은 기본 CSS와의 결합이 강력하다. CSS를 잘 몰라도 웹페이지를 충분히 생성할 수 있다. 오늘은 JQueryMobile의 Grid System에 대해 알아보자.

1. 기본 Grid 골격

?

?

1 2 3 4 5 6 7

<div class="ui-grid-GridType">     <div class="ui-block-a">A</div>     <div class="ui-block-b">B</div>     <div class="ui-block-c">C</div>     <div class="ui-block-d">D</div>     <div class="ui-block-e">E</div> </div>

위의 코드처럼 우선 GridType (몇 단으로 나눌 것인지)에 대한 div가 하나 있어야 하고, 그 하위에 그 몇단으로 나눌 것인지에 대한 하위 div가 들어간다. 즉 위와 같은 경우에는 5단으로 나누어져 있는 경우이며, GridType은 d Type이 되며 class는 ui-grid-d가 된다. GridType의 종류는

1) ui-grid-solo (1단 그리드)

2) ui-grid-a (2단 그리드)

3) ui-grid-b (3단 그리드)

4) ui-grid-c (4단 그리드)

5) ui-grid-d (5단 그리드)

이 있겠다. ui-block-*는 그저 순서대로 a, b, c, d, e로 붙여주면 된다. (물론 단 수에 따라 수가 달라질 것이다. solo의 경우 a하나일 뿐)

2. 실제 적용

site: http://readiz.com/

위 사진은 Readiz Main Page이고, 중간에 보면 Readiz Blog라는 부분에 2단짜리 Grid를 쓴 것을 볼 수 있다. 그렇다면 Grid Type은 a가 될 것이며, 하위 div는 2개가 필요할 것이다. 실제 코드를 보면

?

1 2 3 4 5 6 7 8

<div class="ui-grid-a">       <div class="ui-block-a">         <a href="http://blog.readiz.com/" data-role="button" data-icon="star" data-iconpos="top">Tistory</a>     </div>     <div class="ui-block-b">         <a href="http://nlog.readiz.com/" data-role="button" data-icon="star" data-iconpos="top">Naver</a>     </div> </div>

위와 같이 되는 것을 볼 수 있다. Grid를 별다른 설정없이 바로 사용할 수 있는 JQueryMobile에 대한 칭찬을 다시한번 하면서 이번 글을 마친다.