ul, ol 그리고 li의 정체

순번이 없는 리스트

<ul>

 <li>리스트1 </li>

 <li>리스트2 </li>

 <li>리스트3 </li>

</ul>

순번이 있는 리스트

<ol>

 <li>리스트1 </li>

 <li>리스트2 </li>

 <li>리스트3 </li>

</ol>

< 스타일지정 방법 >

- 기본

<div id="sidebar">

 <ul>

<li> List1 </li>

<li> List2 </li>

<li> List3 </li>

 </ul>

</div>

-머릿그림 없애기

<div id="sidebar">

 <ul>

<li> List1 </li>

<li> List2 </li>

<li> List3 </li>

 </ul>

</div>

#sidebar ul       {list-style:none;}

#sidebar ul li     {list-style:none;}

-여백 없애기(앞에 딱 붙음)

<div id="sidebar">

 <ul>

<li> List1 </li>

<li> List2 </li>

<li> List3 </li>

 </ul>

</div>

#sidebar ul       {list-style:none; padding:0; margin:0;}

#sidebar ul li     {list-style:none;}

-구분 선 넢기

<div id="sidebar">

 <ul>

<li> List1 </li>

<li> List2 </li>

<li> List3 </li>

 </ul>

</div>

#sidebar ul       {list-style:none; padding:0; margin:0;}

#sidebar ul li     {list-style:none;border-bottom:1px solid #000;}

-마우스 오버 효과

<div id="sidebar">

 <ul>

<li> List1 </li>

<li> List2 </li>

<li> List3 </li>

 </ul>

</div>

#sidebar ul       {list-style:none; padding:0; margin:0;}

#sidebar ul li     {list-style:none; border-bottom:1px solid #000;}

#sidebar ul li:hover    {background-color:#ccc;}

< 출처 > http://blog.designersnote.net/trackback/17