웹마스터 팁
[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>
댓글 0
| 제목 | 글쓴이 | 날짜 |
|---|---|---|
| 비밀글 댓글이 최신댓글 위젯에 노출되는 문제 수정방법 [1] | 얼터1 | 2009.04.10 |
| [1.2.0] content 위젯 사용시 rss리더 새창에 뛰우기 [1] | 늘같이 | 2009.04.10 |
| XpressEngine 1.2.1 r6096 트리거 목록 [2] [1] | mooo | 2009.04.13 |
게시판에서 확장 변수를 쓰는 경우 1.2.0 이상 버전으로 업그레이드하기 전에 패치하시기 바랍니다.
[5]
 | mooo | 2009.04.14 |
| 제로보드4, xe 버전 바이러스에 대한 질문 [1] | 투자혁명 | 2009.04.15 |
|
페이지 및 게시판 메뉴 경로
[2]
| 자반튀김 | 2009.04.15 |
| 해당 Cafe 회원에 가입후 Cafe 회원목록에 나타나지 않음...... | 뉴욕에서 | 2009.04.16 |
|
폰트가 작아져요
[2]
| 황소111 | 2009.04.17 |
| 홈페이지 타이틀이 $user_lang->home ,freeboard등으로 나오는 문제 수정방법(자체해결) [1] | 정박사닷컴 | 2009.04.18 |
|
첨부파일 안올라갈 경우..
[5]
| 양갱; | 2009.04.18 |
| 포인트 부족하면 글 조회 안되게 하는 법 [6] | 뚱님*^^* | 2009.04.18 |
| 다양한 언어로 홈페이지 서비스하기 - 무식한 방법 [4] | 멀리서 | 2009.04.21 |
|
BNU님의 Planner XE 1.2 버젼(일정관리)
[9]
| 개돌 | 2009.04.21 |
| 플래시 랜덤하게 불러오기 [9] | 선비숨결 | 2009.04.21 |
| 스프링노트 연동기를 써 보았습니다. | amyjang | 2009.04.23 |
| 초보 xe1.1.5에대한질문 [3] | 울프 | 2009.04.26 |
| [질문]회원가입시 음력생일입력 가능 한가요? [1] | 신정 | 2009.04.27 |
|
XE 위키에 최근 접속 페이지 정보 출력
| 개돌 | 2009.04.27 |
| XE 1.2.1에서 xe_default 게시판 스킨 사용시 IE에서 글입력폼이 안보일 때 [2] | 현의느낌 | 2009.04.28 |
| 사랑비BGM 플레이기 설치하고 제어하기 [2] | 스유군 | 2009.04.28 |