[HTML] 목록 태그 - OL 태그, UL 태그, DL 태그, LI 태그

 웹페이지에서 목록을 표시하는 방법을 정리합니다. 웹페이지를 작성하다보면 목록으로 표시하는 것이 편리하고 가독성을 높여줄 때가 있습니다. 이 때 사용하는 태그에는 크게 2가지 종류가 있습니다.

1. OL 태그

 순서가 있는 목록을 정리하는 태그입니다. Ordered List의 약자로 맨 앞에 숫자가 표시되는 특징이 있습니다. OL 태그 안에는 LI 태그로 각각의 목록을 적어 줍니다. LI는 List Item의 약자입니다.

<p> 심폐소생술의 단계 </p>
<ol type="1">
    <li> 의식이 있는지 확인한다 </li>
    <li> 119 신고 </li>
    <li> 심장압박 30회 실시(분당 100회 속도) </li>
    <li> 인공호흡 2회 실시(생략 가능) </li>
    <li> 119 도착시까지 반복 </li>
</ol>

심폐소생술의 단계 의식이 있는지 확인한다 119 신고 심장압박 30회 실시(분당 100회 속도) 인공호흡 2회 실시(생략 가능) 119 도착시까지 반복

 type 속성은 맨 앞에 나타나는 순서를 어떤 타입으로 표시할지를 결정합니다. 총 5가지 중에서 선택할 수 있습니다. 지정하지 않으면 숫자로 기본 표시됩니다.

속성값	설명
1	숫자(1, 2, 3, 4, ...)
A	영문대문자(A, B, C, ...)
I	로마자대문자(I, II, III, IV, ...)
a	영문소문자(a, b, c, ...)
i	로마자소문자(i, ii, iii, iv, ...)

 start 속성은 시작값을 지정해줄 수 있습니다. 예를 들어 3으로 지정한다면 숫자는 3부터 알파벳은 c부터 시작하게 됩니다.

<p> 심폐소생술의 단계 </p>
<ol type="A" start="3">
    <li> 의식이 있는지 확인한다 </li>
    <li> 119 신고 </li>
    <li> 심장압박 30회 실시(분당 100회 속도) </li>
    <li> 인공호흡 2회 실시(생략 가능) </li>
    <li> 119 도착시까지 반복 </li>
</ol>

심폐소생술의 단계 의식이 있는지 확인한다 119 신고 심장압박 30회 실시(분당 100회 속도) 인공호흡 2회 실시(생략 가능) 119 도착시까지 반복

그 밖에도 reversed 속성이 있는데요, 이것은 순서를 거꾸로 표시해 줍니다. 시험성적을 꼴찌부터 1등까지 표시하고자 한다면 적합한 속성이 되겠죠.

2. UL 태그

 OL 태그와 다르게 순서가 없는 목록을 작성할 때 사용합니다. 예를 들어 검색엔진의 종류라는 리스트를 만들려고 하면 UL 태그가 유용하겠지요. 그러나 검색엔진의 점유율 이라는 주제라면 OL 태그가 적합할 것입니다. 여기서도 UL 태그 안에는 LI 태그로 각 목록을 나타내 줍니다.

<p> 검색엔진의 종류 </p>
<ul type="circle">
    <li> 구글 </li>
    <li> 다음 </li>
    <li> 네이버 </li>
    <li> Zum </li>
    <li> Bing </li>
</ul>

검색엔진의 종류 구글 다음 네이버 Zum Bing

 불릿(bullet)은 텍스트 앞에서 주의를 끌기 위해 붙이는 작은 그래픽 문자를 의미합니다. UL 태그에서 type 속성으로 불릿을 설정할 수 있으며 3가지 종류가 있습니다. 지정하지 않으면 기본 circle로 보여집니다.

속성값	설명
circle	안이 채워진 동그라미
disc	안이 빈 동그라미
square	안이 채워진 정사각형

3. DL 태그

 Definition List를 의미하며 용어의 정의목록 등을 구현할 때 사용됩니다. 어떠한 단어나 구절에 대한 정의를 내릴 때 적절하게 보여줍니다. DL 태그 안에는 정의할 항목(용어)를 나타내는 DT 태그, 항목에 대한 세부설명을 적는 DD 태그가 있습니다.

<p> HTML 태그 정리 </p>
<dl>
    <dt> P 태그 </dt>
        <dd> 단락을 나타내는 태그로 Body 태그 안에 쓰인다 </dd>
    <dt> IMG 태그 </dt>
        <dd> 이미지를 표현하는 태그로 여러 속성을 가진다 </dd>
</dl>

HTML 태그 정리 P 태그 단락을 나타내는 태그로 Body 태그 안에 쓰인다 IMG 태그 이미지를 표현하는 태그로 여러 속성을 가진다