본문 바로가기

웹디자인

[홈페이지제작 강좌] HTML 기본강좌 (목록 만들기 2 )

3. 목록만들기(2)
 
  앞페이지에 이어 목록 만들기에 대해서 배워보도록 하겠습니다. ^^ 이번엔 순서있는 목록 만들기 할 차례인가요?^^ 맞죠?^^
 ※ 순서 있는 목록
   순서 있는 목록 만들때는 <ol></ol> 태그를 사용합니다.  이거 역시 <li> 속성을 사용해서 목록을 나타내주어야 하구요....type="1, A, b, i, I" 을 사용해줍니다. 1(숫자), A(영어대문자), a(영어소문자), i(로마자소문자), I(로마자대문자) 를 나타내어 줍니다.  순서없는 목록하고 비슷하죠?^^ 그럼 직접 해볼까요?^^
숫자 영어대문자 영어소문자 로마자소문자 로마자대문자
<ol type="1">
<li>숫자목록
<li>목록
<li>목록
</ol>
<ol type="A">
<li>영어대문자
<li>목록
<li>목록
</ol>
<ol type="a">
<li>영어소문자
<li>목록
<li>목록
</ol>
<ol type="i">
<li>로마소문자
<li>목록
<li>목록
</ol>
<ol type="I">
<li>로마대문자
<li>목록
<li>목록
</ol>
  1. 숫자목록
  2. 목록
  3. 목록
  1. 영어대문자
  2. 목록
  3. 목록
 
  1. 영어소문자
  2. 목록
  3. 목록
 
  1. 로마소문자
  2. 목록
  3. 목록
 
  1. 로마대문자
  2. 목록
  3. 목록
 

  어때요? 간단하져?^^ 여기서 주의 할 점은 저기 로마자 대문자 type 속성을 지정해줄 때 I(영어 대문자 아이) 입니다. 가끔씩 ㅣ(영어 소문자 엘) 로 착각 하시는 분들이 있더라구요........착오 없으시길...^^
 그리고 전 페이지 처음 부분에 속성을 설명할 때 start 속성을 잠깐 설명드렸는데....start="연결되는 번호" 속성은 중단된 순서있는 목록의 목록 번호를 이어서 계속 해줄 수 있게 해주는 속성입니다. 이렇게 말로만 하니깐 뭔지 이해가 안되시져? ^^ 직접 예제를 보여드리져^^

소 스 변 환
<ol type="1">
<li>숫자 목록이져^^
<li>숫자대로...
<li>쭉~ 헉..근뎅...
</ol>
여기서 번호가 끝겼네요?^^ 하지만 계속 이어서...
<ol start="4">
<li>숫자목록을
<li>이을 수 있져..
<li>이게 start 속성
<li>입니다.
</ol>
  1. 숫자 목록이져^^
  2. 숫자대로...
  3. 쭉~ 헉..근뎅...
여기서 번호가 끝겼네요?^^ 하지만 계속 이어서...
  1. 숫자목록을
  2. 이을 수 있져..
  3. 이게 start 속성
  4. 입니다.
 

 위에 보시는 바와 같이 3으로 목록이 끝났을 때는 start="4" 로 이어줌으로서 숫자의 끝김없이 연속해서 이어줄 수 있져...이해 되시져?^^ 여기서 알아두어야 할 점은 start 속성은 순서있는 목록에서만 적용됩니다. 순서없는 목록에서는 해봤자 소용이 없겠죠^^ 
 
 여기까지 기본적인 목록태그에 대해서 배워봤습니다. 다음 페이지에선 목록태그를 약간 응용해서 사용하는 방법을 배우도록 하죠.