[HTML] 텍스트 관련 태그(3) - 목록을 만드는 태그

 

 

 

ul > li 순서 없는 목록 만들기(순서 없는 기호)

<ul>
    <li></li>
    <li></li>
    <li></li>
</ul>

- ul : unordered list의 줄임말

- li : list item의 줄임말

- 각 항목 앞에 작은 원이나 사각형 같은 불릿(bullet)이 붙음

- 불릿은 css의 list-style-type 속성을 이용해 수정

  - list-style-type : dics(●), circle(○), square(■), none (불릿 없앰)

 

 

ol > li 순서 목록 만들기(순서 있는 기호)

<ol>
	<li></li>
	<li></li>
    <li></li>
</ol>

- ol : ordered list의 줄임말

- 목록의 숫자 표기 방법이나 시작하는 숫자 등을 바꿀 수 있음

- 속성

  - type : 숫자의 종류를 다양하게 조절할 수 있음

    - 1(숫자.기본값), a(영문 소문자), A(영문 대문자), i(로마숫자 소문자), I(로마숫자 대문자)

    - type 속성대신 css의 list-style-type 속성을 이용해서 지정 가능

      - decimal(1,2,3...), decimal-leading-zero(01,02,03...), lower-roman(i,ii,iii...), upper-roman(I-II-III...)

      - lower-alpha또는 lower-latin(a,b,c...), upper-alpha 또는 upper-latin(A,B,C...)

      - armenian(아르메니아 숫자(?)), georgian(an,ban,gan... 조지 왕조시대의 숫자(?))

  - start : 기본적으로 1부터 시작하고, 이 속성을 사용하면 원하는 번호부터 시작 가능

  - reversed : 항목을 역순으로 표시

 

 

dl > dt / dd 설명 목록 만들기 (제목-설명)

<dl>
    <dt>제목</dt>
    <dd>설명1</dd>
    <dd>설명2</dd>
    <dd>설명3</dd>
</dl>

- dl : description list의 줄임말

- 단어/정의 목록이나 질문/답 목록에서 사용

- dl 태그는 목록을 만들어 주고, dt 태그는 제목, dd 태그는 설명을 표시

- 하나의 dt 태그에 여러개의 dd 태그 값을 가질 수도 있고, 여러개의 dt 태그를 가질 수도 있음