- 수준 1 항목 1
- 수준 1 항목 2
- 수준 1 항목 3
- 클라스 지정하지 않은 다른 목록 수준 1 항목 1
- 다른 클라스 other로 지정한 다른 목록 수준 1 항목 1
- 다른 클라스 level1으로 지정한 다른 목록 수준 2 항목 1
이 색상은 코드와 관계없이 설명을 위해 삽입 한 색상임
<!doctype HTML PUBLIC "-//W3C//DTD HTML 4.01 transitional//EN">
<html lang="ko">
<head>
<title>Trio 홈페이지 - 이미지를 이용한 번호 없는 목록 예제</title>
<meta HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=EUC-KR">
<style type="text/css">
ul.level1{list-style:url('http://trio.co.kr/gif/balla.gif');}
ul.level1 ul, ul.other{list-style:url('http://trio.co.kr/gif/ball.gif');}
</style>
첫번 것은 level1의 목록을 지정한 것이고
두번째는 level1의 자식(바로 아래 수준) 목록(ul)을 지정하거나
다른(other) 목록을 지정한 것임.
<style type="text/css">에서 </style>까지의 모든 내용을
별도 화일 file.css에 저장하고 전체 부분을
<link rel="stylesheet" href="file.css" type="text/css">
로 대체하여도 같은 결과를 갖는다.
화일 안에 <style type="text/css">와 </style>를 포함시키지 마십시오.
여러번 복사해야 하는 내용은 이렇게 하는 것이 편리하다.
</head>
<body>
<ul class=level1>
<li>수준 1 항목 1
<ul>
<li>수준 2 항목 1-1
<li>수준 2 항목 1-2
</ul>
<li>수준 1 항목 2
<li>수준 1 항목 3
<ul>
<li>수준 2 항목 3-1
<li>수준 2 항목 3-2
</ul>
</ul>
<ul>
<li>클라스 지정하지 않은 다른 목록 수준 1 항목 1
</ul>
<ul class=other>
<li>다른 클라스 other로 지정한 다른 목록 수준 1 항목 1
<ul class=level1>
<li>다른 클라스 level1으로 지정한 다른 목록 수준 2 항목 1
</ul>
</ul>
</body>
</html>
<! 혹은 <!!!는 종료 태그(>) 까지 무효화
<style> 부분과 <table> 부분을 각 문서에 복사하고 적색 부분만 수정 해 주면 된다.
|
제공