HTML 입문 | HTML 기본 요소 | HTML 리스트(list)


리스트(list)란 여러 요소들을 일렬로 나열한 목록이나 명단을 의미한다.
HTML에서는 여러 요소들을 일렬로 나열한 목록이나 명단을 표현 할 수 있는 태그를 제공하고 있다.

  1. 순서가 있는 목록(ordered list)
  2. 순서가 없는 목록(unordered list)
  3. 정의 목록(definition list)

순서가 있는 목록(ordered list)

순서가 있는 목록는 <ol>태그로 작성하고, 여기에 포함되는 각각의 리스트 요소는 <li>태그로 작성한다. 각각의 목록 요소 앞에는 기본 마커(marker)로 아라비아 숫자가 표시된다.

<ul>
  <li>HTML</li>
  <li>Java</li>
  <li>C++</li>
</ul>

코드 실행

CSS의 list-style-type 속성을 사용하면 리스트 요소 앞에 위치하는 마커(marker)를 다른 모양으로 변경할 수 있다.

  • decimal : 숫자 (기본설정)
  • upper-alpha : 영문 대문자
  • lower-alpha : 영문 소문자
  • upper-roman : 로마 숫자 대문자
  • lower-roman : 로마 숫자 소문자
<p>decimal : 숫자 (기본설정)</p>
<ol>
  <li>HTML</li>
  <li>Java</li>
  <li>C++</li>
</ol>
  
<p>upper-alpha : 영문 대문자</p>
<ol style="list-style-type: upper-alpha">
  <li>HTML</li>
  <li>Java</li>
  <li>C++</li>
</ol>
  
<p>lower-alpha : 영문 소문자</p>
<ol style="list-style-type: lower-alpha">
  <li>HTML</li>
  <li>Java</li>
  <li>C++</li>
</ol>
  
<p>upper-roman : 로마 숫자 대문자</p>
<ol style="list-style-type: upper-roman">
  <li>HTML</li>
  <li>Java</li>
  <li>C++</li>
</ol>
  
<p>lower-roman : 로마 숫자 소문자</p>
<ol style="list-style-type: lower-roman">
  <li>HTML</li>
  <li>Java</li>
  <li>C++</li>
</ol>

코드 실행

순서가 없는 목록(unordered list)

순서가 없는 목록은 <ul> 태그로 작성하고, 여기에 포함되는 각각의 목록 요소는 <li>태그로 작성한다. 각각의 목록 요소 앞에는 기본 마커(marker)로 검정색의 작은 원(bullet)이 표시된다.

<ul>
    <li>HTML</li>
    <li>Java</li>
    <li>C++</li>
</ul>

코드 실행

CSS의 list-style-type 속성을 사용하면 리스트 요소 앞에 위치하는 마커(marker)를 다른 모양으로 변경할 수 있다.

  • disc : 검정색 작은 원형 모양 (기본설정)
  • circle : 흰색 작은 원형 모양
  • square : 사각형 모양
<p>disc : 검정색 작은 원형 모양 (기본설정)</p>
<ul>
  <li>HTML</li>
  <li>Java</li>
  <li>C++</li>
</ul>
  
<p>circle : 흰색 작은 원형 모양</p>
<ul style="list-style-type: circle">
  <li>HTML</li>
  <li>Java</li>
  <li>C++</li>
</ul>

<p>square : 사각형 모양</p>
<ul style="list-style-type: square">
  <li>HTML</li>
  <li>Java</li>
  <li>C++</li>
</ul>

코드 실행

정의 목록(definition list)

정의 목록은 용어와 그에 대한 정의를 모아놓은 목록으로 <dl>태그로 작성한다. <dt>태그에는 용어가 들어가고, <dd>태그에는 해당 용어에 대한 정의가 들어간다.

<dl>
  <dt>HTML</dt>
  <dd>Hyper Text Markup Language</dd>
  <dt>XML</dt>
  <dd>eXtensible Markup Language</dd>
</dl>

코드 실행