[HTML/CSS] 목록 관련 태그

기본 목록 나열 리스트 - <li>

<li>목록1</li>
<li>목록2</li>

 

순서 없는 목록 태그 - <ul>

<ul>
    <li>HTML
        <ul>
            <!--목록안에 목록을 넣을 수 있다-->
            <li>글자관련</li>
            <li>목록관련</li>
        </ul>
    </li>
    <li>CSS</li>
    <li>JavaScript</li>
    <li>jQuery</li>
</ul>

 

순서 있는 목록 태그 - <ol>

설정 가능 속성값

순서 표기 타입 : type="숫자(기본) / a / A / i"

시작 번호 설정 : start="시작번호"

역순 표기 : reversed

<!-- 표기타입 로마숫자 -->
<ol type="i">
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
    <li>jQuery</li>
</ol>

<!-- 5번부터 시작하고 싶은 경우 -->
<ol start="5">
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
    <li>jQuery</li>
</ol>

<!-- 역순 -->
<ol reversed>
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
    <li>jQuery</li>
</ol>

 

설명 관련 목록 태그 - <dl><dt><dd>

<dt> : 제목

<dd> : 설명(내용)

<dl>
    <dt>이곳은 제목을 설정하는 태그</dt>
    <dd>여기에 해당 설명을 작성</dd>
    <dd>여러줄도 작성 가능</dd>

    <dt>또 다른 제목 설정 가능</dt>
    <dd>다른 제목 안의 설명도 작성</dd>
</dl>