| ● 순서대로 나열하는 태그 | |
목록태그에서 가장 기본적인 태그입니다. 문서를 작성할때 순서를 정해서 목록을 표시할때 쓰이는 태그인데, <ol> 목록 </ol>로 표기합니다.
※ 여기서 잠깐 !
전에 배웠던 태그들을 보면 태그 혼자 독립적으로 쓰였습니다. 하지만 목록 태그는 짝꿍인 <li></li>태그와 함께 묶어서 쓰입니다.(아주 중요합니다) 쉽게 설명하자면 실제 목록을 나누는 태그는 <li></li>입니다.
<ol></ol>태그는 이 부분안에 있는 내용을 순서있는 목록으로 나눈다는 것을 정의하는 태그입니다. 쉽게 풀어서 얘기하자면 내 집에 담이 쳐져있지요? 그 담을 뜻하는 것이지요. 담안은 내 집이다 이렇게 정의하는 것처럼요.
이 목록 태그들의 속성을 살펴 볼께요. 목록의 속성을 지정할 때는 <ol type="속성값">으로 표기 합니다. 속성값에는 아래의 5종류로 표기 합니다.
순서 목록 태그의 속성값
A : 영문자(대문자)
a : 영문자(소문자)
ⅰ: 그리스 숫자(소문자)
Ⅰ: 그리스 숫자(대문자)
숫자: 기본값( li만 쓰면 숫자로 표기됨)
목록 순서의 시작값을 나타낼때는 <ol start="순서 시작값">으로 표기합니다. 보통은 1부터나 a부터 시작하지만, 3이나, b등 따로 시작을 할 경우에 시작값을 정해 줄 수 있습니다. <li>태그는 단독으로 </li>를 쓰지않고 태그를 실행 시킬 수 있지만, 다음 <li>가 나올때까지 한 항목으로 표시 됩니다.
태그 실행 예제(메모장에 직접 작성하면서 연습하세요)
<html>
<head>
<title>목록태그_OL/LI</title>
</head>
<body>
<ol>
<li> 목록태그 리스트
<li> 목록태그 리스트
<li> 목록태그 리스트
</ol>
<ol type="A">
<li> 목록태그 리스트
<li> 목록태그 리스트
<li> 목록태그 리스트
</ol>
<ol type="a">
<li> 목록태그 리스트
<li> 목록태그 리스트
<li> 목록태그 리스트
</ol>
<ol type="ⅰ">
<li> 목록태그 리스트
<li> 목록태그 리스트
<li> 목록태그 리스트
</ol>
<ol type="Ⅰ">
<li> 목록태그 리스트
<li> 목록태그 리스트
<li> 목록태그 리스트
</ol>
<ol start="3">
<li> 목록태그 리스트
<li> 목록태그 리스트
<li> 목록태그 리스트
</ol>
</body>
</html>
| ● 비순서로 나열하는 태그 | |
이 부분은 위에처럼 순서를 지정해서 나열하지 않고, 불릿(bullet)기호를 써서 나열할때 쓰이는 태그입니다. 순서없이 나열만 할때 쓰이는 태그는 <ul> 목록</ul>로 표기되며, 위의 <ol>태그처럼 <li>와 같이 묶어서 씁니다.
이 태그의 속성값을 나타낼 때는 <ol>태그와 같이 <ul type="속성값"> 으로 쓰며 불릿의 속성값은 아래와 같습니다. 속성값을 지정하지 않을 경우 기본 검은 원으로 표시 됩니다.
불릿 모양을 지정하는 속성값:
disc: ● (검은 원)
circle: ○ (흰원 원)
square: ■ (검은 사각형)
태그 실행 예제(메모장에 직접 장성하면서 연습하세요)
<html>
<head>
<title>목록태그_U/LI</title>
</head>
<body>
<ul>
<li> 목록태그 리스트
<li> 목록태그 리스트
<li> 목록태그 리스트
</ul>
<ul>
<li> 목록태그 리스트
<li> 목록태그 리스트
<li> 목록태그 리스트
</ul>
<ul type="disc">
<li> 목록태그 리스트
<li> 목록태그 리스트
<li> 목록태그 리스트
</ul>
<ul type="circle">
<li> 목록태그 리스트
<li> 목록태그 리스트
<li> 목록태그 리스트
</ul>
<ul type="square">
<li> 목록태그 리스트
<li> 목록태그 리스트
<li> 목록태그 리스트
</ul>
</body>
</html>
| ● 사전식 목록 태그 | |
사전식 목록은 <dl>목록</dl>로 표기합니다. 순서를 나열하지 않지만, 그 아래 제목을 지정하고, 내용을 설명해주는 형태로 실행됩니다.
사전식 목록태그 사용 (예)
위 이미지 처럼 사전이라는 제목을 쓰고, 그 아래 사전에 대한 정의를 내릴때 쓰는 태그입니다.
<dt>는 제목을 지정해 주고 <dd>는 <dt>에서 정의한 내용을 설명합니다.
태그 실행 예제(메모장에 직접 작성하면서 연습하세요.)
<html>
<head>
<title>사전식 태그</title>
</head>
<body>
<dl>
<dt> 사전식 태그</dt>
<dd> 사전식 태그는 순서를 나열하지 않지만, 그 아래 제목을 지정하고, 내용을 설명해주는 형태로 실행된다
</dd>
</dl>
</body>
</html>
실행 예제문이 조금 길어서 그렇지 쉽고 간단한 태그들 입니다.
오늘 배운 태그는 꼭 알아 두어야 할 태그입니다. 스킨을 만들때 css로 미리 정의를 해주기때문에 글을 쓸때는 태그를 모르셔도 된다고 생각하지만, 이 태그를 모른다면 css에서 정의를 내릴 수 없겠죠? 꼭 오늘 배운 목록태그는 모두 익히시기 바랍니다.
'ETC' 카테고리의 다른 글
| http 에러코드 표 (0) | 2011.07.22 |
|---|---|
| 웹컬러 코드 손쉽게 확인 할수 있는 사이트 (0) | 2011.07.22 |
| HTML5 가이드 (0) | 2011.07.22 |
| 실전 웹표준 가이드 (한국소프트웨어진흥원) (0) | 2011.07.22 |
| 웹표준 강좌 (0) | 2011.07.22 |