로이데스트 :: <ul></ul>-<li></li> 목록 모양 스타일

<ul></ul>-<li></li> 목록 모양 스타일 - 목록 모양

| HTML/xhtml문법

2014. 1. 20. 19:27

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ko">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
</head>
<body>
<ul><li> 사용법<br />
<ul> 사용 용도는 목록 모양 스타일 지정합니다.(속성-type, compact)<br />
<li> 사용 용도는 목록 모양 출력합니다.(속성-value, type)<br />
<hr />
<b><ul> : 1.속성-type은 3가지로 출력합니다.(기본은 disc)</b><br /><br />
<div id="ex_view2" style="float: left; width: 120px;">
1. 동그라미
<ul type="disc">
<h3>과일</h3>
<li>사과</li>
<li>딸기</li>
<li>자두</li>
<li>포도</li>
</ul>
</div>
<div id="ex_view2" style="float: left; width: 120px;">
2. 사각형
<ul type="square">
<h3>과일</h3>
<li>사과</li>
<li>딸기</li>
<li>자두</li>
<li>포도</li>
</ul>
</div>
<div id="ex_view2" style="float: left; width: 120px;">
3. 원모양
<ul type="circle">
<h3>과일</h3>
<li>사과</li>
<li>딸기</li>
<li>자두</li>
<li>포도</li>
</ul>
</div>
<hr style="clear:left;"/>
<div id="ex_view2" style="clear:left; float: left; padding: 0 0 0 10px;">
<br />
<b><ul> : 2.속성-compact는 HTML4부터 지원이 안됩니다.</b><br />
HTML5에서 지원되지 않습니다. <br />
대신 CSS에서 지원해줍니다.<br />
CSS 구문 : <ul style="line-height: 80%"> <br />
목록의 줄 높이를 줄입니다.
<ul style="line-height: 80%">
<h3>과일</h3>
<li>사과</li>
<li>딸기</li>
<li>자두</li>
<li>포도</li>
</ul>
</div>
<br />
<hr style="clear:left;"/>
<div id="ex_view2" style="clear:left; float: left; padding: 0 0 0 10px;">
<br />
<b><li> : 1.속성-value 시작번호는 변경합니다.(<ul>만 가능합니다.)</b><br /><br />
</div>
<br />
<hr style="clear:left;"/>
<div id="ex_view2" style="clear:left; float: left; padding: 0 0 0 10px;">
<br />
<b><li> : 2.속성-type 목록 항목의 글 머리 스타일을 지정합니다.</b><br />
HTML 4.01에서 더 이상 사용되지 않습니다. <br />
HTML5에서 지원되지 않습니다. <br />
대신 CSS에서 지원해줍니다.<br />
CSS 구문 : <li style="list-style-type:square"> <br />
목록에서 목록 항목의 글 머리 스타일을 지정합니다.<br />
<ul>
<h3>과일</h3>
<li>사과</li>
<li style="list-style-type:disc">사과</li>
<li>딸기</li>
<li value=22>딸기</li>
<li>자두</li>
<li style="list-style-type:square">포도</li>
<li style="list-style-type:circle">포도</li>
</ul>
</div>
<hr style="clear:left;"/>
<div style="clear:left;">
<lh>태그는 HTML3.0이후 채택이 안되어서<br />
브라우저에서 지원이 안됩니다.(<hn>권고)<br />
</div>
</body>
</html>

--------------------------------------------------------------------------------------------

위 소스 예제 보기

<ul></ul>

<li></li>

<ul> 목록 모양 스타일 지정합니다.

<ul> type, compact속성과 설명은 소스에 있습니다.

<li> 목록 모양 출력합니다.

<li> value, type 속성과 설명은 소스에 있습니다.

Global Attributes 지원합니다.

Global Event Attributes 지원합니다.

출처&인용 : http://www.w3schools.com/tags/tag_ul.asp

출처&인용 : http://www.w3schools.com/tags/tag_li.asp

저작자표시 비영리 변경금지

'HTML > xhtml문법' 카테고리의 다른 글

<img></img>-<map></map>-<area><area> 이미지-이미지맵-클릭영역지정 (0)	2014.01.21
<a></a> 링크 연결 페이지 (0)	2014.01.20
<ol></ol>-<li></li> 목록 번호 스타일 - 목록 번호 (0)	2014.01.20
<hr>, <hr /> 수평선 (0)	2014.01.20
<!-- --> 주석 (설명글) (0)	2014.01.20