본문 바로가기

Programming/HTML

[HTML] 리스트 관련 태그

728x90

HTML에서 메뉴를 만들거나 리스트를 만들 때 쓰이는 태그들이 있다. 

각 태그들의 속성을 간단하게 정리하면 아래의 표와 같다.

  ul ol dl
특징 순서가 필요없는 목록 순서가 필요한 목록 용어를 설명하는 목록
항목 태그 li li dd

 -먼저  ul  태그를 살펴보면 

1
2
3
4
5
6
<ul>ul 정의
    <li>ul 메뉴</li>
    <li>ul 메뉴</li>
    <li>ul 메뉴</li>
    <li>ul 메뉴</li>
</ul>
 

ul  태그의 경우 li 태그 앞에 순서를 나타내는게 아닌 모두 동일한 조건의 리스트가 되는 모습을 볼 수 있다.

1
2
3
4
5
6
<ol>ol 정의
    <li>ol 메뉴</li>
    <li>ol 메뉴</li>
    <li>ol 메뉴</li>
    <li>ol 메뉴</li>
</ol>
 

ol  태그의 경우 li태그 앞에 순번을 나타내고 있다.

1
2
3
4
5
6
<dl>dl 정의
    <dd>dl 메뉴</dd>
    <dd>dl 메뉴</dd>
    <dd>dl 메뉴</dd>
    <dd>dl 메뉴</dd>
</dl>
 

dl  태그의 경우 ul  이나 ol  과 다르게 리스트 태그에 dd  를 사용한다. 

 

 

ol  태그의 경우 순번을 나타내는 방식을 숫자가 아닌 알파벳으로 바꾸어 줄 수도 있다.

만약에 ol  태그에 1 2 3 4 가 아닌 알파벳 A B C D 로 표현을 하고 싶다면

ol 태그의 속성값에 <ol type = "A" start="1"> 로 입력을 해주면 

순번 타입은 알파벳 대문자 A 이며 1번부터 시작, 즉 A B C D 순서대로 간다는 것 이다.

1
2
3
4
5
6
<ol type = "A" start="1">ol 정의
    <li>ol 메뉴</li>
    <li>ol 메뉴</li>
    <li>ol 메뉴</li>
    <li>ol 메뉴</li>
</ol>
 

type = "A" 의 경우 ol 리스트의 순번을 알파벳 대문자로 설정한다는 뜻 이며

start="1" 의 경우 ol 리스트의 순번을 1번째 즉 알파벳 대문자 A부터 시작한다는 뜻 이다.

단 주의할 점은 type 의 경우 알파벳 대 소문자를 구별하고 있다.