HTML／CSS／JS

[HTML5] 02.목록태그 (list,ul,ol,li)

DEV장화 2022. 10. 13. 11:05
728x90
반응형

 

 

태그 설명
ul 순서가 없는 목록
ol 순서가 있는 목록
li 목록 요소

 

ㄱ.순서가 없는 목록 

</head>
<body>
    <ul>
        <li>지구</li>
        <li>목성</li>
        <li>토성</li>
    </ul>
</body>

 

  • 지구
  • 목성
  • 토성

 

 

ㄱ.순서가 있는 목록 

<body>
    <ol>
        <li>지구</li>
        <li>목성</li>
        <li>토성</li>
    </ol>
</body>

 

  1. 지구
  2. 목성
  3. 토성

 

 

ㄷ.중첩 목록

<body>
    <ul>
        <!-- 첫번째 목록 -->
        <li>
            <b>지구형 행성</b>
            <ol>
                <li>수성</li>
                <li>금성</li>
                <li>지구</li>
                <li>화성</li>
            </ol>
        </li>
        <!-- 두번째 목록 -->
        <li>
            <b>목성형행성</b>
            <ol>
                <li>목성</li>
                <li>토성</li>
                <li>천왕성</li>
                <li>해왕성</li>
            </ol>
        </li>
    </ul>
</body>

 

  • 지구형 행성
    1. 수성
    2. 금성
    3. 지구
    4. 화성
  • 목성형행성
    1. 목성
    2. 토성
    3. 천왕성
    4. 해왕성

 

 

 

728x90
반응형