[HTML] 목록 만들기(ol,ul,li,dl,dt,dd 태그)

• <ol> , <li> 태그
• <ul> , <li> 태그
• <dl> , <dt> <dd> 태그

1. 순서가 있는 목록 <ol>, <li> 태그

ol은 ordered list 의 약자로 말 그대로 각 항목을 순서대로 나열한 것입니다.

<ol>
      <li>
        발라드
        <ol>
          <li>너의 번호를 누르고</li>
          <li>소주 한잔</li>
          <li>같은 배게</li>
        </ol>
      </li>
      <li>
        랩
        <ol>
          <li>네가 없는 밤</li>
          <li>리무진</li>
          <li>불도저</li>
        </ol>
      </li>
      <li>
        재즈
        <ol>
          <li>재즈</li>
          <li>아무것도</li>
          <li>몰라</li>
        </ol>
      </li>
    </ol>

좋아하는 음악장르를

1. 발라드
   1. 너의 번호를 누르고
   2. 소주 한잔
   3. 같은 배게
2. 랩
   1. 네가 없는 밤
   2. 리무진
   3. 불도저
3. 재즈
   1. 재즈
   2. 아무것도
   3. 몰라

type속성과 start속성을 이용해서 li앞에 이용되는 값들을 바꿀 수 있기도 합니다. 하지만 거의 사용되지 않는 속성이므로 넘어 가겠습니다.

2. 순서가 없는 목록 <ul>, <li> 태그

unordered list의 약자로 말그대로 순서가 없는 목록을 만드는 태그로 실제 웹사이트에서는 ol,li 보단 ul,li를 자주 이용합니다. 

<ul>
      <li>
        한식
        <ul>
          <li>불고기</li>
          <li>
            김치
            <ul>
              <li>나박김치</li>
              <li>오이김치</li>
              <li>
                열무김치
                <ol>
                  <li>매운 열무 김치</li>
                  <li>많이 매운 열무 김치</li>
                </ol>
              </li>
            </ul>
          </li>
          <li>갈비</li>
        </ul>
      </li>
      <li>
        일식
        <ul>
          <li>연어초밥</li>
          <li>텐동</li>
          <li>덮밥</li>
        </ul>
      </li>
      <li>중식</li>
      <li>양식</li>
    </ul>

좋아서하는 나라별 음식

• 한식
  • 불고기
  • 김치
    • 나박김치
    • 오이김치
    • 열무김치
      1. 매운 열무 김치
      2. 많이 매운 열무 김치
  • 갈비
• 일식
  • 연어초밥
  • 텐동
  • 덮밥
• 중식
• 양식

ol,li에서는 앞에 순서가 증가하는 숫자로 리스트를 나열했지만 ul, li는 불릿(bullet)이라고 불리는 작은 원이나 사각혀을 붙여서 구분합니다.

 

3. 설명하는 목록 <dl>, <dt>, <dd> 태그

설명 목록이란 이름과 값의 형태로 되 목록을 말하는 것 예를 들어 설명하자면 단어를 설명하고자 할 때 단어의 이름에 해당하는 것은 <dt>태그에 작성하고, <dd>에 해당하는 것은 그 단어에 대한 설명을 입력합니다.

<dl>
            <dt>눈</dt>
            <dd>물체를 볼 수 있는 감각기관</dd>
            <dd>하늘에서 대기로 떨어지는 얼음결정체</dd>
        </dl>
        <dl>
            <dt>HTML</dt>
            <dd>웹 문서를 구조화하는 데이터언어</dd>     
            <dd>HyperText Markup Language의 준말</dd>
            <dt>CSS</dt>
            <dd>구조화된 웹문서에 디자인을 입히는 언어</dd>
            <dd>Cascade StyleSheet의 준말</dd>
        </dl>

눈

물체를 볼 수 있는 감각기관

하늘에서 대기로 떨어지는 얼음결정체

HTML

웹 문서를 구조화하는 데이터언어

HyperText Markup Language의 준말

CSS

구조화된 웹문서에 디자인을 입히는 언어

Cascade StyleSheet의 준말

 

위와 같이 들여쓰기가 되고 dt로 두단어를 구분하는 것과 dl로 두단어를 구분하는 것의 차이는 dl로 구분해주게되면 기본 margin 값이 커서 dt로 구분하는 것보다 세로간격이 더욱 벌어지는 것을 알 수 있습니다.