일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | |||||
3 | 4 | 5 | 6 | 7 | 8 | 9 |
10 | 11 | 12 | 13 | 14 | 15 | 16 |
17 | 18 | 19 | 20 | 21 | 22 | 23 |
24 | 25 | 26 | 27 | 28 | 29 | 30 |
- table
- 배열
- json
- 이클립스
- Java
- 자바스크립트
- javascript
- 이탈리아
- IntelliJ
- date
- ArrayList
- 인텔리제이
- Maven
- 자바
- Eclipse
- Array
- Button
- CMD
- Visual Studio Code
- vscode
- html
- 테이블
- input
- 문자열
- list
- Files
- windows
- js
- string
- CSS
- Today
- Total
어제 오늘 내일
[HTML] 순서있는 목록 만들기 -<ol> 태그 본문
지난번에는 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.
순서가 있는 목록을 만드는 방법을 알아보았다.
'IT > HTML&CSS' 카테고리의 다른 글
[HTML] 굵은 글씨(bold, 볼드체) 표현하기 (1) | 2017.08.15 |
---|---|
[html] 링크(link), 하이퍼링크(Hyperlink) 걸기 (0) | 2017.08.13 |
[HTML] 순서없는 목록 만들기, <ul><li> 태그 (0) | 2017.07.26 |
[HTML] 테이블 제목 지정하기, caption tag (0) | 2017.07.11 |
[HTML] 기본 테이블(표, Table) 그리기 (table, tr, td, th) (1) | 2017.07.10 |