HTML 리스트 - li, ul, ol, dl

리스트란?

HTML에서 작성한 문자들을 일렬로 나열하여
목록으로 표현해주는 태그입니다.

리스트의 종류에는 ul, ol, dl 있는데요
이번 시간에는 3개의 사용법에 대해서 알아보도록 하겠습니다.

1. 순서가 없는 리스트 ul 

<ul> 태그를 사용하며 작은 점으로 리스트가 표시 됩니다.
이 모양은 스타일 속성을 통해서 모양을 변경할 수 있습니다.
- disc : 검정색 작은 원 모양 (기본)
- circle : 흰색 작은 원 모양
- square : 사각형 모양

<p>검정색 작은 원 모양 (기본)</p>
<ul>
    <li>돼지고기 1 </li>
    <li>돼지고기 2 </li>
    <li>돼지고기 3 </li>
</ul>

    <p>흰색 작은 원 모양</p>
<ul style="list-style-type: circle">
    <li>소고기 1 </li>
    <li>소고기 2 </li>
    <li>소고기 3 </li>
</ul>

    <p>검정색 사각형 모양</p>
<ul style="list-style-type: square">
    <li>양고기 1 </li>
    <li>양고기 2 </li>
    <li>양고기 3 </li>
</ul>

 

 

2. 순서가 있는 리스트 ol 

<ol> 태그를 사용하며 숫자로 리스트가 표시됩니다.
다양한 순서를 나타내는 숫자로 변경이 가능합니다.

- decimal : 숫자 (기본설정)
- upper-alpha : 영문 대문자
- lower-alpha : 영문 소문자
- upper-roman : 로마 숫자 대문자
- lower-roman : 로마 숫자 소문자

    <p>숫자 (기본)</p>
<ol>
    <li>돼지고기 1 </li>
    <li>돼지고기 2 </li>
    <li>돼지고기 3 </li>
</ol>

<p>영어 대문자</p>
<ol style="list-style-type: upper-alpha">
    <li>소고기 1 </li>
    <li>소고기 2 </li>
    <li>소고기 3 </li>
</ol>

<p>영어 소문자</p>
<ol style="list-style-type: lower-alpha">
    <li>양고기 1 </li>
    <li>양고기 2 </li>
    <li>양고기 3 </li>
</ol>

<p>로마자 대문자</p>
 <ol style="list-style-type: upper-roman">
    <li>양고기 1 </li>
    <li>양고기 2 </li>
    <li>양고기 3 </li>
</ol>

<p>로마자 소문자</p>
<ol style="list-style-type: lower-roman">
    <li>양고기 1 </li>
    <li>양고기 2 </li>
    <li>양고기 3 </li>
</ol>

 

3. 정의 리스트 dl 

<dl> 태그를 사용하며 <dt>에는 용어의 이름이 <dd>에는 해당 용어의 정으가 들어갑니다.

<dl>
    <dt>자동차</dt>
    <dd> 4개의 바퀴로 움직이는 탈것</dd>
    <br>
    <dt>자전거</dt>
    <dd> 2개의 바퀴로 움직이는 탈것</dd>
</dl>

이상으로 HTML 리스트에 대한 설명을 마치겠습니다.