[HTML] 목록 만들기

✨순서 있는 목록을 만드는 <ol>, <li> 태그

• <ol> : 'ordered list'의 줄임말.
             기본적으로 숫자 1, 2, 3, ... 으로 번호를 붙임
• <li> : 'list'의 줄임말

<!-- 기본형 -->
<ol>
  <li>항목1</li>
  <li>항목2</li>
</ol>

💡 <ol> 태그의 type, start 속성

 1. type 속성

• <ol> 에서 type 속성을 사용하면 영문자나 로마 숫자 등으로 순서를 나타낼 수 있음

• type 속성에서 사용할 수 있는 태그의 속성값
  

  • 종류	설명
    type = "1"	숫자(기본값)
    type = "a"	영문 소문자
    type = "A"	영문 대문자
    type = "i"	로마 숫자 소문자
    type = "I"	로마 숫자 대문자

• 순서 목록은 기본적으로 '1'부터 시작하지만 start 속성을 사용해서 시작 번호를 바꿀 수 있음

<ol type="a" start="4">
  <li>볼에 샐러드 채소와 레드향, 아보카도, 토마토를 넣고 드레싱을 뿌리면 끝!</li>
</ol>

✨순서 없는 목록을 만드는 <ul>, <li> 태그

• <ul> : 'unordered list'의 줄임말
• 항목의 순서가 중요하지 않을 때 사용

<!-- 기본형 -->
<ul>
  <li>항목1</li>
  <li>항목2</li>
</ul>

✨설명 목록을 만드는 <dl>, <dt>, <dd> 태그

• 설명 목록 : 이름과 값 형태로 된 목록
  • ex) 사전에서 단어명과 설명이 있는 모습
• <dl> 태그
  • definition list의 준말
  • 용어를 설명하는 목록을 만듦
• <dt> 태그
  • definiton term의 준말
  • 이름(단어명) 부분을 지정하는 태그
  • 정의되는 용어의 제목을 넣을 때 사용
• <dd> 태그
  • definition description의 준말
  • 값(설명) 부분을 지정하는 태그
  • 용어를 설명하는 데 사용
• 형식
  • <dl>과 </dl> 태그 사이에 한 쌍의 <dt> 태그와 <dd> 태그를 넣는다.
  • 이때 <dt> 태그 하나에 <dd> 태그를 여러 개 사용할 수도 있다.

<!-- 기본형 -->
<dl>
  <dt>이름</dt>
  <dd>값</dd>
</dl>

예제

<h2>총의 종류</h2>
    <dl>
        <dt>권총</dt>
        <dd>Glock</dd>
        <dd>Beretta</dd>
        <dd>P2000</dd>
    </dl>
    <dl>
        <dt>소총</dt>
        <dd>M1 Garand</dd>
        <dd>SVT-40</dd>
        <dd>MP507</dd>
    </dl>

실행 결과

출처 : Do it! HTML+CSS+자바스크립트 웹 표준의 정석 (고경희, 이지스퍼블리싱)