웹마스터 팁
page_full_width" class="col-xs-12" |cond="$__Context->page_full_width">
[HTML 초보자] 열거목록에 대한 스타일정의 네번째 마지막
2003.03.17 01:59
※ 지난번 강좌 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>
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>
댓글 0
제목 | 글쓴이 | 날짜 |
---|---|---|
[나모] 책갈피 만들기 [5] | 쭘's | 2003.03.12 |
[나모] CSS 만들기 I | 쭘's | 2003.03.12 |
[나모] CSS 만들기 II | 쭘's | 2003.03.12 |
[나모] CSS 만들기 III | 쭘's | 2003.03.12 |
[HTML 초보자] 열거목록에 대한 스타일정의 네번째 마지막 | ZipShin | 2003.03.17 |
캐시 사용하지 않기 [5] | FriZeX*-_-* | 2003.03.17 |
쭘's 식 쉽게 홈페이지 만들기 [15] | 쭘's | 2003.03.17 |
HTML의 정의 [8] | 이태운 | 2003.03.23 |
노프레임홈페이지 디비기 1 - 계층 [16] | 리디 | 2003.03.25 |
펼침 목록 메뉴 만들기! (나모) - 쭘's [8] | 쭘's | 2003.03.25 |
노프레임홈페이지 디비기 2 - 헤더와 풋터 [57] | 리디 | 2003.03.26 |
쭘's식 홈페이지 만들기 No.2 - 예제 미리보기 포함 [14] | 쭘's | 2003.03.30 |
노프레임홈페이지 디비기 3 - 경로 [42] | 리디 | 2003.03.31 |
홈페이지의 위아래를 바꾸어 보자! [10] | 세죠위그이 | 2003.04.01 |
HTML 기본 구성 ( HTML 왕초보만 보세혀.. ) [7] | kkaza™ | 2003.04.05 |
노프레임홈페이지 디비기 4 - 쌍벽 [36] | 리디 | 2003.04.08 |
스스로 사라지는 웹페이지 만들기 [3] | 최재철 | 2003.04.08 |
테이블에 dot 효과를 주자~~~~~~~~~~~~~~~~~~~~ [5] | 조일현 | 2003.04.08 |
self.close 묻지 않고 닫기 [6] | REAL | 2003.04.09 |
[re] 링크 클릭시 사운드 효과 [헤헤~ 더 간단하게] [5] | RedEye | 2003.04.13 |