웹마스터 팁
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
제목 | 글쓴이 | 날짜 |
---|---|---|
iis+php+mysql+zeroboard 설치 [3] | 이성헌 | 2005.12.15 |
mysql 사용법 요약 정리 | 이성헌 | 2005.12.15 |
apache 의 httpd.conf 에서 alias 사용례... | 이성헌 | 2005.12.15 |
nWmail 서버 구축 방법- 자세한 문서는 w3ip.com 에 있음 | 이성헌 | 2005.12.15 |
zeroboard 아이디 , 비번 분실시 변경법. | 이성헌 | 2005.12.15 |
자바스크립트 인증 | 이성헌 | 2005.12.15 |
아파치 인증-개인 컴퓨터 apache 서버 경우 | 이성헌 | 2005.12.15 |
wo.to (유료서버) 의 아파치 폴더 인증 방법. | 이성헌 | 2005.12.15 |
아파치 인증에서 .htaccess 의 내용. | 이성헌 | 2005.12.15 |
apache 인증에서 .htpasswd 의 내용. | 이성헌 | 2005.12.15 |
apache httpd.conf 의 1차 설치본 - alias 사용 | 이성헌 | 2005.12.15 |
php 4.3.2 의 php.ini 내용 (내컴 설치본) | 이성헌 | 2005.12.15 |
제로보드 data 파일의 모드 변경 | 이성헌 | 2005.12.15 |
계정 사용량 알아보기 | 이성헌 | 2005.12.15 |
아파치 httpd.conf 2차 설정본 - php 연동 | 이성헌 | 2005.12.15 |
mysql 을 이용한 사용자 인증 (통합 설명) | 이성헌 | 2005.12.15 |
mysql 이용한 사용자 인증 2 (auth.inc 파일) | 이성헌 | 2005.12.15 |
mysql 이용한 사용자 인증 3 (index.htm 파일) | 이성헌 | 2005.12.15 |
mysql 을 이용한 사용자 인증 4 (index.htm 인증후 바로 넘기기) | 이성헌 | 2005.12.15 |
존재하지 않은 파일 선택시 에러메시지 보임. [1] | 이성헌 | 2005.12.15 |