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;ul&gt;&lt;li&gt; 사용법<br />
  9.     &lt;ul&gt; 사용 용도는 목록 모양 스타일 지정합니다.(속성-type, compact)<br />
  10.     &lt;li&gt; 사용 용도는 목록 모양 출력합니다.(속성-value, type)<br />
  11.     <hr />
  12.     <b>&lt;ul&gt; : 1.속성-type은 3가지로 출력합니다.(기본은 disc)</b><br /><br />
  13.     <div id="ex_view2" style="float: left; width: 120px;">
  14.       1. 동그라미
  15.       <ul type="disc">
  16.      <h3>과일</h3>
  17.      <li>사과</li>
  18.      <li>딸기</li>
  19.      <li>자두</li>
  20.      <li>포도</li>
  21.       </ul>
  22.     </div>
  23.     <div id="ex_view2" style="float: left; width: 120px;">
  24.       2. 사각형
  25.       <ul type="square">
  26.      <h3>과일</h3>
  27.      <li>사과</li>
  28.      <li>딸기</li>
  29.      <li>자두</li>
  30.      <li>포도</li>
  31.       </ul>
  32.     </div>
  33.     <div id="ex_view2" style="float: left; width: 120px;">
  34.       3. 원모양
  35.       <ul type="circle">
  36.      <h3>과일</h3>
  37.      <li>사과</li>
  38.      <li>딸기</li>
  39.      <li>자두</li>
  40.      <li>포도</li>
  41.       </ul>
  42.     </div>
  43.     <hr style="clear:left;"/>
  44.     <div id="ex_view2" style="clear:left; float: left; padding: 0 0 0 10px;">
  45.       <br />
  46.       <b>&lt;ul&gt; : 2.속성-compact는 HTML4부터 지원이 안됩니다.</b><br />
  47.        HTML5에서 지원되지 않습니다. <br />
  48.        대신 CSS에서 지원해줍니다.<br />
  49.        CSS 구문 : &lt;ul style="line-height: 80%"&gt; <br />
  50.        목록의 줄 높이를 줄입니다.
  51.       <ul style="line-height: 80%">
  52.         <h3>과일</h3>
  53.         <li>사과</li>
  54.         <li>딸기</li>
  55.         <li>자두</li>
  56.         <li>포도</li>
  57.       </ul>
  58.     </div>
  59.     <br />
  60.     <hr style="clear:left;"/>
  61.     <div id="ex_view2" style="clear:left; float: left; padding: 0 0 0 10px;">
  62.     <br />
  63.     <b>&lt;li&gt; : 1.속성-value 시작번호는 변경합니다.(&lt;ul&gt;만 가능합니다.)</b><br /><br />
  64.     </div>
  65.     <br />
  66.     <hr style="clear:left;"/>
  67.     <div id="ex_view2" style="clear:left; float: left; padding: 0 0 0 10px;">
  68.    <br />
  69.    <b>&lt;li&gt; : 2.속성-type 목록 항목의 글 머리 스타일을 지정합니다.</b><br />
  70.    HTML 4.01에서 더 이상 사용되지 않습니다. <br />
  71.    HTML5에서 지원되지 않습니다. <br />
  72.    대신 CSS에서 지원해줍니다.<br />
  73.    CSS 구문 : &lt;li style="list-style-type:square"&gt; <br />
  74.    목록에서 목록 항목의 글 머리 스타일을 지정합니다.<br />
  75.       <ul>
  76.      <h3>과일</h3>
  77.      <li>사과</li>
  78.      <li style="list-style-type:disc">사과</li>
  79.      <li>딸기</li>
  80.      <li value=22>딸기</li>
  81.      <li>자두</li>
  82.      <li style="list-style-type:square">포도</li>
  83.      <li style="list-style-type:circle">포도</li>
  84.       </ul>
  85.     </div>
  86.     <hr style="clear:left;"/>
  87.     <div style="clear:left;">
  88.       &lt;lh&gt;태그는 HTML3.0이후 채택이 안되어서<br />
  89.       브라우저에서 지원이 안됩니다.(&lt;hn&gt;권고)<br />
  90.     </div>
  91.   </body>
  92. </html>

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

위 소스 예제 보기


<ul></ul>

<li></li>


<ul목록 모양 스타일 지정합니다.

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

<li> 목록 모양 출력합니다.

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


Global Attributes 지원합니다.

Global Event Attributes 지원합니다.


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

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


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

◀ PREV | 1 | ··· | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | ··· | 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