2. 컴퓨터 이야기/프로그래밍

ul ol li 정리

래빗 크리스 2010. 3. 22. 13:06



자주 잊어 버려서 정리해 둡니다.

ul 은 Un-ordered List 즉, 순서 없이 목록화 하는 것이고,
ol 은 Ordered List 즉, 순서를 표시한 목록 입니다.

ul 이나 ol 로 둘러싸지 않고 그냥 li 로만 기술해도 됩니다만,
나중을 위해서라면 포함 관계를 고려 해야겠죠.

ul 과 ol 의 type 은 하위 항목인  li 에 상속 됩니다.
다만 li 에 기술된 type 이 있으면 ul 이나 ol 보다 li 의 type 이 최종 적용 됩니다.
그렇더라도, ul 에서 사용할 수 있는 type 과 ol 에서 사용할 수 있는 type 이 정해져 있지요.

ol 에 맞는 type 이 있고, ul 에 맞는 type 이 있습니다.
ul 에 맞는 type 을 ol 쪽에 기술해 봐야 헛수고 이고, 반대의 상황도 마찬가지 입니다.

ul 이라고 하면,
disc, circle, square 등 3가지가 적용되고, type 이 기술되지 않으면 default 는 disc 가 적용됩니다.
li 의 type 이 없을때 ul 에 기술된 type 이 적용됩니다.
li 에 disc/circle/square 등 3가지 이외의 type 이 기술된다면 disc 로 인식됩니다.

ol 이라고 하면,
A, a, I, i 등 4가지가 적용되고, type 이 기술되지 않으면 default 는 아라비아 숫자가 적용됩니다.
li 의 type 이 없을때 ol 에 기술된 type 이 적용되는데, 이 마저 없다면 아라비아 숫자가 나옵니다.
li 에 A/a/I/i 등 4가지 이외의 type 이 기술된다면 아라비아 숫자로 인식됩니다.

 


<ol type="circle">
 <li>none</li>
 <li type="circle">circle</li>
 <li type="disc">disc</li>
 <li type="square">square</li>
 <li type="A">A</li>
 <li type="a">a</li>
 <li type="I">I</li>
 <li type="i">i</li>
</ol>



<ul type="circle">
 <li>none</li>
 <li type="circle">circle</li>
 <li type="disc">disc</li>
 <li type="square">square</li>
 <li type="A">A</li>
 <li type="a">a</li>
 <li type="I">I</li>
 <li type="i">i</li>
</ul>



<ol>
 <li>none</li>
 <li type="circle">circle</li>
 <li type="disc">disc</li>
 <li type="square">square</li>
 <li type="A">A</li>
 <li type="a">a</li>
 <li type="I">I</li>
 <li type="i">i</li>
</ol>



<ul type="circle">
 <li>none</li>
 <li type="circle">circle</li>
 <li type="disc">disc</li>
 <li type="square">square</li>
 <li type="A">A</li>
 <li type="a">a</li>
 <li type="I">I</li>
 <li type="i">i</li>
</ul>