목록

• 목록태그에는 ol, ul, dl태그가 있다.

• 각 태그별로 용도가 다르다.

• ol, ul태그 하위에 li태그를 사용한다.
  • li태그는 list의 약자

ol

• ol : orderedlist

• 말그대로 순서가 있는 리스트다.

• 순서가 있는 목차에 적합하다.

1. 순번1
2. 두번째
3. 삼번
4. 넷째

• 또한 숫자 뿐 아니라 영문이나 로마숫자로도 변경이 가능하다.

• 코드

<ol type = "a">
  <li>ol타입을</li>
  <li>영문 소문자로</li>
  <li>했을 경우</li>
</ol>

• 결과

  1. ol타입을
  2. 영문 소문자로
  3. 했을 경우

• 코드

<ol type = "A">
  <li>ol타입을</li>
  <li>영문 대문자로</li>
  <li>했을 경우</li>
</ol>

• 결과

  1. ol타입을
  2. 영문 대문자로
  3. 했을 경우

• 코드

<ol type = "i">
  <li>ol타입을</li>
  <li>로마 숫자 소문자로</li>
  <li>했을 경우</li>
</ol>

• 결과

  1. ol타입을
  2. 로마 숫자 소문자로
  3. 했을 경우

• 코드

<ol type = "I">
  <li>ol타입을</li>
  <li>로마 숫자 대문자로</li>
  <li>했을 경우</li>
</ol>

• 결과

  1. ol타입을
  2. 로마 숫자 대문자로
  3. 했을 경우

ol태그의 속성값

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

ul

• ul : unorderedlist

• ol과 마찬가지로 말 그대로 순서가 없는 리스트다.

• 순서가 없는 메뉴에 적합하다.

• 코드

<ul>
	<li>순서가 없는</li>
    <li>메뉴판 같은</li>
    <li>리스트에</li>
    <li>사용하기 적합</li>
</ul>

• 결과

  • 순서가 없는
  • 메뉴판 같은
  • 리스트에
  • 사용하기 적합

dl

• dl : descriptionlist

• 설명 목록이란 뜻으로 사전과 같은 목록의 용어와 설명을 나타내는데 적합한 리스트

• dt와 dd태그를 사용한다.

• dt는 용어, dd는 용어의 설명이다.

• dt태그 하나에 dd태그는 여러 개 사용할 수 있다.

• 코드

<dl>
  <dt>html</dt>
  <dd>hyper Text Markup Language의 약자다</dd>
  <dd>프로그래밍 언어는 아니고,
  우리가 보는 웹페이지가 어떻게 구조화되어 있는지
  브라우저로 하여금 알 수 있도록 하는 마크업 언어입니다.</dd>
</dl>

• 결과

  html hyper Text Markup Language의 약자다 프로그래밍 언어는 아니고, 우리가 보는 웹페이지가 어떻게 구조화되어 있는지 브라우저로 하여금 알 수 있도록 하는 마크업 언어입니다.