생활코딩

Coding Everybody

코스 전체목록

닫기

Content formatting

Layout grid

레이아웃 그리드란 컨텐츠를 배치하는 방법을 지정한다. 배치하려는 컨텐츠를 포함하고 있는 컨테이너 엘리먼트에 배치 방식에 해당하는 클래스 이름을 부여한다. 클래스 이름은 아래와 같다.

칼럼의 수 비율 클래스 명 자식으로 올 수 있는 CSS 클래스
2 50:50% ui-grid-a ui-block-a,b
3 33:33:33% ui-grid-b ui-block-a,b,c
4 25:25:25:25% ui-grid-c ui-block-a,b,c,d
5 20:20:20:20:20% ui-grid-d ui-block-a,b,c,d,e

다음 예제는 버튼을 수평으로 배치하는 예제다.

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

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

행을 나누고 싶을 때는 ui-block-* 클래스를 중복해서 사용한다.

<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 class="ui-block-a">Block A</div>
	<div class="ui-block-b">Block B</div>
	<div class="ui-block-c">Block C</div>
	<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>

전체소스

Collapsible content

컨텐츠를 감추었다가 사용자가 원하면 보여주는 컴포넌트로 div 태그에 data-role="collapsible" 속성을 사용한다. 처음으로 등장하는 헤더 태그가 제목으로 사용된다.

<div data-role="collapsible">
   <h3>I'm a header</h3>
   <p>I'm the collapsible content. By default I'm closed, but you can click the header to open me.</p>
</div>

전체소스

참고 : http://jquerymobile.com/demos/1.1.0/docs/content/content-collapsible.html

테마

테마 기능을 이용해서 컨텐츠 영역의 디자인을 변경할 수 있다.

<div data-role="page" data-theme="a" data-content-theme="a">

전체소스

 

댓글

댓글 본문
  1. 허공
    감사합니다!
  2. ericpark
    감사합니다.
  3. JustStudy
    고맙습니다
  4. imkurtkim
    감사합니다. 잘봤습니다.
  5. 말랑
    재밌어요ㅎㅎ
  6. 북경사자
    감사합니다~ 잘 보고 있어요~
  7. 포스만빵
    따라하다보니 아주 쉽고 재밌네요..
  8. 권영인
    영상 뒷부분 짤리고 사진 짤렸네욧~!
버전 관리
egoing
현재 버전
선택 버전
graphittie 자세히 보기