홈페이지에 사용하는 리스트 표현 방법 (ul,li,ol,dt,dd,dl)

홈페이지를 제작하면서 빠지지 않는 리스트의 표현 방법입니다. 흔히 리스트를 표현할 때, 자음+한자를 넣어 "■ 리스트1번" 등으로 표현하는 간단한 문구부터, 숫자를 넣어서 표현하는 방법등, 헤깔리는 순서를 한번 짚고 넘어가는 포스팅입니다.

 

 

---

 

 

ul,li 

순서가 없는 목록을 만드는 리스트 태그문으로 목록의 시작은 ul로 시작하고 안에 리스트들은 li로 시작합니다. 순서 없는 목록은 기본적으로 작은 ㆍ이와같은 점을 만들게 되는데, 아예 css reset문에서 목록에 대한 점 표시를 none;으로 만들거나 많은 리스트를 만드는게 아니라면 html상에서 제거해도 무방합니다. ​ 

 

※ 기본 목록에서 ul에 style을 강제로 입력해 리스트에 대한 표시를 변경 할 수 있습니다.

<ul style="list-style-type:none;">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

 

list-style-type

disc	circle	square	none
● 기본값	○ 가운데가 비어있는 원	■ 사각형	없음

 

 

 

---

 

 

ol, li 

순서가 있는 목록을 만드는 태그문으로 앞서 순서가 없는 리스트에서는 모양을 변환한다면, 숫자를 넣는 리스트에서는 숫자를 대신해 각종 기호를 순번기호를 대신해 넣을 수 있습니다. 스타일로 제어하는 것이 아닌 타입만 써주면 됩니다.

<ol type="a">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

 

type

type="1"	type="A"	type="a"	type="I"	type="i"
순번표현 (기본값)	A,B,C 대문자 순번	a,b,c 소문자 순번	Ⅰ,Ⅱ,Ⅲ 대문자 로마숫자	ⅰ,ⅱ,ⅲ 소문자 로마숫자

 

 

---

 

 

dl,dt,dd 

이미지를 입력하고서 그에 대한 설명을 입력하는 등에 쓰이는 설명 리스트 목록입니다. dl로 시작하며, dt로 타이틀 목록을 만들고, dd로 그에 대한 설명을 해 줍니다. 모든 리스트를 ul,li로 해결하는 것 보다는 설명에 대한 목록 제공은 dt,dd로 해주는 것이 유지보수에 도움이 될 수 있습니다.

<dl>
  <dt>Coffee</dt>
  <dd>- black hot drink</dd>
  <dt>Milk</dt>
  <dd>- white cold drink</dd>
</dl>