CSS 강좌 / 목록 꾸미기 ( list-style-type )
목록은 <ul> 또는 <ol> 태그로 만듭니다. 목록 앞에 붙는 도형이나 문자을 마커(Marker)라고 하는데,
어떤 형식 또는 모양의 마커를 사용할지는 list-style-type으로 정합니다.
속성값은 다음과 같습니다.
•<ul> : disc, circle, square
•<ol> : decimal, decimal-leading-zero, lower-roman, upper-roman, lower-greek, lower-latin, upper-latin, armenian, georgian, lower-alpha, upper-alpha
•공통 : none
의미상으로는 <ul>과 <ol>에 사용하는 속성값을 구분하는게 맞지만,
<ul>에 decimal을 사용하거나 <ol>에 disc를 사용하는 등 바꾸어 사용해도 됩니다.
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>CSS | list-style-type</title>
</head>
<body>
<h3>disc</h3>
<ul style="list-style-type: disc;">
<li>Lorem ipsum dolor sit amet</li>
<li>Aenean nec mollis nulla.</li>
</ul>
<h3>circle</h3>
<ul style="list-style-type: circle;">
<li>Lorem ipsum dolor sit amet</li>
<li>Aenean nec mollis nulla.</li>
</ul>
<h3>square</h3>
<ul style="list-style-type: square;">
<li>Lorem ipsum dolor sit amet</li>
<li>Aenean nec mollis nulla.</li>
</ul>
<h3>decimal</h3>
<ul style="list-style-type: decimal;">
<li>Lorem ipsum dolor sit amet</li>
<li>Aenean nec mollis nulla.</li>
</ul>
<h3>decimal-leading-zero</h3>
<ul style="list-style-type: decimal-leading-zero;">
<li>Lorem ipsum dolor sit amet</li>
<li>Aenean nec mollis nulla.</li>
</ul>
<h3>lower-roman</h3>
<ul style="list-style-type: lower-roman;">
<li>Lorem ipsum dolor sit amet</li>
<li>Aenean nec mollis nulla.</li>
</ul>
<h3>upper-roman</h3>
<ul style="list-style-type: upper-roman;">
<li>Lorem ipsum dolor sit amet</li>
<li>Aenean nec mollis nulla.</li>
</ul>
<h3>lower-greek</h3>
<ul style="list-style-type: lower-greek;">
<li>Lorem ipsum dolor sit amet</li>
<li>Aenean nec mollis nulla.</li>
</ul>
<h3>lower-latin</h3>
<ul style="list-style-type: lower-latin;">
<li>Lorem ipsum dolor sit amet</li>
<li>Aenean nec mollis nulla.</li>
</ul>
<h3>upper-latin</h3>
<ul style="list-style-type: upper-latin;">
<li>Lorem ipsum dolor sit amet</li>
<li>Aenean nec mollis nulla.</li>
</ul>
<h3>armenian</h3>
<ul style="list-style-type: armenian;">
<li>Lorem ipsum dolor sit amet</li>
<li>Aenean nec mollis nulla.</li>
</ul>
<h3>georgian</h3>
<ul style="list-style-type: georgian;">
<li>Lorem ipsum dolor sit amet</li>
<li>Aenean nec mollis nulla.</li>
</ul>
<h3>lower-alpha</h3>
<ul style="list-style-type: lower-alpha;">
<li>Lorem ipsum dolor sit amet</li>
<li>Aenean nec mollis nulla.</li>
</ul>
<h3>upper-alpha</h3>
<ul style="list-style-type: upper-alpha;">
<li>Lorem ipsum dolor sit amet</li>
<li>Aenean nec mollis nulla.</li>
</ul>
<h3>none</h3>
<ul style="list-style-type: none;">
<li>Lorem ipsum dolor sit amet</li>
<li>Aenean nec mollis nulla.</li>
</ul>
</body>
</html>
위 결과값은 아래와 같습니다.
'홈페이지제작 > CSS' 카테고리의 다른 글
| [CSS 강좌] Table 표 만들 때 사용하는 태그 (0) | 2017.12.11 |
|---|---|
| [CSS 강좌] 링크 꾸미기 (0) | 2017.12.08 |
| [CSS강좌] CSS강좌속성과 상속하지 않는 속성 (0) | 2017.12.05 |
| [CSS 강좌] 아이디 선택자(ID Selector) (0) | 2017.12.04 |
| [CSS 기초] 클래스 선택자(Class Selector) (0) | 2017.11.25 |
itworldkorea
IT korea가 세상(world)을 변화시킨다.