html 태그로 리스트 목록 만드는 방법
1.리스트목록 만들기
리스트목록은 비순차적목록과 순차적 목록이 있습니다. 비순차적은 순서에 수치가 안붙어있고 문자가 있어 정확한 순서가 없지만 순차적 목록은 수치가 붙어있어 정확한 순서를 알수있습니다.
비순차적 목록
사용법? <UL><LI></LI></UL>
ex)
<html>
<body bgcolor="#ffffff" text="#000000">
<ul>
<li>날짜:2001월5월</li>
<li>날짜:2001월5월</li>
<li>날짜:2001월5월</li>
</ul>
</body>
</html>
<!--목록마다 <li>내용</li>태그를 사용하며 <li>는 list item의 약자입니다.-->
비순차적 목록 마크 변경
사용법? type="disc|circle|square"
ex)
<html>
<body bgcolor="#ffffff" text="#000000">
내생일
<ul type="square">
<li>날짜:2001월5월</li>
<li>날짜:2001월2월</li>
<li>날짜:2001월3월</li>
</ul>
네생일
<ul>
<li type="circle">날짜:2001월5월</li>
<li type="square">날짜:2003월2월</li>
<li type="disc">날짜:2002월3월</li>
</ul>
우리생일
<ul type="disc">
<li>날짜:2001월5월</li>
<li>날짜:2004월2월</li>
<li>날짜:2006월3월</li>
</ul>
</body>
</html>
<!--<ul>에 type을 주면 전체 리스트에 주지만 <li>에 주면 하나의 목록에만 적용됩니다.-->
순차적 목록
비순차적과 다르게 목록 마크네 문자가 아닌 숫자가 붙어 순서를 강조할수있습니다.
사용법? <OL><LI></LI></OL>
ex)
<html>
<body bgcolor="#ffffff" text="#000000">
<ol>
<li>1번호를 세어 보아요!</li>
<li>2번호를 세어 보아요!</li>
<li>3번호를 세어 보아요!</li>
</ol>
</body>
</html>
<!--목록마다 <li>내용</li>태그를 사용하며 <li>는 list item의 약자입니다.목록 마크가 수치-->
순차적 목록 번호 형식 변경
사용법? type="A|a|I|i|1"
ex)
<html>
<body bgcolor="#ffffff" text="#000000">
A로시작하는 순차적목록
<ol type="A">
<li>1번호를 세어 보아요!</li>
<li>2번호를 세어 보아요!</li>
<li>3번호를 세어 보아요!</li>
</ol>
a로시작하는 순차적목록
<ol type="a">
<li>1번호를 세어 보아요!</li>
<li>2번호를 세어 보아요!</li>
<li>3번호를 세어 보아요!</li>
</ol>
I로시작하는 순차적목록
<ol type="I">
<li>1번호를 세어 보아요!</li>
<li>2번호를 세어 보아요!</li>
<li>3번호를 세어 보아요!</li>
</ol>
i로시작하는 순차적목록
<ol type="i">
<li>1번호를 세어 보아요!</li>
<li>2번호를 세어 보아요!</li>
<li>3번호를 세어 보아요!</li>
</ol>
1로시작하는 순차적목록
<ol type="1">
<li>1번호를 세어 보아요!</li>
<li>2번호를 세어 보아요!</li>
<li>3번호를 세어 보아요!</li>
</ol>
</body>
</html>
<!--
이것또한 <ol>에 type을 주면 전체 <li>에 적용되고 <li>만 주면 해당 목록만 적용되지만
비순차적목록에서는 각각의 목록에 주는건 의미가 없습니다.
-->
순차적 목록의 번호 순서 변경
사용법? <ol start="적용숫자"><li value="적용숫자">
ex)
<html>
<body bgcolor="#ffffff" text="#000000">
5부터 시작하는 순차적목록
<ol start="5">
<li>1번호를 세어 보아요!</li>
<li>2번호를 세어 보아요!</li>
<li>3번호를 세어 보아요!</li>
</ol>
번호가 바꿥니다.
<ol >
<li>1번호를 세어 보아요!</li>
<li value="3">2번호를 세어 보아요!</li>
<li>3번호를 세어 보아요!</li>
</ol>
<ol >
<li type="A" value="10">1번호를 세어 보아요!</li>
<li>2번호를 세어 보아요!</li>
<li>3번호를 세어 보아요!</li>
</ol>
</body>
</html>
정의리스트
사용법? <dl><dt>정의<dd>정의의 해설</dl>
ex)
<html>
<head></head>
<body>
<dl>
<dt>서울보건대 마스코트
<dd>누구일까? 누구일까? 누구일까? 누구일까?
</dl>
</body>
</html>
<!--<dl>태그는 어떤 용어를 정의 리스트 들을 적용할때 사용합니다.-->
'기타 > 블로그관리' 카테고리의 다른 글
| 마크다운 포매터를 위한 준비 - Full CSS 적용을 위 가이드라인 (0) | 2013.09.22 |
|---|---|
| 구글 검색순위 상위에 랭크하기 (0) | 2013.09.22 |
| 티스토리 블로그 스킨 관리 현황 (0) | 2013.09.22 |
| 게시글 문단 제목 꾸미기 (0) | 2013.09.22 |
| Snagit Mini Toolbar Annoying You? (0) | 2013.09.22 |