[html] 비순서형, 순서형, 정의형 목록 만들기

목차와 메뉴 구성을 위해 사용하거나, 그 외 웹 페이지의 다양한 곳에서 사용할 수 있다. 목록 생성에 사용할 수 있는 태그는 ul, ol, dl 태그가 있다.

ul 태그

ul 태그는 (unordered list) 비순서형 목록 생성 시 사용된다. 목록 아래 내용은 li(list item) 태그로 구성된다.

<h1>인기 프로그래밍 언어</h1>
<ul>
  <li>Javascript</li>
  <li>Python</li>
  <li>Go</li>
</ul>

실행 결과 #1. <ul>태그 사용

 

ol 태그

ol 태그는 (ordered list) 순서형목록 생성 시 사용되며, ul 태그와 같이 li 태그를 사용한다.

<h1>인기 프로그래밍 언어</h1>
<ol>
  <li>Javascript</li>
  <li>Python</li>
  <li>Go</li>
</ol>

실행 결과 #2. <ol>태그 사용

 

dl 태그

dl 태그는 (description list) 정의형 목록 생성 시 사용되며, 용어와 용어 설명을 나열할때 사용한다. dl 태그 생성 시 li 태그 대신 dt, dd 태그로 작성한다.

<dl>
  <dt>HTML</dt>
  <dd>HTML은 Hyper Text Markup Language의 약자로 웹 문서의 구조를 설계하기 위한 목적으로 개발된 언어이다.</dd>
  <dt>CSS</dt>
  <dd>CSS는 Cascading Style Sheets의 약자로 웹 문서를 꾸미기 위한 목적으로 개발된 언어이다.</dd>
</dl>

실행 결과 #3. <dl>태그