웹마스터 팁
page_full_width" class="col-xs-12" |cond="$__Context->page_full_width">
[HTML 초보자] 열거목록에 대한 스타일정의 세번째
2003.03.12 09:56
지난번의 강좌에 이어 이번에는 Style 태그를 이용하여, 이미지로 모양을 나타낼 수있습니다.
제일먼저 열거했던 예제파일을 기초로하여 Style태그를 이용하여 이미지로 모양을 나타내어 봅시다.
일반 열거목록 예제)
<HTML>
<HEAD>
<TITLE>HTML 목록 작성하기</TITLE>
</HEAD>
<BODY>
<H3>순서없는 목록 작성하기</H3>
<B>컴퓨터 주변기기</B>
<UL>
<LI>프린터</LI>
<LI>스캐너</LI>
<LI>CD 드라이버</LI>
</Ul>
<B>컴퓨터 주변기기</B>
<UL>
<LI TYPE="square">프린터</LI>
<LI TYPE="circle">스캐너</LI>
<LI TYPE="disc">CD 드라이버</LI>
</Ul>
</BODY>
</HTML>
↑위에 있는 HTML은 일반 html으로 Disc모양, 원모양을 나타내는 것을 보여주고 있습니다.
이번에는 이미지로 나타낼 수도 있음을 보여드리죠..^^
<HTML>
<HEAD>
<TITLE>HTML 목록 작성하기</TITLE>
<STYLE>
UL LI {list-style-image: url("image/list.gif");}
/*LIST GIF이미지가 있어야 함*/
</STYLE>
</HEAD>
<BODY>
<H3>순서없는 목록 작성하기</H3>
<B>컴퓨터 주변기기</B>
<UL>
<LI>프린터</LI>
<LI>스캐너</LI>
<LI>CD 드라이버</LI>
</Ul>
<B>컴퓨터 주변기기</B>
<UL>
<LI TYPE="square">프린터</LI>
<LI TYPE="circle">스캐너</LI>
<LI TYPE="disc">CD 드라이버</LI>
</Ul>
</BODY>
</HTML>
지금 결과물의 HTML이 없어서그렇지만, 실제로 적용해보면, <STYLE>가 적용이 되어 원모양, 사각모양, 대신에 이미지로 나타남을 알 수있습니다.
제일먼저 열거했던 예제파일을 기초로하여 Style태그를 이용하여 이미지로 모양을 나타내어 봅시다.
일반 열거목록 예제)
<HTML>
<HEAD>
<TITLE>HTML 목록 작성하기</TITLE>
</HEAD>
<BODY>
<H3>순서없는 목록 작성하기</H3>
<B>컴퓨터 주변기기</B>
<UL>
<LI>프린터</LI>
<LI>스캐너</LI>
<LI>CD 드라이버</LI>
</Ul>
<B>컴퓨터 주변기기</B>
<UL>
<LI TYPE="square">프린터</LI>
<LI TYPE="circle">스캐너</LI>
<LI TYPE="disc">CD 드라이버</LI>
</Ul>
</BODY>
</HTML>
↑위에 있는 HTML은 일반 html으로 Disc모양, 원모양을 나타내는 것을 보여주고 있습니다.
이번에는 이미지로 나타낼 수도 있음을 보여드리죠..^^
<HTML>
<HEAD>
<TITLE>HTML 목록 작성하기</TITLE>
<STYLE>
UL LI {list-style-image: url("image/list.gif");}
/*LIST GIF이미지가 있어야 함*/
</STYLE>
</HEAD>
<BODY>
<H3>순서없는 목록 작성하기</H3>
<B>컴퓨터 주변기기</B>
<UL>
<LI>프린터</LI>
<LI>스캐너</LI>
<LI>CD 드라이버</LI>
</Ul>
<B>컴퓨터 주변기기</B>
<UL>
<LI TYPE="square">프린터</LI>
<LI TYPE="circle">스캐너</LI>
<LI TYPE="disc">CD 드라이버</LI>
</Ul>
</BODY>
</HTML>
지금 결과물의 HTML이 없어서그렇지만, 실제로 적용해보면, <STYLE>가 적용이 되어 원모양, 사각모양, 대신에 이미지로 나타남을 알 수있습니다.
댓글 0
제목 | 글쓴이 | 날짜 |
---|---|---|
기존 사용자를 Group 으로 설정하기 (servu4.0) | 이성헌 | 2005.12.15 |
디렉토리 잠금시 group 현상 (servu4.0) | 이성헌 | 2005.12.15 |
사용자 Group 만들기 (servu4.0) | 이성헌 | 2005.12.15 |
그룹설정의 기본 (servu4.0) | 이성헌 | 2005.12.15 |
기존 사용자의 계정 사본 만들기 (servu4.0) | 이성헌 | 2005.12.15 |
Quota (servu4.0) | 이성헌 | 2005.12.15 |
사용자 계정 자동 삭제 (servu4.0) | 이성헌 | 2005.12.15 |
필터 조건을 만족하는 로그 정보 확인 (servu4.0) | 이성헌 | 2005.12.15 |
특정 사용자 추방 (servu4.0) | 이성헌 | 2005.12.15 |
특정 접속자 감시 (servu4.0) | 이성헌 | 2005.12.15 |
서버 접속자에게 Message 보내기 (servu4.0) [2] | 이성헌 | 2005.12.15 |
UL/DL Ratios (servu4.0) | 이성헌 | 2005.12.15 |
도메인 > settings > Logging (servu4.0) | 이성헌 | 2005.12.15 |
아파치인증 c 드라이버에서 성공예 | 이성헌 | 2005.12.15 |
서버의 지워지지 않는 파일삭제 - 명령어 | 이성헌 | 2005.12.15 |
httpd.conf 3차 설정본 - Virtualhost | 이성헌 | 2005.12.15 |
두개 이상의 홈페이지 운영 - Virtual host 설정 [1] | 이성헌 | 2005.12.15 |
Server on , off messaging | 이성헌 | 2005.12.15 |
apache htconf 설정부분만 -php,virtual,alias | 이성헌 | 2005.12.15 |
존재하지 않은 파일 선택시 에러메시지 보임. [1] | 이성헌 | 2005.12.15 |