- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <!-- 현재 작성하고 있는 파일은 UTF-8 DOS파일입니다.-->
- <html xmlns="http://www.w3.org/1999/xhtml" lang="ko">
- <head>
- <meta http-equiv="content-type" content="text/html; charset=utf-8" />
- </head>
- <body>
- <ol><li> 사용법<br />
- <ol> 사용 용도는 목록 번호 스타일 지정합니다.(속성-type, start, reversed, compact)<br />
- <li> 사용 용도는 목록 번호 출력합니다.(속성-value, type)<br />
- <hr />
- <b><ol> : 1.속성-type은 5가지로 출력합니다.(기본은 숫자)</b><br /><br />
- <div id="ex_view2" style="float: left; width: 120px;">
- 1. 숫자
- <ol type="1">
- <h3>과일</h3>
- <li>사과</li>
- <li>딸기</li>
- <li>자두</li>
- <li>포도</li>
- </ol>
- </div>
- <div id="ex_view2" style="float: left; width: 120px;">
- 2. 알파벳(대)
- <ol type="A">
- <h3>과일</h3>
- <li>사과</li>
- <li>딸기</li>
- <li>자두</li>
- <li>포도</li>
- </ol>
- </div>
- <div id="ex_view2" style="float: left; width: 120px;">
- 3. 알파벳(소)
- <ol type="a">
- <h3>과일</h3>
- <li>사과</li>
- <li>딸기</li>
- <li>자두</li>
- <li>포도</li>
- </ol>
- </div>
- <hr style="clear:left; border-style:dotted;"/>
- <div id="ex_view2" style="clear:left; float: left; width: 120px; padding: 0 0 0 10px;">
- 4. 로마숫자(대)
- <ol type="I">
- <h3>과일</h3>
- <li>사과</li>
- <li>딸기</li>
- <li>자두</li>
- <li>포도</li>
- </ol>
- </div>
- <div id="ex_view2" style="float: left; width: 120px; padding: 0 0 0 10px;">
- 5. 로마숫자(소)
- <ol type="i">
- <h3>과일</h3>
- <li>사과</li>
- <li>딸기</li>
- <li>자두</li>
- <li>포도</li>
- </ol>
- </div>
- <hr style="clear:left;"/>
- <div id="ex_view2" style="clear:left; float: left; padding: 0 0 0 10px;">
- <br />
- <b><ol> : 2.속성-start 시작번호는 변경합니다.</b><br /><br />
- 1. 100부터 시작
- <ol start=100>
- <h3>과일</h3>
- <li>사과</li>
- <li>딸기</li>
- <li>자두</li>
- <li>포도</li>
- </ol>
- </div>
- <hr style="clear:left;"/>
- <div id="ex_view2" style="clear:left; float: left; padding: 0 0 0 10px;">
- <br />
- <b><ol> : 3.속성-reversed는 HTML5에서 지원됩니다.</b><br />
- 10 9 8 7 처럼 숫자 디스카운터 되는 기능입니다.
- </div>
- <div id="ex_view2" style="clear:left; float: left; padding: 0 0 0 10px;">
- <br />
- <b><ol> : 4.속성-compact는 HTML4부터 지원이 안됩니다.</b><br />
- HTML5에서 지원되지 않습니다. <br />
- 대신 CSS에서 지원해줍니다.<br />
- CSS 구문 : <ol style="line-height: 80%"> <br />
- 목록의 줄 높이를 줄입니다.
- <ol style="line-height: 80%">
- <h3>과일</h3>
- <li>사과</li>
- <li>딸기</li>
- <li>자두</li>
- <li>포도</li>
- </ol>
- </div>
- <br />
- <hr style="clear:left;"/>
- <div id="ex_view2" style="clear:left; float: left; padding: 0 0 0 10px;">
- <br />
- <b><li> : 1.속성-value 시작번호는 변경합니다.(<ul>만 가능합니다.)</b><br /><br />
- 1. 100부터 시작<br />
- 2. li에서 22 변경
- <ol start=100>
- <h3>과일</h3>
- <li>사과</li>
- <li value=22>딸기</li>
- <li>자두</li>
- <li>포도</li>
- </ol>
- </div>
- <br />
- <hr style="clear:left;"/>
- <div id="ex_view2" style="clear:left; float: left; padding: 0 0 0 10px;">
- <br />
- <b><li> : 2.속성-type 목록 항목의 글 머리 스타일을 지정합니다.</b><br />
- HTML 4.01에서 더 이상 사용되지 않습니다. <br />
- HTML5에서 지원되지 않습니다. <br />
- 대신 CSS에서 지원해줍니다.<br />
- CSS 구문 : <li style="list-style-type:square"> <br />
- 목록에서 목록 항목의 글 머리 스타일을 지정합니다.<br />
- <ol start=100>
- <h3>과일</h3>
- <li>사과</li>
- <li style="list-style-type:disc">사과</li>
- <li>딸기</li>
- <li value=22>딸기</li>
- <li>자두</li>
- <li style="list-style-type:square">포도</li>
- <li style="list-style-type:circle">포도</li>
- </ol>
- </div>
- <hr style="clear:left;"/>
- <div style="clear:left;">
- <lh>태그는 HTML3.0이후 채택이 안되어서<br />
- 브라우저에서 지원이 안됩니다.(<hn>권고)<br />
- </div>
- </body>
- </html>
--------------------------------------------------------------------------------------------
위 소스 예제 보기
<ol> 목록 번호 스타일 지정합니다.
<li> 목록 번호 출력합니다.
<ol> type, start, reversed, compact속성과 설명은
reversed를 제외한 나머지는 소스에 있습니다.
<li> value, type 속성과 설명은 소스에 있습니다.
Global Attributes 지원합니다.
Global Event Attributes 지원합니다.
'HTML > xhtml문법' 카테고리의 다른 글
<a></a> 링크 연결 페이지 (0) | 2014.01.20 |
---|---|
<ul></ul>-<li></li> 목록 모양 스타일 - 목록 모양 (0) | 2014.01.20 |
<hr>, <hr /> 수평선 (0) | 2014.01.20 |
<!-- --> 주석 (설명글) (0) | 2014.01.20 |
<pre></pre> HTML 문서안에서 문자 위치 그대로 출력 (0) | 2014.01.19 |