<ol> 태그는 Ordered List의 줄임말로 순서가 있는 목록을 표현할 경우에 사용한다고 이전 포스팅에서 배웠습니다.
- 이전 포스팅 참조 : itfix.tistory.com/647
그렇다면, ol 태그는 미리 정해진 방식으로만 순서가 표시되어야 하는 걸까요?
아닙니다. ol 태그는 type을 이용하여 <ol type="">처럼 표기하여 리스트의 표현 방식을 직접 지정할 수 있습니다.
사용할 수 있는 속성값은 아래와 같습니다.
- 속성값 1 : 10진수 숫자로 순서를 표현하게 됩니다. ex) 1, 2, 3
- 속성값 a : 소문자 알파벳 순서로 순서를 표현하게 됩니다. ex) a, b, c
- 속성값 A : 대문자 알파벳 순서로 순서를 표현하게 됩니다. ex) A, B, C
- 속성값 i : 로마 숫자 소문자로 순서를 표현하게 됩니다. ex) ⅰ, ⅱ, ⅲ
- 속성값 I : 로마 숫자 대문자로 순서를 표현하게 됩니다. ex) Ⅰ, Ⅱ, Ⅲ
<ol type>을 이용하면 로마 숫자도 자동으로 입력되므로 윈도우의 로마 숫자 입력방법을 알 필요는 없지만, 참고로 윈도우즈에서는 한글 'ㅈ'이 선택된 상태에서 한자 키를 눌러 로마 숫자를 선택 및 입력할 수 있습니다.
아래의 예제 코드블록의 내용은 이전 포스팅에서 예제로 사용했던 파일인데 <ul> 태그의 내용이었던 차량들도 설명을 위하여 <ol> 태그로 전환하였습니다.
<html lang="ko">
<head>
<meta charset="utf-8">
<title>HTML</title>
</head>
<body>
<ol type="i">
<li>1억</li>
<li>5억</li>
<li>10억</li>
</ol>
<ol type="I">
<li>벤츠</li>
<li>아우디</li>
<li>재규어</li>
</ol>
</body>
</html>
위의 내용은 아래처럼 보이게 됩니다.
- 1억
- 5억
- 10억
- 벤츠
- 아우디
- 재규어
'HTML > HTML 기초' 카테고리의 다른 글
| HTML5, <div> 태그에 관하여 알아 보기 (0) | 2020.08.03 |
|---|---|
| HTML5, <dl> <dt> <dd> 태그 알아 보기 (0) | 2020.08.02 |
| HTML5, <ol> <ul> <li> 태그 알아 보기 (0) | 2020.08.02 |
| HTML5, <b> <strong> <i> <em> 태그 알아 보기 (0) | 2020.08.02 |