목록 관련 태그 모음
번호 없는 목록 만들기(<UL>,</UL>)
태그 내용
<UL></UL> 순서가 없는 목록을 적을때
<OL></OL> 순서가 필요한 목록을 적을때
<LI>내용</LI> UL,OL 태그내부에 목록을 적을때
<DL>내용</DL> 용어 정의 목록을 시작하는 곳에 쓴다.
<DT> 용어의 이름을 쓴다.
<DD> 용어에 대한 설명을 쓴다.
HTML 문서를 만들때 될 수 있으면 긴 내용을 입력하는 서술형보다는 한 눈에 전체적인 내용 을 파악할 수 있는 간략한 문장으로 만드는 것이 좋은 방법입니다. 깔끔하게 정돈된 문서를 만 들기 위해 목록 태그를 사용합니다. 이 태그는 자동으로 줄바꿈이 일어나고 들여쓰기가 자동 으로 되기 때문에 정돈된 느낌이 됩니다. 목록 태그에는 번호 없이 기호가 붙는 목록과 순서를 표시하듯이 번호 달린 목록이 있고 사전처럼 용어에 대한 설명을 기입할 때 사용하는 정의 목 록이 있습니다. 이런 목록 태그들은 실제 목록을 나타내는 태그로 <L1> 태그를 함께 사용합 니다.
메모장을 실행하여 다음과 같이 입력합니다.
<HTML>
<HEAD><TITLE>번호 없는 목록 만들기</TITLE>
</HEAD>
<BODY>
내가 좋아하는 것
<UL type="disc">
<LI>스포츠</LI>
<LI>영화</LI>
<LI>자동차</LI>
</UL>
웹디자인 필수 프로그램
<UL type="circle">
<LI>포토샵</LI>
<LI>일러스트레이터</LI>
<LI>플래쉬</LI>
<LI>드림위버</LI>
</UL>
웹관련직업
<UL type="square">
<LI>웹디자이너</LI>
<LI>웹프로그래머</LI>
<LI>웹마스터</LI>
<LI>웹PD</LI>
</UL>
</BODY>
</HTML>
기타 목록 관련 태그
번호 없는 목록을 만들 때 <DIR>,<MENU> 태그를 이용합니다. <DIR>는 디렉토리형 목록을 만들 때 사용하고 <MENU>는 메뉴형 목록을 만들 때 사용합니다. HTML 3.2부터는 <UL> 태 그를 사용할 것을 권장합니다. 그리고 만약 나모 웹 에디터를 이용하여 이 두개의 태그로 목록 을 작성하면 <UL> 태그로 대치됩니다.
페이지 1 / 4
05 - 목록 관련 태그
번호 달린 목록 만들기(<OL>,</OL>)
<OL>는 Ordered List의 약자로 번호를 붙여 일정한 순서가 있는 목록을 만들 때 사용합니다.
번호의 형태는 아라비아 숫자, 알파벳 대소문자, 그리스 대소문자로 지정할 수 있으며, 시작하 는 숫자의 번호를 조정할 수 있습니다.
메모장에서 실행하여 다음과 같이 내용을 입력합니다.
<HTML>
<HEAD>
<TITLE>번호 있는 목록 만들기</TITLE>
</HEAD>
<BODY>
ADODE 프로그램 (아라비아숫자)
<OL type="1">
<LI>일러스트레이터</LI>
<LI>포토샵</LI>
<LI>고라이브</LI>
</OL>
Macromedia 프로그램(영대문자)
<OL type="A">
<LI>플래쉬</LI>
<LI>드림위버</LI>
<LI>프리핸즈</LI>
<LI>파이어웍스</LI>
</OL>
HTML 에디터 (로마대문자)
<OL type="I">
<LI>메모장</LI>
<LI>에디트플러스</LI>
<LI>홈사이트</LI>
</OL>
위지웍 프로그램(영소문자)
<OL type="a">
<LI>드림위버</LI>
<LI>나모웹에디터</LI>
<LI>핫도그</LI>
</OL>
웹프로그램언어(로마소문자)
<OL type="i">
<LI>ASP</LI>
<LI>PHP</LI>
<LI>JSP</LI>
<LI>ASP.NET</LI>
</OL>
데이터베이스 종류(시작번호변경)
<OL type="A" start="4">
<LI>MS-sql</LI>
<LI>My-sql</LI>
<LI>Oracl</LI>
<LI>Access</LI>
</OL>
스크립트 언어(시작번호변경)
<OL type="I" start="10">
<LI>자바스크립트</LI>
<LI>VB스크립트</LI>
</OL>
</BODY>
</HTML>
<LI>태그
페이지 2 / 4
05 - 목록 관련 태그
정의 목록 만들기(<DL>,</DL>)
계층 목록 만들기
모든 목록들에 항목을 추가하는 것으로 종료 태그 없이 사용해도 무방합니다. 'type'이라는 속 성에서 번호 없는 목록(UL)에서 지정했던 type(disk, square, circle)과 번호 있는 목록(OL)에 서 지정했던 type(1, A, a, I, i)을 모두 사용할 수 있습니다. 그리고 'value' 속성에서 번호 있 는 목록에서 시작하는 번호를 지정하는 start 속성과 동일하게 지정할 수 있습니다.
<DL>는 Difinition List의 약자로 설명형 목록을 만들 때 사용하며 실제 목록을 나타내는 <LI>
태그를 이용하지 않고 <DD> 태그를 이용합니다. <DD>는 Definition Date의 약자로 목록의 제목에 대한 설명을 입력할 때 사용하며, 자동으로 들여쓰기가 됩니다.
목록의 제목일 경우 <DT> 태그를 이용합니다. <DT> 는 Definition Title의 약자입니다.
메모장을 실행하고 다음과 같이 내용을 입력합니다.
<HTML>
<HEAD>
<TITLE>정의 목록 만들기</TITLE>
</HEAD>
<BODY>
<DL>
<DT>HTML</DT>
<DD>HyperText Markup Language</DD>
<DT>HTTP</DT>
<DD>문서 텍스트의 비순차적 검색을 일컫는 하이퍼텍스트를 전달하는 프로토콜</DD>
</DL>
</BODY>
</HTML>
목록 태그를 독립적으로 사용할 수 있지만 <UL> 태그와 <OL> 태그를 이용하여 계층적인 목 록을 만들 수 있습니다.
메모장을 실행하여 다음과 같이 내용을 입력합니다.
<HTML>
<HEAD>
<TITLE>계층 목록 만들기</TITLE>
</HEAD>
<BODY>
웹 알아보기
<OL>
<LI>웹디자이너</LI>
<UL>
<LI>그래픽프로그램</LI>
<LI>웹애니메이션</LI>
<LI>HTML 및 HTML에디터 </LI>
</UL>
<LI>웹프로그래머</LI>
<UL type="disc">
<LI>HTML</LI>
<LI>자바스크립트</LI>
<LI>서버스크립트(ASP, PHP, JSP)</LI>
</UL>
페이지 3 / 4
05 - 목록 관련 태그
<LI>웹기획자</LI>
<UL type="square">
<LI>웹작업도구</LI>
<LI>워드프로세서 및 프리젠테이션</LI>
<LI>기획도구(비지오)</LI>
</UL>
</OL>
</BODY>
</HTML>
