[NO.04-2] HTML List 태그 -목록 태그

<목록 태그>

- < ol  > Ordered List

순서가 있는 목록을 표현할 떄 사용한다. type 속성으로 글머리 기호를 변경할 수 있다. (ex. 계란후라이 만드는 방법)

 

- < ul  > Unordered Lists

순서가 없는 목록을 표현할 떄 사용한다. (ex. 데드 리프트, 스쿼트, 벤치 리프트처럼 순서가 없는 목록)

 

- < li > Listed Item (하위 태그)

목록하위 항목으로 사용되며, <ul> 태그 또는 <ol> 태그의 하위에 위치한다.

 

계란 후라아이의 방법을 < ol > 과 < li > 태그를 이용한 예시

 

출력 결과

 

헬스 운동의 종류를 < ul >과 < li > 태그를 이용한 예시

 

출력 결과

 

- < dl > Definition List

사전처럼 용어를 설명하는 목록을 만든다. (ex. A는 B이다. 와 같은 Key = Value로 사용할 떄 유용하다.)

 

- < dt > Definition Term (하위 태그)

정의 되는 용어의 제목을 넣을 때 사용한다.

 

- < dd > Definition Description (하위 태그)

용어를 설명하는데 사용한다.

 

< dl > 과 < dt > 그리고 < dd > 태그를 이용한 예시

 

출력 결과

 

주의사항!!

1. < dl > 태그는 하나 이상의 < dt >-< dd > 쌍의 태그를 갖고 있어야 한다.

(반드시 하나의 짝으로 지어져야 하는건 아님 => < dt > 태그 2개에 < dd > 태그 한 개도 가능! )

 

2. < li >나 < dt > - < dd > 태그는 독립적으로 사용불가능하다. -> 하위 태그이기 때문에 상위 태그랑 같이 써야 함.

 

3. < ul > 태그의 하위 요소로는 < li > 태그가 위치해야 한다.