Trio 홈페이지 이미지를 이용한 번호 없는 목록 예제 예제 메뉴로


  • 수준 1 항목 1
    • 수준 2 항목 1-1
    • 수준 2 항목 1-2
  • 수준 1 항목 2
  • 수준 1 항목 3
    • 수준 2 항목 3-1
    • 수준 2 항목 3-2
  • 클라스 지정하지 않은 다른 목록 수준 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> 부분을 각 문서에 복사하고 적색 부분만 수정 해 주면 된다.

번역문 소유자 - Trio 홈페이지 제공 이 문서(http://trio.co.kr/webrefer/csex/cxulbul.html)는
자유로이 연결 사용이 가능함.
예제 메뉴로