웹마스터 팁

  2. Support
  3. 웹마스터 팁

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

2003.03.12 09:56

ZipShin

지난번의 강좌에 이어 이번에는 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>가 적용이 되어 원모양, 사각모양, 대신에 이미지로 나타남을 알 수있습니다.
이 게시물을
수정 삭제
좋아요
목록
태그 쓰기