jQuery Mobile - Content formatting

JQM에서 페이지의 컨텐트는 제약 조건을 두지 않습니다. 그러나 JQM 프레임웍은 많은 유용한 접을수 있는 패널(collapsible panels)과 다수열의 그리드 레이아웃(multiple-column grid layout)과 같은 툴,위젯들을 제공하고 생성하기 쉽도록 해줍니다.

Basic HTML styles

JQM에서 컨텐트의 스타일링은 간단합니다. 우리의 목적은 브라우저의 기본 렌더링을 우선으로 하고, 우리는 좀더 읽기 편하도록 패딩을 조정하고, 폰트와 색상을 적용한 theming system을 사용하면 됩니다
간편한 컨텐트 스타일링 작업는 디자이너와 개발자들에게 복잡한 스타일에 머리 싸매지 않도록 편한 작업환경을 만들어줍니다.

Default HTML markup styling
기본적으로 JQM 테마는 기본 HTML 스타일과 사이즈을 사용합니다

<h1>H1 Heading</h1>
<h2>H2 Heading</h2>
<h3>H3 Heading</h3>
<h4>H4 Heading</h4>
<h5>H5 Heading</h5>
<h6>H1 Heading</h6>

<strong>strong 태그 사용시</strong> <br>
<em>em 태그 사용시</em> <br>
<a>a 태그 사용시</a> <br>
<blockquote>blockquote 태그 사용시</blockquote> <br>
<cite>cite 태그 사용시</cite> <br>
<code>code 태그 사용시 $,&</code> <br>

<ul>
    <li>Unordered list item 1</li>
    <li>Unordered list item 2</li>
    <li>Unordered list item 3</li>
</ul>

<ol>
    <li>Ordered list item 1</li>
    <li>Ordered list item 2</li>
    <li>Ordered list item 3</li>
</ol>

<dl title="Definition list">
    <dt>Definition term</dt>
    <dd>I'm the definition text</dd>
    <dt>Definition term</dt>
    <dd>I'm the definition text</dd>
</dl>

<table summary="This table lists all the JetBlue flights.">
  <caption>Travel Itinerary</caption>
  <thead>
    <tr>
       <th scope="col">Flight:</th> 
      <th scope="col">From:</th> 
      <th scope="col">To:</th> 
    </tr>
  </thead>
  <tfoot>
    <tr>
      <td colspan="5">Total: 3 flights</td>
    </tr>
  </tfoot>
  <tbody>
  <tr>
    <th scope="row">JetBlue 983</th>
    <td>Boston (BOS)</td>
    <td>New York (JFK)</td>
  </tr>
  <tr>
    <th scope="row">JetBlue 354</th>
    <td>San Francisco (SFO)</td>
    <td>Los Angeles (LAX)</td>
  </tr>
<tr>
    <th scope="row">JetBlue 465</th>
    <td>New York (JFK)</td>
    <td>Portland (PDX)</td>
  </tr>
  </tbody>
</table>