반응형
블로그 이미지
개발자로서 현장에서 일하면서 새로 접하는 기술들이나 알게된 정보 등을 정리하기 위한 블로그입니다. 운 좋게 미국에서 큰 회사들의 프로젝트에서 컬설턴트로 일하고 있어서 새로운 기술들을 접할 기회가 많이 있습니다. 미국의 IT 프로젝트에서 사용되는 툴들에 대해 많은 분들과 정보를 공유하고 싶습니다.
솔웅

최근에 받은 트랙백

글 보관함


Layout Grid


여러 컬럼을 가진 레이아웃을 사용하는 것은 모바일 기기쪽에서는 별로 권장되지 않는 방법입니다. 화면 크기가 작기 때문이죠. 하지만 작은 것들을 차례대로 좌우로 표시해야 될 때가 있습니다. (버튼이나 탭같은...)

jQuery Mobile framework은 CSS-based 컬럼들을 만드는 간단한 방법을 제공하고 있습니다. ui-grid 클래스를 call 하면 block 스타일 컬럼을 만들 수있습니다.


  • two-column (using the ui-grid-a class)
  • three-column (using the ui-grid-b class)
  • four-column (using the ui-grid-c class)
  • five-column (using the ui-grid-d class)


Grid는 100% width 에다 border나 배경이 없어서 보이지 않습니다. 그리고 padding이나 margin도 없죠. 그래서 그 안에 어떤 style과 함께 서로 간섭할 수가 없습니다.

Grid 콘테이너에는 ui-block-a/b/c/d/e 라는 child element들이 할당됩니다. 각 block element들을 side-by-side로 정렬하도록 만드는 거죠. ui-block-a 는 새로운 줄을 시작할 때 사용할 수 있습니다.


Two column grids


2개의 컬럼이 있는 레이아웃을 만드려면 ui-grid-a 클래스를 div에 넣습니다. 그리고 그 안에 두개의 child 콘테이너를 넣는데요. ui-block-a 는 첫번째 컬럼이 되고 ui-block-b 는 두번째 컬럼이 됩니다.


<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 -->


위 예제를 실행하면 아래처럼 보일 겁니다.


I'm Block A and text inside will wrap.      I'm Block B and text inside will wrap.


위에서 보듯이 grid block은 디폴트로 아무런 visual styling이 없습니다. 단지 그 내용을 side-by-side로 보여 줄 뿐입니다.


Grid 클래스는 어떤 컨테이너에든지 apply 될 수 있습니다. 다음 예제에서는 ui-grid-a 를 fieldset에 넣을 겁니다. 그리고 두개의 버튼의 컨테이너 안에 각각 ui-block classes 를 넣을 거구요. 이 두개의 버튼들은 나란히 화면의 50%를 차지하게 될 겁니다.


<fieldset class="ui-grid-a">
	<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>




framework은 그리드 안에서 버튼들에 각각 왼쪽, 오른쪽 마진을 넣게 됩니다. 버튼이 한개라면 class ui-grid-solo 를 사용하고 버튼에 ui-block-a 를 추가하면 됩니다. 그러면 이 버튼은 위의 두 버튼과 동일한 마진을 갖게 될 겁니다. 아래처럼요.


<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 class="ui-block-a"><button type="v" data-theme="b">More</button></div> </div>





grid를 포함해서 theme 클래스를 추가할 수도 있습니다. 아래에 우리는 두개의

클래스를 추가했습니다. 
ui-bar클래스를 추가함으로서 default bar 패딩이 추가 됐고 ui-bar-e를 추가함으로서 
e 툴바 theme swatch에 background gradient와 폰트 스타일을 적용했습니다.
inline style="height:120px" attribute 도 각 grid에 추가해서 각 grid에 높이를
주었습니다.



소스는 이 글 마지막에 올린 샘플 파일을 참조하세요.


Three-column grids


다른 grid 레이아웃은 parent에 class=ui-grid-b 를 사용해서 만들 수 있습니다. 이렇게 하면 3개의 child 콘테이너 element들을 만들게 됩니다. 3개의 child는 각각 ui-block-a/b/c class를 갖게 됩니다. 그러면 각각 33%의 width를 갖는 grid가 나타날 겁니다. Note: 샘플 파일에는 style을 적용했습니다. 그래서 각 grid를 구분해 놔서 눈으로 확인 하실 수 있으실 겁니다.


<div class="ui-grid-b">
	<div class="ui-block-a">Block A</div>
	<div class="ui-block-b">Block B</div>
	<div class="ui-block-c">Block C</div>
</div><!-- /grid-b -->






각 grid 안에 버튼을 넣을 수도 있습니다. (샘플파일 참조)




Four-column grids


25/25/25/25% grid 로 4개의 컬럼을 만들 수있는데 이것은 parent에 class=ui-grid-c를 넣어서 만들 수 있습니다.



Five-column grids


20/20/20/20/20% 이렇게 5개의 컬럼은 class=ui-grid-d 로 만들 수 있습니다.




Multiple row grids


여러줄로 된 grid를 만들 수도 있습니다. 예를 들어 3개 컬럼 grid를 container에 지정하고 (ui-grid-b) 그 안에 9개의 child block이 있다고 생각해 봅시다. 그러면 각 블럭들이 3줄로 표시 될 겁니다. 한 줄을 끝내고 다른 줄을 시작하기 위해 CSS 룰을 따라야 합니다. class=ui-block-a 는 새로운 줄을 시작하는 신호가 될 겁니다. (a, b, c, a, b, c, etc.) 이렇게 반복하면 여러줄을 만들 수 있습니다.

자세한 것은 샘플 파일을 참조하세요.



Grids in toolbars


Grid는 툴바에 layout을 만드는데 유용하게 활용할 수 있습니다. 아래는 footer에 4개의 컬럼을 가진 grid를 넣어서 활용한 예입니다. 소스는 샘플파일을 참조하세요.




layoutGrid.html




반응형

Comment