본문 바로가기

목록지정 태그

목록지정 태그란 순차적인 번호가 부여된다든지 아니면 특수한부호가
부여데는 태그로 본문의 문서를 보기좋게 정렬된 구조로 나타냅니다

1.<LI>태그
목록항목임을 표시해주는 태그이다.
혼자서는 사용할수 없고 아래에서 설명할<UL>, <OL>,<MENU>,<DIR>
태그와 같이 사용하며 적절한 표현은 아니지만 위의 태그의
하위태그라고 이해하면 됩니다.

상위에 어떤태그를 사용했느냐 에 따라 번호가 나오기도 하고
부호가 나오기도 합니다.
종료태그가 없고 줄바꿈기능이 있으며, 들여쓰기로 출력됩니다.

형식 : <LI> 내용..

2.<UL>태그
순서가 없는 목록의 시작과 끝을 알려주는 태그이다.
특정부호를 발생 시키는데 위에서 설명한데로 LI태그와 같이 사용하며
UL태그는 순서가 없는 목록이다 라고 선언만 해주며
부호는 LI태그에서 발생 시킵니다
겹쳐서 사용하면 단계증가의 효과도 볼수 있습니다(하위메뉴)
옵션을 주지 않으면 디폴트로 속이 칠해진 원모양의 부호가 출력됩니다.

형식 :
<UL 옵션>    ← 순서없는 목록선언 시작
   <LI> 내용....   ←( LI 태그가 상위 옵션에 맞는 부호발생
   <LI> 내용.....   ← 옵션이 없으면 속이칠해진 원모양의 부호 출력 )
</UL>    ← 순서없는 목록선언 끝

옵션 :
TYPE = SQUARE , CIRCLE , DISC
SQUARE : 속이 칠해진 사각형모양의 부호
CIRCLE : 속이 빈 원모양의 부호
DISK : 속이 칠해진 원모양의 부호

예)

HTML소스
화면 출력
1.Mirage728홈의 특징
<UL>
<li>색다르다.
<li>자료가 많다.
<li>주인장이 멋지다.
</UL>
= > 1.Mirage728홈의 특징
  • 색다르다.
  • 자료가 많다
  • 주인장이 멋지다.

HTML소스
화면 출력
1.Mirage728홈의 특징
<UL type=square>
<li>색다르다.
<li>자료가 많다.
<li>주인장이 멋지다.
</UL>
= > 1.Mirage728홈의 특징
  • 색다르다.
  • 자료가 많다
  • 주인장이 멋지다.

HTML소스
화면 출력
1.Mirage728홈의 특징
<UL type=circle>
<li>색다르다.
<li>자료가 많다.
<li>주인장이 멋지다.
</UL>
= > 1.Mirage728홈의 특징
  • 색다르다.
  • 자료가 많다
  • 주인장이 멋지다.

HTML소스
화면 출력
1.Mirage728홈의 특징
<UL type=disc>
<li>색다르다.
<li>자료가 많다.
<li>주인장이 멋지다.
</UL>
= > 1.Mirage728홈의 특징
  • 색다르다.
  • 자료가 많다
  • 주인장이 멋지다.

HTML소스
화면 출력
1.Mirage728홈의 특징
<UL type=disc>
  <li>색다르다.
    <ul type=circle>
      <li>아닌것 같은데.
    </ul>
  <li>자료가 많다.
    <ul type=SQUARE>
      <li>자료는 무슨..ㅡㅡ;
    </ul>
  <li>주인장이 멋지다.
    <ul type=circle>
      <li>어캐믿지..?
    </ul>
</UL>
= > 1.Mirage728홈의 특징
  • 색다르다.
    • 아닌것 같은데.
  • 자료가 많다
    • 자료는 무슨..ㅡㅡ;
  • 주인장이 멋지다.
    • 어캐믿지..?

겹쳐서 사용하니까 하위목록이 생성 됐습니다.
옵션이 없으면 DISK 와 똑같이 나오는걸 볼수 있습니다.

3.<OL>태그
UL 태그의 반대로 순서가 있는 목록을 지정할때 쓰입니다.
겹쳐서 사용하면 단계증가의 효과도 볼수 있습니다(하위메뉴)

형식 :
<OL 옵션>    ← 순서가 있는 목록선언 시작
   <LI> 내용....   ←( LI 태그가 상위 옵션에 맞는 문자 및 숫자 발생
   <LI> 내용.....   ← 옵션이 없으면 순차적인 숫자출력(1,2,3,4...) )
</OL>    ← 순서가 있는 목록선언 끝

옵션 :
TYPE = A , a , I , i , 1
A : 순차적인 알파벳 대문자로 출력
a : 순차적인 알파벳 소문자로 출력
I : 순차적인 로마자 대문자로 출력
i : 순차적인 로마자 소문자로 출력
1 : 순차적인 아라비아 숫자로 출력

예)

HTML소스
화면 출력
1.Mirage728홈의 특징
<OL>
<li>색다르다.
<li>자료가 많다.
<li>주인장이 멋지다.
</OL>
= > 1.Mirage728홈의 특징
  1. 색다르다.
  2. 자료가 많다
  3. 주인장이 멋지다.

HTML소스
화면 출력
1.Mirage728홈의 특징
<OL type=A>
<li>색다르다.
<li>자료가 많다.
<li>주인장이 멋지다.
</OL>
= > 1.Mirage728홈의 특징
  1. 색다르다.
  2. 자료가 많다
  3. 주인장이 멋지다.

4.<MENU>태그
UL 태그와 기능이 같습니다.
단어를 나열해서 메뉴등을 만들때 사용합니다.

형식 :
<MENU 옵션>    ← 순서없는 목록선언 시작
   <LI> 내용....   ←( LI 태그가 상위 옵션에 맞는 부호발생
   <LI> 내용.....   ← 옵션이 없으면 속이칠해진 원모양의 부호 출력 )
</MENU>    ← 순서없는 목록선언 끝

5<DIR>태그
MENU 태그와 기능이 같습니다.
짥은 내용을 리스트로 꾸미는데 이용됩니다.

형식 :
<DIR 옵션>    ← 순서없는 목록선언 시작
   <LI> 내용....   ←( LI 태그가 상위 옵션에 맞는 부호발생
   <LI> 내용.....   ← 옵션이 없으면 속이칠해진 원모양의 부호 출력 )
</DIR>    ← 순서없는 목록선언 끝

6<DL,DT,DD>태그
이태그는 사전방식으로 정리할때 쓰입니다.
특정단어를 기록하고 그아래에 그단어에 대해 설명할때
많이 쓰입니다.

형식 :
<DL>    ← 사전방식 선언시작
   <DT> 제목   ←DT는 설명하고자 하는단어
   <DD> 설명....  ←DD는 단어를 설명하는 문장
</DL>    ← 사전방식 선언 끝

예)

HTML소스
화면 출력
용어사전
<DL>
  <DT>DT
  <DD>설명하고자 하는 단어를 기록하는 부분으로 제목이라고 볼수있다.
  <DT>DD
  <DD>DT에 적힌 단어를 설명하는 부분으로 DD에 적힌 부분은 들여쓰기가 되며 자동워드랩 되는 특징이 있다.
</DL>
= > 용어사전
DT
설명하고자 하는 단어를 기록하는 부분으로 제목이라고 볼수있다.
DD
DT에 적힌 단어를 설명하는 부분으로 DD에 적힌 부분은 들여쓰기가 되며 자동워드랩 되는 특징이 있다.