본문 바로가기
Frontend/HTML

HTML의 목록 태그

by 코딩쥐 2024. 6. 27.

 HTML의 목록태그는 나열되는 목록을 작성할 때 사용한다. 나열되는 목록을 작성하는 것에도 사용되지만, 웹 브라우저의 메뉴를 형성할 때 기본적으로 사용되는 태그다. 이번에 설명할 목록태그는 <ul>, <ol> 그리고 <dl> 태그다. 

 

목록 태그

  • <ul>
    　<li>목록</li>
    <ul>
    순서가 없고 목록화 할 수 있는 태그로, <ul type="none">으로 설정하여 웹 브라우저의 메뉴를 형성하는데 사용된다.

  • <ol>
    　<li>목록<li>
    <ol>
    순서가 있는 목록태그로 목록타입을 숫자, 영대소문자, 로마 대소문자 및 역순으로 설정이 가능하다. 
목록타입 작성타입
<ol>  기본적으로 숫자(1,2,3,4..)
<ol type="a">  영어 소문자(a,b,c,d..)순
<ol type="A">  영어 대문자(A,B,C,D..)순
<ol type="i"> 로마 소문자(i,ii,iii...)순
<ol type="I"> 로마 대문자(I,II,III..)순
<ol type="1" start="5">  숫자 5부터 (5,6,7,8..) 작성
<ol type="1" start="5" reversed> 숫자 5부터 역순으로(5,4,3,2,1..) 작성

 

  • <dl>
    　<dt>제목</dt> 
    　<dd>내용</dd>
    <dl>
    용어와 설명에 대한 내용을 적는 리스트 태그로 거의 사용이 되지 않으며, 내용이 들여쓰기가 된다.

 리스트 안에 다른 리스트를 중첩할 수 있으며, 중첩된 리스트는 안으로 들여쓰기가 되며 마커의 경우 빈 원(circle)으로 기본 지정이 된다. 

 

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!--emmet: ul>li*2 -->
    <ul>
        <li>기본적인</li>
        <li>〈ul〉목록태그</li>
    </ul>
    <ul type="none">
        <li>〈ul〉태그</li>
        <li>type이 none일때</li>
        <ul>
            <li>ul안에 ul을 넣었을 경우 type을 지정안해도</li>
            <li>알아서 type이 circle로 변경된다.</li>
        </ul>
    </ul>
    <!-- emmet: ul[type="none" style="display:flex"]>li*2 -->
    <ul type="none" style="display: flex">
        <li>〈ul〉태그 type="none"일때</li>
        <li>&nbsp;display="flex"일때</li>
    </ul>

    <!-- emmet: (ol>li*2)*7 -->
    <ol>
        <li>기본적인</li>
        <ul>
            <li>ol태그 안에 ul태그를 넣었다.</li>
            <li>알아서 들여쓰기가 된다.</li>
        </ul>
        <li>목록태그</li>
    </ol>
    <ol type="a">
        <li>태그타입</li>
        <li>type="a"</li>
    </ol>
    <ol type="A">
        <li>태그타입</li>
        <li>type="A"</li>
    </ol>
    <ol type="i">
        <li>태그타입</li>
        <li>type="i"</li>
    </ol>
    <ol type="I">
        <li>태그타입</li>
        <li>type="I"</li>
    </ol>
    <ol start="5">
        <li>〈ol〉태그 start속성</li>
        <li>속성값부터 시작</li>
    </ol>
    <ol start="5" reversed>
        <li>〈ol〉태그 reversed속성</li>
        <li>속성값 역순으로 시작</li>
    </ol>

    <!-- emmet: dl>dt+dd -->
    <dl>
        <dt>제목</dt>
        <dd>내용은 안쪽으로 들어감</dd>
    </dl>
</body>
</html>

'Frontend > HTML' 카테고리의 다른 글

HTML의 폼 요소를 사용해보자  (0) 2024.06.30
HTML 웹 페이지를 통해 사용자 입력을 받는 폼을 만들어 보자  (0) 2024.06.29
HTML 페이지 내에 다른 HTML을 출력해보자 (<iframe>태그)  (0) 2024.06.28
HTML에서 표(table)를 만들어보자  (0) 2024.06.27
HTML의 <a>태그에 대해 알아보자  (0) 2024.06.27
HTML 이미지 삽입을 할 수 있는 <img>태그에 대해 알아보자  (0) 2024.06.27
HTML의 텍스트 관련 태그  (0) 2024.06.26
HTML의 기본 문법에 대하여  (0) 2024.06.26

관련글

티스토리툴바