웹마스터 팁
[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
| 제목 | 글쓴이 | 날짜 |
|---|---|---|
| 세계인구와 한국인구 구하기 애플릿 소스 [3] | TimeMode | 2003.05.19 |
| 동영상이 로딩될때까지 이미지 보여주기 [8] | ZipShin | 2003.05.19 |
| 더블클릭으로 웹문서 새로고침 하기 [3] | RedEye | 2003.05.09 |
| HTML 암호화시킨것 풀어주는소스(암호화도가능) [11] | 호호짱 | 2003.05.06 |
| label태그 아십니까? [6] | ZipShin | 2003.04.27 |
| 이미지 테두리에 점선 두르기 [6] | ZipShin | 2003.04.15 |
| textarea 세로 글쓰기 [1] | ZipShin | 2003.04.15 |
| textbox의 값을 오른쪽부터 채우기. [1] | RedEye | 2003.04.12 |
| 새창뜨는 링크 누를때 스크롤바 고정시키기 [8] | REAL | 2003.04.09 |
| 이미지 링크로 사용하다가 짤렸을때 대체 이미지 [6] | REAL | 2003.04.09 |
| 링크 클릭시 사운드 효과 [3] | REAL | 2003.04.09 |
| [re] 링크 클릭시 사운드 효과 [헤헤~ 더 간단하게] [5] | RedEye | 2003.04.13 |
| self.close 묻지 않고 닫기 [6] | REAL | 2003.04.09 |
| 테이블에 dot 효과를 주자~~~~~~~~~~~~~~~~~~~~ [5] | 조일현 | 2003.04.08 |
| 스스로 사라지는 웹페이지 만들기 [3] | 최재철 | 2003.04.08 |
| HTML 기본 구성 ( HTML 왕초보만 보세혀.. ) [7] | kkaza™ | 2003.04.05 |
| 홈페이지의 위아래를 바꾸어 보자! [10] | 세죠위그이 | 2003.04.01 |
| HTML의 정의 [8] | 이태운 | 2003.03.23 |
| 캐시 사용하지 않기 [5] | FriZeX*-_-* | 2003.03.17 |
| [HTML 초보자] 열거목록에 대한 스타일정의 네번째 마지막 | ZipShin | 2003.03.17 |