HTML 목록 만들기

HTML

HTML 목록 만들기

기련이 2020. 5. 11. 18:15

무순서 목록

Coffee
Tea
- Black Tea
- Green Tea

순서 목록

비빔밥
볶음밥
김치찌개
된장찌개

정의형 목록

컴퓨터학: - 데이터통신; - 인공지능
기초과학: - 수학; - 물리학
디자인학: - 산업디자인; - 패션디자인

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>목록페이지</title>
</head>
<body>
<!--  HTML에서 목록의 종류
1. 무순서 목록 <ul>
2. 순서 목록    <ol>
3. 정의형 목록 <dl>

내부 항목 처리 태그 <li>
정의형 항목 처리 태그 <dt>
 -->
 <!-- 무순서 목록 -->
 <section>
    <article>
       <h2>무순서 목록</h2>
    <ul style="list-style-type : square;"> <!-- disc, circle, square, none  -->
          <li>Coffee</li>
          <li>Tea
             <ul>
                <li>Black Tea</li>
                <li>Green Tea</li>
             </ul>
          </li>
       </ul>
    </article>
 </section>
 <hr>
 <!-- 순서 목록 -->
 <section>
    <article>
       <h2> 순서 목록</h2>
       <ol type = "I"> <!-- A, I ,i -->
          <li>비빔밥</li>
          <li>볶음밥</li>
          <li>김치찌개</li>
          <li>된장찌개</li>
       </ol>
    </article>
 </section>
 <!-- 정의형 목록 -->
 <section>
    <article>
       <h2>정의형  목록</h2>
       <dl>
          <dt>컴퓨터학</dt>
             <dd>- 데이터통신</dd>
             <dd>- 인공지능</dd>
          <dt>기초과학</dt>
             <dd>- 수학</dd>
             <dd>- 물리학</dd>
          <dt>디자인학</dt>
             <dd>- 산업디자인</dd>
             <dd>- 패션디자인</dd>
       </dl>
    </article>
 </section>
</body>
</html>

<ul style="list-style-type : square;"> disc, circle, square, none 목록의 타입

순서 목록

<ol type = "I"> A, a, I ,i 목록 순서의 타입