[HTML] 순서있는 목록 만들기 -<ol> 태그

지난번에는 HTML에서 순서없는 목록을 만드는 방법을 알아보았다.

[HTML] 순서없는 목록 만들기,

이번에는 순서있는 목록, 

즉, 목록 앞에 의미없는 기호대신 순서를 나타낼 수 있는

숫자나 알파벳을 붙여서 나타내는 방법을 알아보도록 하겠다.

순서있는 목록 만들기, <ol> <li>

순서있는 목록을 만들기 위해서는

<ol> <li> 두 가지 태그를 사용해야 한다.

<ol>은 'Ordered List'의 약자이고,

<li>는 'List'의 약자이다.

순서없는 목록을 만드는 것과 마찬가지로

<li></li> 태그 안에는 목록을 만들 각각의 항목들을 작성하고,

이 <li></li> 태그들을 <ol></ol> 태그로 감싸면 

아래와 같이 숫자 목록이 만들어진다.

See the Pen 리스트6 by anna (@hianna) on CodePen.

목록 순번 기준 변경하기

이번에는 목록의 순번을 숫자 이외의 방법으로 나타내는 방법을 알아보자.

목록 순번 기준을 변경하기 위해서는

<ol> 태그 안에 'type' 속성을 추가해 주어야 한다.

'type'속성 안에 들어갈 수 있는 값은 아래와 같다.

1	로마 숫자(default)
A	알파벳(대문자)
a	알파벳(소문자)
I	로마숫자(대문자)
i	로마숫자(소문자)

아라비아 숫자 목록 예시

See the Pen 리스트7 by anna (@hianna) on CodePen.

대문자 목록 예시

See the Pen 리스트7 by anna (@hianna) on CodePen.

소문자 목록 예시

See the Pen 리스트7 by anna (@hianna) on CodePen.

로마 숫자(대문자) 목록 예시

See the Pen 리스트7 by anna (@hianna) on CodePen.

로마 숫자(소문자) 목록 예시

See the Pen 리스트7 by anna (@hianna) on CodePen.

type값을 지정하지 않으면 기본적으로 아라비아 숫자가 적용된다.

시작 숫자 지정하기

이번에는 목록의 시작 숫자를 1이 아닌 다른 숫자로 변경하는 방법을 알아보도록 하겠다.

시작 숫자를 변경하기 위해서는 <ol> 태그 안에 'start' 속성을 지정해 주어야 한다.

다음은 101번부터 시작하는 목록의 예시이다.

See the Pen 리스트7 by anna (@hianna) on CodePen.

그렇다면, 알파벳 'C'부터 시작하는 목록은 어떻게 만들까?

아래와 같이 'type'을 'A'로 지정하고, 

'C'는 알파벳의 3번째 문자이므로 ''start'값을 '3'으로 지정하면 된다.

See the Pen 리스트7 by anna (@hianna) on CodePen.

순서가 있는 목록을 만드는 방법을 알아보았다.