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