자...이번에는 목록 만들기에 대해서 배워보도록 하겠습니다. 여러분...목록이 뭔지는 아시져? 잉..? 몰라요? 흠....모르시는 분들을 위해 직접 보여드리져^^
- 이게 목록이져^^
- 이것두 목록.....
- 역시 목록
|
- 이건 네모목록
- 네모모양이넹^^
- 역쉬..네모..--;;
|
|
어때요? 목록이 먼지 아시겠져?^^ 목록도 위에서 보시다시피 한가지만 있는게 아니라 여러가지 종류가 있져....크게 분류해본다면 순서 없는 목록과 순서 있는 목록으로 나누어 집니다. 갑자기 "순서" 라고 하니깐 처음 목록 배우시는 분들은 무슨 순서를 말하는 건가??? 할텐데..... 보통 우리들이 "순서를 지켜라! " 라고 할때 그런 순서를 말합니다. 다른 말로해서 차례라고도 하져^^
순서없는 목록은 위에 예제에서도 보시다시피 그냥 순서없이 같은 동그라미나 네모, 속빈 동그라미, 그리고 이미지를 이용해서 나타내는 걸 순서없는 목록이라 합니다. 순서없는 목록에는 종류가 4가지져^^ 순서없는 목록을 나타낼땐 <ul></ul>태그를 사용합니다.
순서있는 목록은 숫자나 영문대소문자, 로마자 대소문자 등으로 순서있게 나타내는 것을 순서있는 목록이라 합니다. 총 5가지 인가요? ^^ 숫자, 영문대문자, 영문소문자, 로마자 대문자, 로마자 소문자 하니깐 다섯가지네용^^ 순서있는 목록은 <ol></ol> 태그를 사용합니다.
이제 목록태그의 속성을 알아보도록 하져...^^
| 속 성 |
기 능 |
| type="기호,문자" |
| OL의 경우 |
<ol type="1,A,a,i,I"> |
| UL의 경우 |
<ul type="disc,square,circle"> | |
| src="이미지주소" |
순서없는 목록의 경우 이미지를 목록으로 사용가능함 |
| start="연결되는 번호" |
순서있는 목록의 경우에 중단된 번호를 연결해줌 |
|
<LI> |
목록 하나하나를 만들어 주는 기능을 함 |
자...그럼 순서없는 목록부터 하나씩 배워볼까요?^^
※ 순서없는 목록
순서없는 목록은 <ul></ul> 태그를 사용합니다. 근뎅 <ul></ul> ☜ 이것만 딸랑 적으면 목록이 아니라 목록의 비스무레한 것 조차도 절대 나타니지 않습니다. 목록을 하나하나 만들어 주는 속성인 <li> 태그명령어를 만들고픈 목록의 숫자만큼 넣어 주어야 하죠. 여기서 주의 할 점은 <li> 속성은 </li> 가 필요없습니다. 자기는 꼭 써야겠다 하시는 분들은 써두 상관은 없는데....굳이 손 아프게 쓸필요가 있을 까요?^^ 잘 알아두시길..... 또한 아무리 순서없는 목록이라도 무려 4가지 종류(동그라미, 네모, 속빈동그라미, 이미지)가 있기 때문에 그걸 선택을 해줘야 하죠. 이럴때 사용하는 게 type="disc,square,circle" 속성입니다. disc(검은동그라미) , square(네모), circle(속빈 동그라미) 이져^^ 이미지의 경우는 imagesrc="이미지주소" 속성을 이용해야 합니다. 그럼 본격적으로 만들어 볼꺄요?^^
| disc |
square |
circle |
이미지 |
<ul type="disc">
<li>동그라미목록
<li>목록
<li>목록
</ul> |
<ul type="square">
<li>네모목록
<li>목록
<li>목록
</ul> |
<ul type="circle'>
<li>속빈 동그라미
<li>목록
<li>목록
</ul> |
<ul imagesrc="이미지주소">
<li>이미지목록
<li>목록
<li>목록
</ul> |
|
|
|
|
이미지 목록의 경우 브라우저에서 아직 인식을 하지 않는 것 같군요... |
어때요? 아시겠죠?^^ 다음 페이지에선 순서있는 목록에 대해서 배워보도록 하겠습니다. 다음 페이지로 넘어가지요^^ |
