오늘 html강좌는 목록태그에 관해 알아보겠습니다. 글을 쓰다 보면 순서를 나열할 때가 있는데요, 그럴때 쓰는 태그입니다. 목록을 정하는 것은 글을 정리하기 위해서입니다. 또한 글의 이해를 돕기 위해서도 필요한 부분입니다. 이 목록태그가 사실 약간 어렵습니다. 순서를 나타내는 태그인데 xhtml에서는 스킨에 자주 등장하는 태그이기도 합니다. 꼭 글을 쓸때만 필요한 태그가 아니란 말이지요. 이 목록태그에 대해서는 꼭 알아 두시기 바랍니다. 중요도 5점입니다.
이전 시간에 만들어 드린 테스트는 모두 해보셨는지요? 정답을 알려 달라시는 분이 한분도 안계셔서 모두 100점 만점 맞으셨으리라 믿고, 바로 html강좌를 시작하겠습니다.
| ● 순서대로 나열하는 태그 | |
목록태그에서 가장 기본적인 태그입니다. 문서를 작성할때 순서를 정해서 목록을 표시할때 쓰이는 태그인데, <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에서 정의를 내릴 수 없겠죠? 꼭 오늘 배운 목록태그는 모두 익히시기 바랍니다.
오늘도 제 강좌가 유익하셨나요? html태그 강좌는 알라딘 창작블로그 "웹디자인과 블로그팁"에 연재중입니다. 강의료라 생각하시고 추천과 믹시 듬뿍 주시면 힘내서 더 좋은 글로 보답 하겠습니다.
이 글이 링크되어 있는 곳:
블코채널[blogkorea]: 웹디자인과 블로그팁에 링크되어 있습니다.
레뷰 아이템[revu]: 웹디자인& 블로그 Tip에 링크되어 있습니다.
'Design Tutorial > HTML/CSS' 카테고리의 다른 글
| HTML, 이미지(img)태그에 대해서 알아보자. (22) | 2010/01/18 |
|---|---|
| HTML, 목록(리스트) 태그에 대해 알아보자. (60) | 2009/12/18 |
| HTML, 문서의 기본 구조 복습과 테스트 (24) | 2009/12/12 |
| HTML, 문서 단락 태그에 대해 배워보자. (34) | 2009/12/01 |
| HTML, 글자에 관한 태그_font의 기본속성 알기 (10) | 2009/11/24 |
| HTML문서의 제목과 관련한 태그를 배우자. (26) | 2009/11/22 |
posted by 예스비™
