|
스타일 시트 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>
|
◎ 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>
|
◎ 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' 카테고리의 다른 글
| 스타일시트 CSS text-align 을 이용한 정렬 방법 (1) | 2019.12.29 |
|---|---|
| 스타일시트 CSS margin 을 주는 방법 (2) | 2019.11.23 |
| 스타일 시트 CSS 리스트 속성으로 ul 태그를 메뉴로 만드는 방법 (0) | 2019.05.08 |
| 스타일 시트 CSS 목록 표시 list-style-image 속성 이미지와 텍스트가 정렬 안될 때 (0) | 2019.04.08 |
| 스타일 시트 CSS gradient 종류 중 linear-gradient 그라데이션 적용하는 방법 (0) | 2019.03.17 |
| 스타일 시트 CSS 대소문자 전환을 위한 text-transform 속성 사용하기 (0) | 2019.03.06 |
| 스타일 시트 CSS 공백 문자, 빈칸, 줄 바꿈 처리를 위한 white-space 속성 사용하기 (0) | 2019.02.21 |
| 스타일 시트 CSS 텍스트 꾸밈과 관련된 스타일 모음 (0) | 2019.02.12 |
