태터데스크 관리자

도움말
닫기
적용하기   첫페이지 만들기

태터데스크 메시지

저장하였습니다.

오늘 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에 링크되어 있습니다.

 

posted by 예스비™

이글에 관한 저작권은 예스비™에게 있으며, 무단 전제및 스크렙(퍼가기), 인용, 수정등을 불허 합니다. 이 글의 사용은 공지의 "저작권안내"에 따라 사용 하시기 바랍니다. 불편하시더라도 가급적 rss로 구독하거나 제 블로그에 직접 방문하셔서 읽으시길 바랍니다. _by 예스비™
제 글이 맘에 드셨나요? RSS구독을 하시면 무료로 배달해 드립니다.
  • 한rss로 구독하기
  • 피드버너로 구독하기
  • 구글리더로 구독하기
  • 다음뷰로 구독하기
  • 최근 댓글

    최근 트랙백

    BLOG main image
    포토샵 강좌, html/css 강좌등 어렵게만 느껴졌던 웹디자인을 초보자도 쉽게 이해 할 수 있는 튜토리얼, IT 트랜드, 블로그팁과 운영법, 디자인 시각에서 풀어 헤치는 상품 리뷰등, 디자인에 대한 재밌고 유익한 정보를 제공하는 블로그입니다. by 예스비™
    rss

    위젯

    BLOG ★ NIGHT

    Blog♥Rings

    Blog♥Rings Family Blog & Sites T-Blog Web site meta hub site

    구독리스트

  • rss
  • Add to Google Reader or Homepage
  • 블로그코리아에 블UP하기
  • Powered by FeedBurner
  • BlogRankers.com
  • Page Ranking Tool