20. 리스트(목록)관련스타일
.NET프로그래밍/CSS 2.0 2009. 7. 29. 10:01 |<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>리스트(목록)관련스타일</title>
</head>
<body>
<b>관심분야</b><br />
1. HTML4.0<br />
2. CSS2.0<br />
3. JavaScript1.2<br />
<hr />
<h3 style="font-size:12pt;">관심분야</h3> <!-- 검색엔진(로봇)은 header태그(h3)를 우선 검색한다. 위의 방법과 모양은 같으나 이 방법 사용을 권장함. -->
<ol style=" /* <ol>로 하던지 <ul>로 하던지 상관없음. list-style-type에서 목록모양을 정함 */
margin-left:25px; /* 왼쪽 여백 */
list-style-type:circle; /* circle값 대신 'none'으로 설정하면 목록그림이 안보인다. */
list-style-position:outside; /* 들여쓰기. 'inside'로 하면 더 안쪽으로 들여쓰기 된다 , margin-left를 더 많이 쓴다. */
list-style-image:url('http://www.dotnetkorea.com/pyjlove/images/point.gif'); /* 상대경로. 블릿기호 대신 원하는 image(모양)으로 대체할 수 있음. */
">
<li>C#</li> <!-- <li>태그 사이에 들어가는 아이템(텍스트)은 기본적으로 들여쓰기가 된다. -->
<li>ASP.NET</li>
<li>Silverlight</li>
</ol>
</body>
</html>
< 실행결과 >
'.NET프로그래밍 > CSS 2.0' 카테고리의 다른 글
| 22. div태그로 레이아웃 설정하기 (0) | 2009.07.29 |
|---|---|
| 21. 이미지관련스타일 (0) | 2009.07.29 |
| 18. 스크롤바관련스타일 (0) | 2009.07.28 |
| 17. 링크관련스타일 (0) | 2009.07.28 |
| 16. 커서관련스타일 (0) | 2009.07.28 |