HTML5

[HTML5] 리스트 태그 <ol>, <ul>, <dl>

FRDYtheme 2022. 9. 22. 11:00

1. 순서가 있는 목록 태그 <ol>

 

  • 순서가 있는 목록 태그는 <ol>로 작성한다.
  • <ol>은 블록 요소이며 자동으로 숫자가 부여되는 리스트 태그다.
<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8">
    <title>순서가 있는 목록 태그 ol</title>
  </head>
  <body>
    <ol>
      <li>ol과 li 사이엔 다른 태그가 올 수 없다.</li>
      <li>li태그 안에는 다양한 다른 태그들 작성 가능.</li>
      <li>ol과 li는 함께 사용. 둘 중 하나만 사용할 수 없다.</li>
      <li>꼭 순서가 필요한 리스트에 작성.</li>
      <li>start 속성 작성 시 작성한 숫자부터 시작.</li>
    </ol>
  </body>
</html>

 

<ol> 리스트 태그를 이용한 리스트 작성

  • 기본적으로 1부터 시작되지만 시작되는 숫자를 지정하고 싶으면 start 속성을 사용한다.
<ol start="10">
<li>start 속성을 작성하면</li>
<li>1부터 시작하는게 아니라</li>
<li>10부터 시작하게 만들 수 있다</li>

start 속성을 작성하면 시작하는 숫자를 지정 가능.

  • 특정 목록의 번호를 지정하려면 value 속성을 사용한다.
    <ol start="10">
      <li>start 속성을 작성하면</li>
      <li>1부터 시작하는게 아니라</li>
      <li>10부터 시작하게 만들 수 있다</li>
      <li value="15">이것만 15로 만들고 싶다.</li>

value 속성을 작성하면 특정 목록의 숫자를 지정할 수 있다.


2. 순서가 없는 목록 태그 <ul>

 

  • 순서가 없는 목록 태그는 <ul>로 작성한다.
  • <ul>은 블록 요소 / 블릿 기호로 표시되는 리스트 태그다.
<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8">
    <title>순서가 없는 목록 태그 ul</title>
  </head>
  <body>
    <ul>
      <li>ul과 li 사이엔 다른 태그가 올 수 없다.</li>
      <li>li태그 안에는 다른 다양한 태그들 작성 가능.</li>
      <li>ul과 li는 함께 사용. 둘 중 하나만 사용할 수 없다.</li>
    </ul>
    
    <h3>요리 재료</h3>
    <ul>
      <li>감자 3개</li>
      <li>육두구 1t</li>
      <li>소금 1t</li>
      <li>생크림 500ml</li>
      <li>버터 1T</li>
    </ul>
  </body>
</html>

<ul>태그를 사용한 리스트 작성.

  • 목록에 붙는 블릿 기호는 기본적으로 '점'이다. 다른 모양으로 변경하려면 CSS를 활용하는게 좋다.

3. 정의형 목록 태그 <dl>

 

  • 정의형 목록 태그로 용어의 정의, 설명, 참고문헌, 메타데이터 등 다양하게 사용하며 <dl>로 작성한다.
  • <dl>은 블록 요소이다.
  • 일부 os에서 dl의 정의가 다르기 때문에 접근성이 좋지 않다.
<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8">
    <title>정의형 목록 태그 dl</title>
  </head>
  <body>
    <dl>
      <dt>dt : 항목의 제목, 용어..</dt>
      <dd>dd : 위의 제목이나 용어의 설명란</dd>
      <dd>dl, dt, dd 모두 블록 요소</dd>

      <dt>html이란?</dt>
      <dd>하이퍼 텍스트 마크업 랭귀지, 웹문서의 구조를 담당한다.</dd>

      <dt>css란?</dt>
      <dt>cascading style sheets란?</dt>
      <dd>웹 문서의 디자인을 담당한다.</dd>
    </dl>
  </body>
</html>

정의형 목록 태그 <dl>

  • <dl>태그는 <ol>, <ul> 태그와 달리 dl과 dt, dd 사이에 다른 태그를 작성할 수 있다.
    <dl>
      <div>
        <dt>dl은?</dt>
        <dd>ol, ul과 달리 dl과 dt, dd 사이에 다른 태그를 작성할 수 있다.</dd>
      </div>
          <div>
            <dt>dl은?</dt>
            <dd>ol, ul과 달리 dl과 dt, dd 사이에 다른 태그를 작성할 수 있다.</dd>
          </div>
    </dl>

4. 중첩 리스트

  • 리스트끼리는 서로 중첩이 가능하며 <ol>, <ul> 태그는 꼭 <li></li>태그 사이에 다른 태그가 들어가야한다.
<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8">
    <title>중첩 리스트</title>
  </head>
  <body>
    <ul>
      <li>ol이나ul과 li 사이가 아니라
        <ul>
          <li>li와 /li 태그 사이에 들어가야한다.
            <ul>
              <li>기본은 점모양이지만 중첩 될수록
                <ul>
                  <li>모양이 바뀌는데
                    <ul>
                      <li>html로는 네모가 최대인가보다.</li>
                    </ul>
                  </li>
                </ul>
              </li>
            </ul>
          </li>
        </ul>
      </li>
      <li>ul끼리만 되는게 아니라
        <ol>
          <li>ul안에 ol 혹은 그 반대도 가능하다.</li>
          <li>dl도 되는지 확인해보자
            <dl>
              <dt>dl은 되나요?</dt>
              <dd>된다.</dd>
            </dl>
          </li>
          <li>다음은 3번</li>
        </ol>
      </li>
    </ul>
  </body>
</html>

<ol>, <ul>, <dl> 중첩 리스트 태그