HTML 리스트(ol, ul, li) 태그와 키와 값의 맵구조(dl, dt, dd) 태그로 리스트와 맵구조 만들기

HTML 리스트 목록 만들기(ol, ul, li)

HTML 문서 작성의 목록을 만들 때 목록의 스타일에 따라서 ol, ul 태그를 사용합니다. 

ol 태그는 숫자 및 알파벳 기호를 사용해서 순서가 있는 리스트 작성에 사용됩니다. 단계적인 리스트가 필요하거나 순서가 의미가 있는 리스트에는 ol 태그를 사용해서 정의해야 합니다.

ol 태그의 type 속성을 이용하면 순서를 매기는 기호를 변경할 수 있습니다. 
<ol type="1"> 와 같이 선언하시면 됩니다.

ol 태그 type 속성값

속성값

표현식

1

1, 2, 3

a

a, b, c

A

A, B, C

i

i, ii, iii

I

I, II, III


ul 태그는 순서와 상관없고 정렬이 필요 없는 리스트를 작성할 때 ul 태그를 사용하면 됩니다.

웹사이트의 메뉴 구성 및 이미지를 여러 장 보여줄 때, ul 태그를 사용해서 목록화하면 각 요소 정렬 및 그룹화하기 좋기 때문에 빈번하게 사용하는 태그입니다.

ol 태그와 ul 태그 안에 또다시 ol 태그와 ul 태그 등을 선언해서 중첩 선언하는 것이 가능합니다.

li 태그는 ol 태그와 ul 태그 안에 정의되어 각 목록 하나하나를 나타내는 태그입니다.


리스트 태그(ol, ul, li) 사용법

순서가 있는 ol 태그 사용 예시

<ol>
  <li>개회식</li>
  <li>개회</li>
  <li>행사진행</li>
  <li>폐막식</li>
</ol>

순서가 있는 ol 태그 사용 결과

  1. 개회식
  2. 개회사
  3. 행사진행
  4. 폐막식

순서가 필요없는 ul 태그 사용 예시

<ul>
  <li>윈도우 업데이트 작업</li>
       <ol>
         <li>설정 클릭</li>
         <li>업데이트 클릭</li>
         <li>업데이트 진행</li>
         <li>재부팅</li>
       </ol>
  <li>테스트 데이터 준비</li>
  <li>디버깅 작업</li>
  <li>배포 테스트</li>
</ul>

순서가 필요없는 ul 태그 사용 결과

  • 윈도우 업데이트 작업
    1. 설정 클릭
    2. 업데이트 클릭
    3. 업데이트 진행
    4. 재부팅
  • 테스트 데이터 준비
  • 디버깅 작업
  • 배포 테스트



HTML 그룹(키와 값) 목록 dl, dt, dd 태그

프로그래밍 언어에서 맵 구조라고 하면은 key와 value가 한 쌍이 되어 관리되는 파일 시스템입니다.

HTML에서는 dl, dt, dd 태그를 사용해서 구현하는데, 주로 단어 사전 구현이나 키값의 구조를 가지는 메타데이터를 선언할 때도 사용합니다.

간단한 사용법은 dl 태그를 선언 후 dt 태그에 이름(키) dd 태그에 내용(값)을 작성해 주시면 됩니다.

dl, dt, dd 태그 사용 예시

<dl>
    <dt>HTML</dt>
    <dd>웹 문서를 만들기 위해 사용하는 기본적인 웹 언어의 한 종류</dd>
    <dt>CSS</dt>
    <dd>웹 문서의 전반적인 스타일을 미리 저장해 둔 스타일시트</dd>
    <dt>JAVASCRIPT</dt>
    <dd>크로스 플랫폼, 객체지향 스크립트 언어로 웹페이지의 동작을 담당</dd>
</dl>

dl, dt, dd 태그 사용 결과

HTML
웹 문서를 만들기 위해 사용하는 기본적인 웹 언어의 한 종류
CSS
웹 문서의 전반적인 스타일을 미리 저장해 둔 스타일시트
JAVASCRIPT
크로스 플랫폼, 객체지향 스크립트 언어로 웹페이지의 동작을 담당