[html기초] 목록, 리스트를 나타내는 태그 <ul>, <ol>, <dl>, <li>태그

html을 배우면서 뭔가를 만들어지는 것이 신기하기도 하지만, 한편으로는 태그 하나 혹은 단어 하나만 틀려도 실행이 안돼서  짜증 나는 일이 많이 생길 것 같네요!

오늘은 태그 중에서 목록을 나타내는 태그! <ul>,<ol>,<dl>,<li>태그들이 어떻게 다른지 배웠습니다! 간단하고 재미있네요.. 아직은..ㅎ 

 

목록을 나타내는 태그 <ul>,<ol>,<dl>,<li>태그

---

<Ul></Ul>: 'Unoerdered List'의 약자로 순서가 없는 목록 태그입니다. 글머리 기호를 붙여서 목록을 만드는 태그!

<Ol></Ol>: 'Ordered List'의 약자로 순서가 있는 목록 태그입니다. 번호 형식으로 순서를 매겨 목록을 만드는 태그!

<Dl></Dl>: 'definition List'의 약자로 정의 목록을 만드는 태그입니다. 어떤 용어의 정의를 나열하는 태그!

<Li></Li>: 'List Item"의 약자로 ul 태그와 ol 태그의 내부에서 사용되는 태그입니다. 목록의 내용이 되는 실질적인 태그!

---

<ul> 태그

<ul>태그.html

글머리 기호를 붙여서 목록을 만드는 형식, <ul> 태그를 사용하면 ●의 모양으로 지정됩니다.

- <ul> 태그의 type을 변경: 아래의 type을 ""에 설정!

<ul type=""></ul>

• disc: ●

• circle: ○

• square: ■

- <li> 태그의  type을 변경: 아래의 type을 ""에 설정!

<li type=""></li>

• disc: ●

• circle: ○

• square: ■

<ol> 태그

<ol>태그.html

순서가 있는 목록을 만드는 형식으로 type 지정이 없을 경우 1,2,3...으로 지정됩니다.

- <ol> 태그의 type을 변경: 아래의 type을 ""에 설정!

<ol type=""></ol>

• 1: 숫자 (1,2,3...)

• A: 알파벳 대문자 (A, B, C...)

• a: 알파벳 소문자 (a, b, c...)

• i: 로마 숫자 (ⅰⅱⅲ...)

• I: 로마숫자 (ⅠⅡⅢ...)

*start: <ol> 태그에 사용하며 시작 값을 임의로 지정할 때 사용합니다!

 

- <li> 태그의 type을 변경: 아래의 type을 ""에 설정!

<li type=""></li>

• 1: 숫자 (1,2,3...)

• A: 알파벳 대문자 (A, B, C...)

• a: 알파벳 소문자 (a, b, c...)

• i: 로마 숫자 (ⅰⅱⅲ...)

• I: 로마숫자 (ⅠⅡⅢ...)

* value: <li> 태그에 사용하며 해당 항목부터 순서 값을 변경할 때 사용!

<dl> 태그

용어에 대한 정의 목록을 만드는 태그!

• <dt></dt>: 'Definintion term'의 약자로 용어의 제목을 나타내는 태그입니다. (줄 바꿈 기능이 있습니다.)

• <dd></dd>: 'Definintion description'의 약자로 용어에 대한 설명을 나타내는 태그입니다. (줄바꿈 기능이 있습니다.)