<ol> 태그는 Ordered List 의 약자로 일련번호가 있는 기호를 머리글에 붙이는데 사용합니다. <ul> 태그의 list-style-type 속성을 함께 사용하면 숫자, 영문자, 로마자 등을 나타낼 수 있습니다. 기본은 숫자 입니다. 그리고 숫자는 start 속성으로 시작 위치를 지정하는 것이 가능합니다.
▼ <ol> 은 <ul> 과 달리 일련번호가 있는 목록을 제공합니다. 숫자, 영문자, 로마자 등을 표현할 수 있으며, list-style-type 속성 값에 따라 달라 집니다. 속성 값에 대한 설명은 아래와 같습니다.
l decimal : 기본값으로 숫자가 적용됩니다.
l lower-alpha : 영어 소문자가 적용됩니다.
l upper-alpha : 영어 대문자가 적용됩니다.
l lower-roman : 소문자 로마 숫자가 적용됩니다.
l upper-alpha : 대문자 모마 숫자가 적용됩니다.
▼ 아래 샘플에 적용된 스타일은 ol 태그의 기본값입니다. 스타일에 아무것도 적용하지 않고 태그만 사용했을 때 아래 값이 들어갑니다. 들여쓰기의 크기는 padding-left 로 조절하시면 됩니다.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="euc-kr">
<title>HTML</title>
<style type="text/css">
body {
background-color: #e7e7e7;
}
ol {
display: block;
list-style-type: decimal;
margin-top: 1em;
margin-bottom: 1em;
margin-left: 0;
margin-right: 0;
padding-left: 40px;
}
</style>
</head>
<body>
<h3>소설책 제목</h3>
<ol>
<li>오만과 편견</li>
<li>오디세이</li>
<li>위대한 개츠비</li>
<li>이방인</li>
<li>일리야드</li>
</ol>
</body>
</html>
| ※ 아래는 참고하면 좋을 만한 글들의 링크를 모아둔 것입니다. ※ ▶ HTML 입력한 형태 그대로 보여 주는 pre 태그 사용법 ▶ 크롬 브라우저 웹 페이지 소스 보기, HTML 디자인 확인하기 ▶ 윈도우 메모장에 HTML 문서 작성하는 방법 ▶ HTML 단락 들여쓰기 blockquote 태그 사용하는 방법 ▶ HTML 입력양식 input 태그 HTML5 추가된 type 타입 에 대한 설명 |
▼ 아래 샘플은 5가지 속성값 중에 로마자와 알파벳으로 목록을 표현한 것입니다. 그리고 마지막에 <ol> 태그의 start 속성값으로 1부터가 아닌 임의의 시작 값을 지정했습니다.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="euc-kr">
<title>HTML</title>
<style type="text/css">
body {
background-color: #e7e7e7;
}
</style>
</head>
<body>
<h3>소설책 제목</h3>
<ol style="list-style-type:upper-alpha">
<li>오만과 편견</li>
<li>오디세이</li>
<li>위대한 개츠비</li>
<li>이방인</li>
</ol>
<ol style="list-style-type:upper-roman">
<li>오만과 편견</li>
<li>오디세이</li>
<li>위대한 개츠비</li>
<li>이방인</li>
</ol>
<ol style="list-style-type:decimal" start="10">
<li>오만과 편견</li>
<li>오디세이</li>
<li>위대한 개츠비</li>
<li>이방인</li>
</ol>
</body>
</html>
▼ 아래 샘플은 다른 표현 방식입니다. ol 에서 지정한 스타일 중간에 다른 형식으로 바꿀 수 있습니다. 첫 번째 샘플은 <li> 태그에 list-style-type 속성값을 지정해서 다른 형태의 머리글을 만들었습니다. 두 번째 샘플에서는 <li> 태그의 value 속성으로 차례대로 진행되던 값을 변경했습니다. A, B, C ... 로 머리글이 나와야 하지만 value="10" 으로 변경했기 때문에 10번째 알파벳인 "J" 부터 시작하게 됩니다.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="euc-kr">
<title>HTML</title>
<style type="text/css">
body {
background-color: #e7e7e7;
}
</style>
</head>
<body>
<h3>소설책 제목</h3>
<ol style="list-style-type:upper-alpha">
<li>오만과 편견</li>
<li style="list-style-type:decimal">오디세이</li>
<li>위대한 개츠비</li>
<li>이방인</li>
</ol>
<ol style="list-style-type:upper-alpha">
<li>오만과 편견</li>
<li value="10">오디세이</li>
<li>위대한 개츠비</li>
<li>이방인</li>
</ol>
</body>
</html>
| ※ 아래는 참고하면 좋을 만한 글들의 링크를 모아둔 것입니다. ※ ▶ HTML 입력한 형태 그대로 보여 주는 pre 태그 사용법 ▶ 크롬 브라우저 웹 페이지 소스 보기, HTML 디자인 확인하기 ▶ 윈도우 메모장에 HTML 문서 작성하는 방법 ▶ HTML 단락 들여쓰기 blockquote 태그 사용하는 방법 ▶ HTML 입력양식 input 태그 HTML5 추가된 type 타입 에 대한 설명 |
'웹 프로그래밍 > HTML' 카테고리의 다른 글
| HTML 단락 들여쓰기 blockquote 태그 사용하는 방법 (1) | 2024.03.07 |
|---|---|
| 윈도우 메모장에 HTML 문서 작성하는 방법 (1) | 2024.02.20 |
| HTML 구분선, 수평선을 그을 때 이용하는 hr 태그 사용법 (1) | 2024.01.12 |
| HTML 입력한 형태 그대로 보여 주는 pre 태그 사용법 (1) | 2022.12.16 |
| HTML div, span 태그 사용법과 차이 (20) | 2022.12.07 |
| HTML 용어 정의할 때 사용하는 dl, dt, dd 태그 사용법 (1) | 2022.12.01 |
| HTML 하이퍼링크 a 태그 id 속성으로 내부 링크(책갈피) 기능 구현하는 방법 (7) | 2022.11.18 |
| HTML 하이퍼링크 a 태그로 사이트 연결하기 (1) | 2022.11.09 |
