목록 만드는 방법 - ol, ul, dl

목록에는 순서가 있는 목록(Ordered List), 순서가 필요하지 않은 목록(Unordered
List), 설명 목록(Description List) 세 가지가 있습니다.

순서가 있는 목록(OL)

순서가 없는 목록(UL)

설명 목록(DL)

순서 있는 목록

순서가 필요한 목록(Ordered List)은 1, 2, 3, ···처럼 차례대로 증가하는 번호가
붙는 목록입니다.

순서가 필요한 목록은
<ol> 태그로, 목록의 내용은
<li> 태그로 만듭니다.

<h1>Ordered List</h1>
<ol>
  <li>Lorem</li>
  <li>Ipsum</li>
  <li>Dolor</li>
</ol>

class="codepen"
data-default-tab="html,result"
data-editable="true"
data-preview="true"
data-height="300"
data-pen-title="HTML 순서가 있는 목록 tutorial list ol, ul, dl 예제"
data-slug-hash="bGpQZGj"
data-theme-id="light"
data-user="LiveBlogger"
style="align-items: center; border: 2px solid; box-sizing: border-box; display: flex; height: 300px; justify-content: center; margin: 1em 0px; padding: 1em;"
>
로딩 중... 잠시만 기다려주세요.
자바스크립트를 허용해주세요.

시작하는 번호를 지정하려면 다음와 같이 합니다.

<ol start="5">

특정 목록의 번호를 지정하려면 다음와 같이 합니다.

<li value="9">

번호 지정을 이용한 간단한 예는 다음과 같습니다.

<ol start="5">
  <li>Lorem</li>
  <li>Ipsum</li>
  <li value="9">Dolor</li>
</ol>

class="codepen"
data-default-tab="html,result"
data-editable="true"
data-preview="true"
data-height="300"
data-pen-title="HTML 번호지정 tutorial list ol, ul, dl 예제"
data-slug-hash="BaKGbNV"
data-theme-id="light"
data-user="LiveBlogger"
style="align-items: center; border: 2px solid; box-sizing: border-box; display: flex; height: 300px; justify-content: center; margin: 1em 0px; padding: 1em;"
>
로딩 중... 잠시만 기다려주세요.
자바스크립트를 허용해주세요.

숫자 이외에 알파벳, 로마자, 이미지 등으로 순서를 매길 수
있습니다. 이는 HTML보다
>CSS를 이용 >하여 설정하는 게 좋습니다.

순서 없는 목록

순서 필요하지 않은 목록(Unordered List)은 번호 대신 점이나 사각형 등의 도형이
목록 앞에 붙습니다.

순서 필요하지 않은 목록은
<ul> 태그로, 목록의 내용은
<li> 태그로 만듭니다.

<h1>Unordered List</h1>
<ul>
  <li>Lorem</li>
  <li>Ipsum</li>
  <li>Dolor</li>
</ul>

class="codepen"
data-default-tab="html,result"
data-editable="true"
data-preview="true"
data-height="441"
data-pen-title="HTML 순서가 없는 목록 tutorial list ol, ul, dl 예제"
data-slug-hash="xxVQBZO"
data-theme-id="light"
data-user="LiveBlogger"
style="align-items: center; border: 2px solid; box-sizing: border-box; display: flex; height: 441px; justify-content: center; margin: 1em 0px; padding: 1em;"
>
로딩 중... 잠시만 기다려주세요.
자바스크립트를 허용해주세요.

목록 안의 목록

<li> 태그를 생략하고 목록 안에 또 다른 목록을 넣을 수
있습니다.

<h1>1박 2일 가족 여행 코스</h1>
<ol>
  <li>1일차
    <ol>
      <li>해녀박물관</li>
      <li>낚시체험</li>
      <li>한라수목원</li>
    </ol>
  </li>
  <li>2일차
    <ul>
      <li>송훈랜드
        <ul>
          <li>하이브레드</li>
          <li>크라운돼지</li>
        </ul>
      </li>
      <li>만장굴</li>
      <li>카약체험</li>
    </ul>
  </li>
  <li>3일차</li>
</ol>

class="codepen"
data-default-tab="html,result"
data-editable="true"
data-preview="true"
data-height="550"
data-pen-title="HTML 목록안의 목록 tutorial list ol, ul, dl 예제"
data-slug-hash="mdPQoEp"
data-theme-id="light"
data-user="LiveBlogger"
style="align-items: center; border: 2px solid; box-sizing: border-box; display: flex; height: 550px; justify-content: center; margin: 1em 0px; padding: 1em;"
>
로딩 중... 잠시만 기다려주세요.
자바스크립트를 허용해주세요.

설명 목록

설명 목록(Description List)은 용어와 그 뜻을 나열할 때 사용합니다. 예를 들어
'단어/정의' 목록이나 '질문/답' 목록에서 사용할 수 있습니다.

설명 목록은 <dl> >로, 용어 및 제목은 <dt>로, 그 뜻과 설명은
<dd>로 만듭니다.

<h1>제주 올레길</h1>
<dl>
  <dt>올레 1코스</dt>
  <dd>코스 : 시흥 초등학교 옆 - 갯골 생태 공원</dd>
  <dd>거리 : 14.6km(4~5시간)</dd>
  <dd>난이도 : 중</dd>
  <dt>올레 2코스</dt>
  <dd>코스 : 갯골 생태 공원 - 은평 교회</dd>
  <dd>거리 : 10km(3~4시간)</dd>
  <dd>난이도 : 중</dd>
</dl>