|
▷ 목록 [List, Index] 태그
|
| |
|
⊙ 태그요소
|
|
① <ol> ... </ol>
|
|
OL[Ordered List] 순서가 있는 리스트를 말한다. 즉, 문서작성에서 제목 차례와 같이 일련번호를 붙여준다.
붙일 수 있는 번호 순서는 속성에서 정의한다.
목록임을 알려주고 내부에 목록 내용이 온다.
|
|
⊙ 속성(Atributes)
|
|
속성
|
용도
|
사용법
|
|
|
class, id, style, title |
|
|
type |
순서 목록 형식 지정 |
<ol type="1 / A / i / I">, 기본값은 "1" |
|
start |
목록 시작번호 지정 |
<ol type="1" start="3"> 기본값="1" |
|
value
|
시작번호 값을 지정 |
OL 안쪽 <Li value="번호값">와 같이 넣으면 주어진 번호값부터 번호가 지정된다. |
|
| |
|
⊙ 속성(Atributes)의 사용 예
|
|
OL type 속성 예제 |
실행결과 |
<html>
<head>
<title>Hn 태그의 사용 예</title>
</head>
<body>
원시인 마을의 서열은?
<OL type="1" start="1">
<Li> 추장
<Li> 고추장
<Li> 초고추장
</OL>
</body>
</html>
|
|
<body>
원시인 마을의 서열은?
<OL type="A" start="2">
<Li> 추장
<Li> 고추장
<Li> 초고추장
</OL>
</body>
|
원시인 마을의 서열은?
- 추장
- 고추장
- 초고추장
|
<body>
원시인 마을의 서열과 취미는?
<OL type="1">
<Li> 추장
<ol type="A">
<li>개미 목 조르기</li>
<li>코끼리 업어주기</li>
</ol>
<Li> 고추장
<ol type="A">
<li>아나콘다 이쑤시기</li>
</ol>
<Li> 초고추장
<ol type="A">
<li>사자 콧털뽑기</li>
|
원시인 마을의 서열과 취미는?
- 추장
- 개미 목 조르기
- 코끼리 업어주기
- 고추장
- 아나콘다 이쑤시기
- 초고추장
- 사자 콧털뽑기
|
<body>
원시인 마을의 서열은?
<OL type="i">
<Li > 추장</li>
<Li> 고추장</li>
<Li> 초고추장</li>
</OL>
</body>
|
원시인 마을의 서열은?
- 추장
- 고추장
- 초고추장
|
<body>
원시인 마을의 서열은?
<OL type="I" >
<Li > 추장</li>
<Li> 고추장</li>
<Li> 초고추장</li>
</OL>
</body>
|
원시인 마을의 서열은?
- 추장
- 고추장
- 초고추장
|
|
|
|
|
② <ul> ... </ul>
|
|
UL[Un-Ordered List] 순서가 없는 리스트를 말한다. 제목 차례 번호 대신 동일한 형태의 아이콘 같은 것을 붙여준다.
|
|
⊙ 속성(Atributes)
|
|
속성
|
용도
|
사용법
|
|
|
class, id, style, title |
|
|
type |
순서 목록 형식 지정 |
<ol type="circle / disk / square"> |
|
| |
|
⊙ 속성(Atributes)의 사용 예
|
|
UL type 속성 예제 |
실행결과 |
<body>
원시인 마을의 서열은?
<UL type="circle">
<Li> 추장</li>
<Li> 고추장</li>
<Li> 초고추장</li>
</UL>
</body>
|
|
<body>
원시인 마을의 서열은?
<UL type="disk">
<Li> 추장</li>
<Li> 고추장</li>
<Li> 초고추장</li>
</UL>
</body>
|
원시인 마을의 서열은?
|
<body>
원시인 마을의 서열은?
<UL type="square">
<Li> 추장</li>
<Li> 고추장</li>
<Li> 초고추장</li>
</UL>
</body>
|
원시인 마을의 서열은?
|
|
|
|
|
③ <Dl> ... </DL>
|
|
DL[Definition List] 설명 리스트로 목록 제목은 DT로 목록 항목은 DD를 사용한다.
|
|
⊙ 속성(Atributes)
|
|
속성
|
용도
|
사용법
|
|
|
class, id, style, title |
|
|
compact
|
간단한 목록, 한줄에 보여준다. |
<dl compact> |
|
| |
|
⊙ 속성(Atributes)의 사용 예
|
|
UL type 속성 예제 |
실행결과 |
<body>
원시인 마을의 서열은?
<dl>
<dt> 추장
<dd> 고추장
<dd> 초고추장
</dt>
<dt> 된장
<dd> 안된장
<dd> 밖된장
</dt>
</dl>
</body>
|
|
<body>
원시인 마을의 서열은?
<dl compact>
<dt> 추장
<dd> 고추장
<dd> 초고추장
<dt> 된장
<dd> 안된장
<dd> 밖된장
</dl>
</body>
|
원시인 마을의 서열은?
- 추장
- 고추장
- 초고추장
- 된장
- 안된장
- 밖된장
"추장", "고추장" ☜ 한 줄로 나타난다.(compact 속성)
|
|
|
|
|
|
