<ul> 리스트 </ul>, <ol> 리스트 </ol>

Lists

 

 

 

▶ 리스트(목록) 형태를 표현하고 싶을때 사용하는 태그이다. ol태그와 ul태그가 있다.

 

 

▶ ol, ul태그 안에는 반드시 li(list item)태그가 자식요소로 있어야 하며

무조건 li태그만 자식요소로 사용할수 있다.

 

<!-- 무조건 li태그를 사용해야 하므로 틀린 방법이다. -->
<ol>
    <a href=""></a>
    <img src="" alt="">
</ol>


<!-- li태그의 자식요소로는 다른 태그를 사용해도 되므로 맞는 방법이다. -->
<ol>
    <li>
        <a href=""></a>
        <img src="" alt="">
    </li>
</ol>

 

 

▶ ol(ordered list) 순서가 중요한 경우 사용하는 태그이다.

화면에는 글자옆에 위에서 아래 순서대로 숫자표시가 나타난다.

 

<h1> 멜론차트 </h1>
<ol> <!-- 순서가 중요하기 때문에 ol태그 사용 -->
    <li> Counting Stars (Feat. Beenzino) </li>
    <li> 회전목마 (Feat. Zion.T, 원슈타인) (Prod. Slom) </li>
    <li> 리무진 (Feat. MINO) (Prod. GRAY) </li>
    <li> 사랑은 늘 도망가 </li>
    <li> ELEVEN </li>
    <li> 만남은 쉽고 이별은 어려워 (Feat. Leellamarz) (Prod. TOIL) </li>
</ol>

 

 

▶ ul(unordered list) 순서가 상관없는 경우 사용하는 태그이다.

화면에는 글자 옆에 ● 표시가 나타나며 CSS로 제거할수 있다.

 

<h1> 하체운동 </h1>
<ul> <!-- 순서가 상관없기 때문에 ul태그 사용 -->
    <li> 스쿼트 </li>
    <li> 레그 프레스 </li>
    <li> 레그 레이즈 </li>
    <li> 스티프 데드리프트</li>
    <li> 레그컬 </li>
    <li> 레그 익스텐션 </li>
</ul>