HTML 일련번호가 있는 목록 나열 ol, li 태그 사용법

HTML

HTML 일련번호가 있는 목록 나열 ol, li 태그 사용법

 

환경: Eclipse Mars

 

<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 일련번호가 있는 목록 나열 ol, li 태그 사용법

 

아래 샘플은 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>

HTML 일련번호가 있는 목록 나열 ol, li 태그 사용법

 

아래 샘플은 또 다른 표현 방식입니다. ol 에서 지정한 스타일 중간에 다른 형식으로 바꿀 수 있습니다. <li> 태그에 list-style-type 속성값을 지정해 주면 별도로 지정이 가능합니다. 그리고 <li> 태그의 value 속성으로 차례대로 진행되던 값을 변경할 수 있습니다. 다음에 10 이 나와야 하는데 value=”20” 으로 세팅 하게 되면 20부터 다시 시작하는 것이죠.

<!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 일련번호가 있는 목록 나열 ol, li 태그 사용법

 

저작자 표시 비영리 변경 금지
신고
Posted by 녹두장군