[HTML] 문자 콘텐츠(1) - ol, ul, li, dl, dt, dd

 

▶ <ol>, <ul>, <li>

• 각 항목(<li>)의 정렬된 목록(<ol>)이나 정렬되지 않은 목록(<ul>)을 설정.

• 목록을 구성하는 태그로 <ol> + <li> 또는 <ul> + <li>가 한 세트를 이룸.

  - <ol>: Ordered List. 순서가 있어야 하는 목록.

  - <ul>: Unordered List. 순서가 필요하지 않은 목록.

  - <li>: List Item. 목록 안에 있는 각각의 항목.

•  <ol>과 <ul>은 자식으로 <li>만 포함 가능. 반드시 <li>를 포함해 세트로 사용해야 함.

• <li>는 단독으로 사용될 수 없음. <ol>이나 <ul>에 자식 요소로 포함되어 있어야 함. 

• 정렬된 목록(<ol>)의 항목 순서는 중요도를 의미할 수 있어 중요도 표시에 활용 가능.

• <ol>과 <ul>은 Block level 요소.

• <li>의 경우 display: list-item;. Block level 요소에 소속된 개념.
  - <ol>, <ul>이 block 요소기 때문에 그 안에 자식 요소로 포함되는 <li> 또한 block 요소로 인식하고 사용해도 무방함. 

<ul>의 사용 및 결과 화면

  - <ul> <li> 내에 다시 <ul>을 사용. 결과 화면 확인 시 들여쓰기가 되어 있는 것을 볼 수 있음.
  - 목록을 실제로 타이핑할 경우에도 들여쓰기를 통해 포함 관계를 나타내는 것처럼 활용할 수 있음. 

 

<ol>의 사용 및 결과 화면

  - <ol> 사용 시 순서라는 의미로 각각의 목록이 숫자로 표시됨.

 

• <ol> 속성

  · start: 항목에 매겨지는 번호의 시작 값. 숫자 1이 기본값.

<ol>의 start 속성을 3으로 지정(좌), 결과 화면(우)

    - start 속성 지정 시 지정한 숫자부터 시작됨.

  · type: 항목에 매겨지는 번호의 유형. a, A, i, I, 1의 값 적용 가능.

<ol>의 type 속성 사용 예시

 
· reversed: 역순 정렬. IE 지원 불가.

    - 목록 내용의 물리적인 위치는 그대로 있고 항목이 가지는 실질적인 순서만 바뀜.
    - 중요도를 바꾸는 데 사용.
    - reversed 속성은 boolean 값으로 reversed="reversed" 또는 reversed로도 작성 가능함.

 

• <li>: 목록을 구성하는 항목을 설정.

· value 속성: 항목의 순서를 설정. 숫자를 값으로 가지며 value 속성 지정 시 이하 항목들의 순서가 다시 지정됨.

<li>의 value 속성 사용 예시(1)

  - 7에서부터 항목의 순서가 시작됨.

  - Banana와 Mango는 value 속성을 지정하지 않았음에도 이전 항목이 7부터 시작되기 때문에 8, 9로 순서가 바뀜.

 

<li>의 value 속성 사용 예시(2)

  - 처음의 Apple 항목은 value를 7로 지정했기 때문에 7. 이후 Banana의 value를 99로 적용.

  - Mango는 value 속성을 지정하지 않았으나 Banana가 가지는 99 다음 숫자인 100이라는 숫자를 가짐.
  - value 속성 지정 후 다음 <li>에서 value를 지정하지 않을 경우 value 값을 입력한 부분부터 순서가 다시 시작하게 됨.

 

• 일반적으로 <ol>보다는 <ul>을 많이 사용함.
  - <ol>에는 중요도 개념이 반영되는데 리스트상에서 순서나 중요도가 없는 경우가 더 많기 때문.
  - 반드시 순서를 가져야 하는 목록이 아니라면 <ul>로 작업을 하는 것이 좋음.

 

 

 

▶ <dl>, <dt>, <dd>

• 용어의 집합을 만들어냄. 용어를 정의할 때 사용.

• 용어(<dt>)와 정의(<dd>) 쌍들의 영역(<dl>)을 설정.
  - <dt>: Definition Term. 용어를 명시함.
  - <dd>: Definition Details. 용어를 정의함.
  - <dl>: Description List. 용어와 설명의 전체 집합을 나타냄.

• <dl>은 <dd>, <dt>만 자식 요소로 가질 수 있음.

• '용어 = 설명, 용어 = 설명, ...'과 같이 쌍으로 키(key)/값(value)의 형식을 표시할 때 유용함.

• Block level 요소.

• <dl></dl> 내에는 <dt>, <dd> 외에 다른 요소가 자식으로 포함될 수 없기 때문에 <dt>, <dd>에 대한 부분을 스타일링하기 까다로움.

  - 많이 활용되지 못하는 이유. 스타일링을 위해 <ul>과 <li> 등 다른 태그로 대체해 사용되는 경우가 많음.

<dl>, <dt>, <dd>의 사용과 <ul>, <li>를 이용한 대체 사용.