웹마스터 팁
[HTML 초보자] 열거목록에 대한 스타일정의 두번째
2003.03.08 12:18
목록을 나열하는 방법도 두가지 방법이 있습니다.
한가지 방법은 OL태그를 작성하여, 순서있는 목록을 작성하는 것이고, 또하나는 UL태그를 작성하여 순서없는 목록을 만드는 것입니다.
OL은 Ordered List의 약자이며, UI는 Unordered List의 약자입니다.
그리고 목록의 각 항목에는 <LI>라는 태그가 앞에 붙이게 되는데, 이것은 List Item의 약자인 것입니다.
목록을 작성할때는 각 항목의 길이가 한 줄을 넘지 않도록 하게 하며, 항목의 길이가 길어서 다음 줄로 이어지면 좋은 모양이 나올수 없음으로 가능한 한 항목 길이를 간단명료하게 해야합니다.
<LI>태그는 목록을 구성하는 각 항목을 열거하기 위해서 사용하는 태그입니다. 순서있는 목록태그인 <OL>와 함께 사용하면 각 항목 앞에 1, 2, 3...과 같은 숫자가 나오며, 순서가 없는 목록 태그인 <UL>과 함께 사용하면 임의의 기호에 따라 항목이 나열됩니다. <LI>태그는 TYPE 속성이 있는데, 속성값과 그 의미는 아래와 같습니다.
※ 아래
<OL></OL>: 함께 사용하는 태그
<LI TYPE="A">LIST</LI>: 속성이고 의미는, 알파벳 대문자를 만듬
<LI TYPE="a">LIST</LI>: 속성 의미는, 알파벳 소문자를 만듬
<LI TYPE="I">LIST</LI>: 속성 의미는, 로마문자 대문자를 만듬
<LI TYPE="i">LIST</LI>: 속성 의미는, 로마문자 소문자를 만듬
<UL></UL>: 함께 사용하는 태그
<LI TYPE="square">LIST</LI>: 속성이고, 사각형 표시
<LI TYPE="disc"></LI>: 속성이고, 원반표시
<LI TYPE="circle"></LI>: 속성이고, 원 표시
※ 태그의 예제 <OL></OL>
<HTML>
<HEAD>
<TITLE>HTML 목록작성하기</TITLE>
</HEAD>
<BODY>
<H3>순서있는 목록 작성하기</H3>
<B>프린트 종류</B>
<OL>
<LI>잉크젯</LI>
<LI>버블젯</LI>
<LI>레이젯</LI>
</OL>
<B>컴퓨터 기종</B>
<OL>
<LI TYPE="A">펜티엄 PRO</LI>
<LI>펜티엄 Ⅱ</LI>
</OL>
<B>검색엔진</B>
<OL TYPE="I">
<LI>야후</LI>
<LI>라이코스</LI>
<LI>알타비스타</LI>
</OL>
</BODY>
</HTML>
----------------------------------------------------------------------
※ 태그의 예제 <UL></UL>
<HTML>
<HEAD>
<TITLE>HTML 목록작성하기</TITLE>
</HEAD>
<BODY>
<H3>순서없는 목록 작성하기</H3>
<B>컴퓨터 주변기기</B>
<UL>
<LI>프린터</LI>
<LI>스캐너</LI>
<LI>CD 드라이버</LI>
</UL>
<B>컴퓨터 주변기기</B>
<UL>
<LI TYPE="square">프린터</LI>
<LI TYPE="circle">스캐너</LI>
<LI TYPE="disc">CD 드라이버</LI>
</UL>
</BODY>
</HTML>
한가지 방법은 OL태그를 작성하여, 순서있는 목록을 작성하는 것이고, 또하나는 UL태그를 작성하여 순서없는 목록을 만드는 것입니다.
OL은 Ordered List의 약자이며, UI는 Unordered List의 약자입니다.
그리고 목록의 각 항목에는 <LI>라는 태그가 앞에 붙이게 되는데, 이것은 List Item의 약자인 것입니다.
목록을 작성할때는 각 항목의 길이가 한 줄을 넘지 않도록 하게 하며, 항목의 길이가 길어서 다음 줄로 이어지면 좋은 모양이 나올수 없음으로 가능한 한 항목 길이를 간단명료하게 해야합니다.
<LI>태그는 목록을 구성하는 각 항목을 열거하기 위해서 사용하는 태그입니다. 순서있는 목록태그인 <OL>와 함께 사용하면 각 항목 앞에 1, 2, 3...과 같은 숫자가 나오며, 순서가 없는 목록 태그인 <UL>과 함께 사용하면 임의의 기호에 따라 항목이 나열됩니다. <LI>태그는 TYPE 속성이 있는데, 속성값과 그 의미는 아래와 같습니다.
※ 아래
<OL></OL>: 함께 사용하는 태그
<LI TYPE="A">LIST</LI>: 속성이고 의미는, 알파벳 대문자를 만듬
<LI TYPE="a">LIST</LI>: 속성 의미는, 알파벳 소문자를 만듬
<LI TYPE="I">LIST</LI>: 속성 의미는, 로마문자 대문자를 만듬
<LI TYPE="i">LIST</LI>: 속성 의미는, 로마문자 소문자를 만듬
<UL></UL>: 함께 사용하는 태그
<LI TYPE="square">LIST</LI>: 속성이고, 사각형 표시
<LI TYPE="disc"></LI>: 속성이고, 원반표시
<LI TYPE="circle"></LI>: 속성이고, 원 표시
※ 태그의 예제 <OL></OL>
<HTML>
<HEAD>
<TITLE>HTML 목록작성하기</TITLE>
</HEAD>
<BODY>
<H3>순서있는 목록 작성하기</H3>
<B>프린트 종류</B>
<OL>
<LI>잉크젯</LI>
<LI>버블젯</LI>
<LI>레이젯</LI>
</OL>
<B>컴퓨터 기종</B>
<OL>
<LI TYPE="A">펜티엄 PRO</LI>
<LI>펜티엄 Ⅱ</LI>
</OL>
<B>검색엔진</B>
<OL TYPE="I">
<LI>야후</LI>
<LI>라이코스</LI>
<LI>알타비스타</LI>
</OL>
</BODY>
</HTML>
----------------------------------------------------------------------
※ 태그의 예제 <UL></UL>
<HTML>
<HEAD>
<TITLE>HTML 목록작성하기</TITLE>
</HEAD>
<BODY>
<H3>순서없는 목록 작성하기</H3>
<B>컴퓨터 주변기기</B>
<UL>
<LI>프린터</LI>
<LI>스캐너</LI>
<LI>CD 드라이버</LI>
</UL>
<B>컴퓨터 주변기기</B>
<UL>
<LI TYPE="square">프린터</LI>
<LI TYPE="circle">스캐너</LI>
<LI TYPE="disc">CD 드라이버</LI>
</UL>
</BODY>
</HTML>