모바일의 테마와 관련된 그리드시스템
모바일의 그리드를 통해 행의영역과 그안에 행의 영역에서 표현되는 열의 영역을 구분하고 부여하고자 한다.
ui-gird-a~d=>행의 영역
ui-block-a~e=>행의 영역에서 표현되는 열의 영역을 의미
Grid 정의 CSS 컬럼수 컬럼에 포함되는 항목 CSS
ui-grid-a 2 ui-block-a, ui-block-b
ui-grid-b 3 ui-block-a, ui-block-b,ui-block-c
ui-grid-c 4 ui-block-a, ui-block-b,ui-block-c,ui-block-d
ui-grid-d 5 ui-block-a, ui-block-b,ui-block-c,ui-block-d,
ui-block-e
위의 정리를 자세히 정리하자면 ui-grid-a는 2개의 컬럼을 영역을 나눌수 있고
따라서 그 안에 ui-block-a와 ui-block-b가 들어간다.
또한 ui-grid-b는 3개의 컬럼을 영역으로 나눌수 있어 그 안에 ui-block-a,b,c 가 들어간다.
이런식으로 grid에 따라서 각각 block을 부여하여 영역을 나누어 적용한다.
예시)
<div data-role="content">
<div class="ui-grid-a"> <= 2행2열을 만들거면 한번씩 더 추가한다.
<div class="ui-block-a"><h1>ui-block-a</h1></div>
<div class="ui-block-b"><h1>ui-block-b</h1></div>
<div class="ui-block-a"><h1>ui-block-a</h1></div><!-- 이렇게 한번 더 주면 행 추가-->
<div class="ui-block-b"><h1>ui-block-b</h1></div>
</div>
<!-- 한행에 3개짜리 열 -->
<div class="ui-grid-b">
<div class="ui-block-a"><h1>ui-block-a</h1></div>
<div class="ui-block-b"><h1>ui-block-b</h1></div>
<div class="ui-block-c"><h1>ui-block-c</h1></div>
</div>
<!-- 한행에 4개짜리 열 -->
<div class="ui-grid-c">
<div class="ui-block-a"><h1>ui-block-a</h1></div>
<div class="ui-block-b"><h1>ui-block-b</h1></div>
<div class="ui-block-c"><h1>ui-block-c</h1></div>
<div class="ui-block-d"><h1>ui-block-d</h1></div>
</div>
</div>
2022-08-16
