웹마스터 팁

  2. Support
  3. 웹마스터 팁

[HTML 초보자] 열거목록에 대한 스타일정의 네번째 마지막

2003.03.17 01:59

ZipShin

※ 지난번 강좌 http://www.nzeo.com/bbs/zboard.php?id=p_html&page=1&sn1=&divpage=1&sn=off&ss=on&sc=off&select_arrange=headnum&desc=asc&no=723 를 참고하면서 공부를 해야 합니다.

http://www.nzeo.com/bbs/zboard.php?id=p_html&page=1&sn1=&divpage=1&sn=off&ss=on&sc=off&select_arrange=headnum&desc=asc&no=723 의 열거목록 소스코드에서 LI의 속성에 TYPE를 정한 경우도 모두 이미지가 적용됨을 알 수있습니다.

열거 목록을 적용하는 방법은 아래와 같습니다.

※ 셀렉터와 선언의 정의 형식
UL LI { list-style-image: url("test.gif") }
UL 태그 안의
LI 태그에 적용 속성         이미지의 위치

이미지를 이단으로 적용하는 경우는 다음과 같이 UL LI 태그를 두 번 사용합니다.

UL Li Ul Li { list-style-image: url("test.gif")}
UL LI 태그안의
LI 태그에 적용      속성            이미지의 위치

위에 사용한 예제는 다음과 같습니다.

※ 예제

<HTML>
<HEAD>
<TITLE>열거목록의 스타일 연습</TITLE>
<STYLE>
UL LI { list-style-image: url("image/list.gif")}
UL LI UL LI {list-image-url("image/list1.gif")}
</STYLE>
</HEAD>

<BODY>
<UL>
<LI>컴퓨터 운영체제</LI>
<UL>
<LI>윈도우 98</LI>
<LI>LINUX</LI>
<LI>솔라리스</LI>
</UL>
<LI>컴퓨터 주변기기</LI>
<UL>
<LI>프린터</LI>
<LI>스캐너</LI>
<LI>cd 드라이브</LI>
</UL>
</UL>
</BODY>
</HTML>
이 게시물을
수정 삭제
좋아요
목록
태그 쓰기