HTML 입문 | HTML 기본 요소 | HTML 리스트(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>

코드 실행

최종 수정 : 2021-08-27