1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <!-- 현재 작성하고 있는 파일은 UTF-8 DOS파일입니다.-->
  3. <html xmlns="http://www.w3.org/1999/xhtml" lang="ko">
  4.   <head>
  5.     <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  6.   </head>
  7.   <body>
  8.     &lt;ol&gt;&lt;li&gt; 사용법<br />
  9.     &lt;ol&gt; 사용 용도는 목록 번호 스타일 지정합니다.(속성-type, start, reversed, compact)<br />
  10.     &lt;li&gt; 사용 용도는 목록 번호 출력합니다.(속성-value, type)<br />
  11.     <hr />
  12.     <b>&lt;ol&gt; : 1.속성-type은 5가지로 출력합니다.(기본은 숫자)</b><br /><br />
  13.     <div id="ex_view2" style="float: left; width: 120px;">
  14.       1. 숫자
  15.       <ol type="1">
  16.      <h3>과일</h3>
  17.      <li>사과</li>
  18.      <li>딸기</li>
  19.      <li>자두</li>
  20.      <li>포도</li>
  21.       </ol>
  22.     </div>
  23.     <div id="ex_view2" style="float: left; width: 120px;">
  24.       2. 알파벳(대)
  25.       <ol type="A">
  26.      <h3>과일</h3>
  27.      <li>사과</li>
  28.      <li>딸기</li>
  29.      <li>자두</li>
  30.      <li>포도</li>
  31.       </ol>
  32.     </div>
  33.     <div id="ex_view2" style="float: left; width: 120px;">
  34.       3. 알파벳(소)
  35.       <ol type="a">
  36.      <h3>과일</h3>
  37.      <li>사과</li>
  38.      <li>딸기</li>
  39.      <li>자두</li>
  40.      <li>포도</li>
  41.       </ol>
  42.     </div>
  43.     <hr style="clear:left; border-style:dotted;"/>
  44.     <div id="ex_view2" style="clear:left; float: left; width: 120px;  padding: 0 0 0 10px;">
  45.       4. 로마숫자(대)
  46.       <ol type="I">
  47.      <h3>과일</h3>
  48.      <li>사과</li>
  49.      <li>딸기</li>
  50.      <li>자두</li>
  51.      <li>포도</li>
  52.       </ol>
  53.     </div>
  54.     <div id="ex_view2" style="float: left; width: 120px;  padding: 0 0 0 10px;">
  55.       5. 로마숫자(소)
  56.       <ol type="i">
  57.      <h3>과일</h3>
  58.      <li>사과</li>
  59.      <li>딸기</li>
  60.      <li>자두</li>
  61.      <li>포도</li>
  62.       </ol>
  63.     </div>
  64.     <hr style="clear:left;"/>
  65.     <div id="ex_view2" style="clear:left; float: left; padding: 0 0 0 10px;">
  66.       <br />
  67.       <b>&lt;ol&gt; : 2.속성-start 시작번호는 변경합니다.</b><br /><br />
  68.       1. 100부터 시작
  69.       <ol start=100>
  70.      <h3>과일</h3>
  71.      <li>사과</li>
  72.      <li>딸기</li>
  73.      <li>자두</li>
  74.      <li>포도</li>
  75.       </ol>
  76.     </div>
  77.     <hr style="clear:left;"/>
  78.     <div id="ex_view2" style="clear:left; float: left; padding: 0 0 0 10px;">
  79.       <br />
  80.       <b>&lt;ol&gt; : 3.속성-reversed는 HTML5에서 지원됩니다.</b><br />
  81.       10 9 8 7 처럼 숫자 디스카운터 되는 기능입니다.
  82.     </div>
  83.     <div id="ex_view2" style="clear:left; float: left; padding: 0 0 0 10px;">
  84.       <br />
  85.       <b>&lt;ol&gt; : 4.속성-compact는 HTML4부터 지원이 안됩니다.</b><br />
  86.       HTML5에서 지원되지 않습니다. <br />
  87.       대신 CSS에서 지원해줍니다.<br />
  88.       CSS 구문 : &lt;ol style="line-height: 80%"&gt; <br />
  89.       목록의 줄 높이를 줄입니다.
  90.       <ol style="line-height: 80%">
  91.         <h3>과일</h3>
  92.         <li>사과</li>
  93.         <li>딸기</li>
  94.         <li>자두</li>
  95.         <li>포도</li>
  96.       </ol>
  97.     </div>
  98.     <br />
  99.     <hr style="clear:left;"/>
  100.     <div id="ex_view2" style="clear:left; float: left; padding: 0 0 0 10px;">
  101.       <br />
  102.       <b>&lt;li&gt; : 1.속성-value 시작번호는 변경합니다.(&lt;ul&gt;만 가능합니다.)</b><br /><br />
  103.       1. 100부터 시작<br />
  104.       2. li에서 22 변경
  105.       <ol start=100>
  106.      <h3>과일</h3>
  107.      <li>사과</li>
  108.      <li value=22>딸기</li>
  109.      <li>자두</li>
  110.      <li>포도</li>
  111.       </ol>
  112.     </div>
  113.     <br />
  114.     <hr style="clear:left;"/>
  115.     <div id="ex_view2" style="clear:left; float: left; padding: 0 0 0 10px;">
  116.       <br />
  117.       <b>&lt;li&gt; : 2.속성-type 목록 항목의 글 머리 스타일을 지정합니다.</b><br />
  118.         HTML 4.01에서 더 이상 사용되지 않습니다. <br />
  119.         HTML5에서 지원되지 않습니다. <br />
  120.         대신 CSS에서 지원해줍니다.<br />
  121.         CSS 구문 : &lt;li style="list-style-type:square"&gt; <br />
  122.         목록에서 목록 항목의 글 머리 스타일을 지정합니다.<br />
  123.       <ol start=100>
  124.         <h3>과일</h3>
  125.         <li>사과</li>
  126.         <li style="list-style-type:disc">사과</li>
  127.         <li>딸기</li>
  128.         <li value=22>딸기</li>
  129.         <li>자두</li>
  130.         <li style="list-style-type:square">포도</li>
  131.       <li style="list-style-type:circle">포도</li>
  132.       </ol>
  133.     </div>
  134.     <hr style="clear:left;"/>
  135.     <div style="clear:left;">
  136.     &lt;lh&gt;태그는 HTML3.0이후 채택이 안되어서<br />
  137.     브라우저에서 지원이 안됩니다.(&lt;hn&gt;권고)<br />
  138.     </div>
  139.   </body>
  140. </html>

--------------------------------------------------------------------------------------------

위 소스 예제 보기


<ol></ol>

<li></li>


<ol> 목록 번호 스타일 지정합니다.

<li> 목록 번호 출력합니다.


<ol> type, start, reversed, compact속성과 설명은 

        reversed를 제외한 나머지는 소스에 있습니다.


<li>  value, type 속성과 설명은 소스에 있습니다.


Global Attributes 지원합니다.

Global Event Attributes 지원합니다.


출처&인용 : http://www.w3schools.com/tags/tag_ol.asp

출처&인용 : http://www.w3schools.com/tags/tag_li.asp

댓글을 달아주세요:: 네티켓은 기본, 스팸은 사절

◀ PREV | 1 | ··· | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | ··· | 35 | NEXT ▶

BLOG main image

공지사항

카테고리

분류 (356)
main (1)
php5 (218)
HTML (36)
javascript (93)
IT 이론과 퍼온정보 (8)
깨작일상 (0)
곧 추가할 내용 (0)
추후 알아볼것들... (0)

최근에 받은 트랙백

달력

«   2022/01   »
            1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30 31          
Total : 388,970
Today : 0 Yesterday : 65