스타일 시트 CSS 목록 표시를 위한 list-style 속성 다루는 방법

스타일시트 CSS

스타일 시트 CSS 목록 표시를 위한 list-style 속성 다루는 방법

 

환경: Eclipse Mars

 

HTML 에서 목록을 표시하는 태그는 <ol>, <ul> 입니다. 그리고 목록 내의 항목은 <il> 태그로 표현합니다. 이 태그에 list-style 속성을 사용해서 기본 값이 아닌 다양한 형태의 목록을 만들어 보겠습니다.

 

먼저 목록 관련 스타일은 3가지가 있습니다. list-style-type 은 미리 정의된 기호의 종류를 지정하며 list-style-position 은 글머리 기호의 위치를 정합니다. 마지막 list-style-image 는 미리 정의된 기호가 아닌 사용자가 png, jpg 등의 이미지를 지정해서 사용할 수 있습니다.

 

list-style-type 미리 정의된 기호를 사용해서 표현하기

 

list-style-type 의 속성값들은 다음과 같습니다. 크게 기호와 문자로 나누는데 문자도 로마자와 알파벳으로 나누어 집니다. 이외에도 많이 있지만 자주 쓰이는 것들이 아니라서 제외했습니다.

 

l none : 머리글을 표시하지 않는다.

l disc : 검은색 바탕의 원을 표시한다.

l circle : 비어 있는 원을 표시한다.

l decimal : 숫자를 표시한다.

l lower-roman : 소문자 로마자를 표시한다.

l upper-roman : 대문자 로마자를 표시한다.

l lower-alpha : 영문 소문자를 표시한다.

l upper-alpha : 영문 대문자를 표시한다.

 

샘플 소스는 다음과 같습니다. 

<!DOCTYPE HTML>
<html>
<head>
<meta charset="euc-kr">
<title>CSS</title>
<style type="text/css">
	body {
		background-color: #e7e7e7;
	}
	ul#type1 { list-style: disc; }
	ul#type2 { list-style: circle; }
	ul#type3 { list-style: decimal; }
	ul#type4 { list-style: lower-roman; }
	ul#type5 { list-style: upper-roman; }
	ul#type6 { list-style: lower-alpha; }
	ul#type7 { list-style: upper-alpha; }
</style>
</head>
<body>
	<h2>회사소개</h2>
	<ul id="type1">
		<li>개요</li>
		<li>비전</li>
		<li>경영진소개</li>
	</ul>
	<h2>회사소개</h2>
	<ul id="type2">
		<li>개요</li>
		<li>비전</li>
		<li>경영진소개</li>
	</ul>
	<h2>회사소개</h2>
	<ul id="type3">
		<li>개요</li>
		<li>비전</li>
		<li>경영진소개</li>
	</ul>
	<h2>회사소개</h2>
	<ul id="type4">
		<li>개요</li>
		<li>비전</li>
		<li>경영진소개</li>
	</ul>
	<h2>회사소개</h2>
	<ul id="type5">
		<li>개요</li>
		<li>비전</li>
		<li>경영진소개</li>
	</ul>
	<h2>회사소개</h2>
	<ul id="type6">
		<li>개요</li>
		<li>비전</li>
		<li>경영진소개</li>
	</ul>
	<h2>회사소개</h2>
	<ul id="type7">
		<li>개요</li>
		<li>비전</li>
		<li>경영진소개</li>
	</ul>
</body>
</html>

스타일 시트 CSS 목록 표시를 위한 list-style 속성 다루는 방법

스타일 시트 CSS 목록 표시를 위한 list-style 속성 다루는 방법

 

list-style-position 글머리 기호의 위치 조정하기

 

글머리의 위치를 정하는 list-style-position 은 두 가지 값을 가지고 있습니다. inside 는 기본값인 outside 보다 조금 안쪽으로 목록이 들어가게 됩니다

<!DOCTYPE HTML>
<html>
<head>
<meta charset="euc-kr">
<title>CSS</title>
<style type="text/css">
	body {
		background-color: #e7e7e7;
	}
	ul#type1 { list-style: disc; }
	ul#type2 { list-style: disc; list-style-position: inside }
	ul#type3 { list-style: disc; list-style-position: outside }
</style>
</head>
<body>
	<h2>회사소개</h2>
	<ul id="type1">
		<li>개요</li>
		<li>비전</li>
		<li>경영진소개</li>
	</ul>
	<h2>회사소개</h2>
	<ul id="type2">
		<li>개요</li>
		<li>비전</li>
		<li>경영진소개</li>
	</ul>
	<h2>회사소개</h2>
	<ul id="type3">
		<li>개요</li>
		<li>비전</li>
		<li>경영진소개</li>
	</ul>
</body>
</html>

스타일 시트 CSS 목록 표시를 위한 list-style 속성 다루는 방법

 

list-style-image 미리 정의된 기호가 아닌 사용자 지정 이미지 추가

 

list-style-type 에서 머리글 기호의 속성값들은 미리 정의된 상수값들입니다. 이것들 만으로 만족하지 못한다면 다른 외부 이미지로 머리글을 꾸밀 수가 있습니다. 아래 그림처럼 url 의 인수 값으로 이미지 상대 주소 값을 넘기면 머리글에 이미지를 표현할 수 있습니다

<!DOCTYPE HTML>
<html>
<head>
<meta charset="euc-kr">
<title>CSS</title>
<style type="text/css">
	ul { 
		list-style-image: url(folder.png);
	} 
</style>
</head>
<body>
	<h2>회사소개</h2>
	<ul>
		<li>개요</li>
		<li>비전</li>
		<li>경영진소개</li>
	</ul>
</body>
</html>

스타일 시트 CSS 목록 표시를 위한 list-style 속성 다루는 방법


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