HTML CSS JS

HTML / 요소 - 문자 콘텐츠 - OL, UL, LI

Programmers 2021. 6. 3. 09:44
반응형

HTML / 요소 - 문자 콘텐츠

목록을 만드는 태그

<ol> + <li>

<ul> + <li>

ol: ordered list 순서대로, 중요도를 의미할 수 있다.
블록 요소

ul: unordered list 순서 필요하지 않은
리스트 아이템

li: 는 단독으로 사용 안되고 <ol>이나 <ul>의 자식으로 포함되어야 한다.

 

ul태그 예제

<body>
   <ul>
       <li>
           Apple
           <ul>
               <li>Apple</li>
               <li>Banana</li>
               <li>Mango</li>
           </ul>
       </li>
       <li>Banana</li>
       <li>Mango</li>
   </ul>
</body>

 

ol태그 예제 1

<body>
   <ol>
       <li>
           Apple
           <ol>
               <li>Apple</li>
               <li>Banana</li>
               <li>Mango</li>
           </ol>
       </li>
       <li>Banana</li>
       <li>Mango</li>
   </ol>
</body>

 

ol태그 예제 2

<body>
   <ol type="a">
       <li>
           Apple
           <ol reversed>
               <li>Apple</li>
               <li>Banana</li>
               <li>Mango</li>
           </ol>
       </li>
       <li>Banana</li>
       <li>Mango</li>
   </ol>
</body>

ol태그의 type속성을 통해서 a, A, 1,.. 등 을 사용할 수 있다.
reversed속성은 값의 순서를 바꾸는 것이 아닌 순서를 역순으로 바꿔준다. 우선순위를 역순으로 할 때 사용할 수 있겠다. 

 

ol태그 예제 3

<body>
   <ol start="10">
       <li>
           Apple
           <ol>
               <li>Apple</li>
               <li>Banana</li>
               <li>Mango</li>
           </ol>
       </li>
       <li>Banana</li>
       <li>Mango</li>
   </ol>
</body>

start속성을 통해서 10부터 순서를 출력할 수 있다.

 

li태그 예제

<body>
   <ol>
       <li value="7">
           Apple
           <ul>
               <li>Apple</li>
               <li>Banana</li>
               <li>Mango</li>
           </ul>
       </li>
       <li value="99">Banana</li>
       <li>Mango</li>
   </ol>
</body>

li태그의 value속성을 통해서 이하의 항목의 순서를 다시 지정한다.

반응형
저작자표시 비영리 변경금지 (새창열림)
댓글수0