본문 바로가기

HTML / CSS / Java Script

목록을 표시하는 방법은 여러 가지가 있다.

목록만드는 태그

목록은 목차 등을 표시할 때 사용하는 방법에는 여러 가지가 있는데 번호가 있고 없고 정의 목록 등이 있다.
티스토리에는 글쓰기에 목록아이콘 이 버튼 쉽게 목록 만들기 할수 있어요



번호가 없는 목록은 점을 찍어서 항목이 구분돼요.
점 모양은 <LI>의 type이라는 속성을 이용해서 항목 모양을 바꿀 수도 있다.


ul태그


<UL> <!-- 번호가 없는 목록의 시작 -->
        <LI>삐뚤어질테다(http://blog-pleur.tistory.com/) <!-- 목록을 구성하는항목 -->
	<LI type="circle">네이버(http://www.naver.com)  <!-- 목록을 구성하는항목 -->
	<LI type="square">구글(https://www.google.co.kr) <!-- 목록을 구성하는항목 -->
	<LI type="disc">다음(http://www.daum.net) <!-- 목록을 구성하는항목 -->
</UL> <!-- 번호가 없는 목록의 끝 -->

<LI>의 type 속성으로 점모양을 circle(동그란점), square(네모난점), disc(까만점)으로 바꿀수 있습니다.
번호가 없는 목록의 기본 타입은 disc입니다.



번호가 있는 목록은 점 대신에 숫자나 알파벳을 이용하여 번호를 붙인다.
번호의 모양은 <LI>의 type이라는 속성을 이용해서 항목 모양을 바꿀 수도 있다.


ol태그


<OL> <!-- 번호가 있는 목록의 시작 -->
        <LI>삐뚤어질테다(http://blog-pleur.tistory.com/) <!-- 목록을 구성하는항목 -->
	<LI type="A">네이버(http://www.naver.com)  <!-- 목록을 구성하는항목 -->
	<LI type="a">구글(https://www.google.co.kr) <!-- 목록을 구성하는항목 -->
	<LI type="I">다음(http://www.daum.net) <!-- 목록을 구성하는항목 -->
        <LI type="i">네이트(http://www.nate.com/) <!-- 목록을 구성하는항목 -->
</OL> <!-- 번호가 있는 목록의 끝 -->

번호가 있는 목록의 기본 형식은 숫자에요



번호가 있는 목록과 없는 목록을 함께 사용


정의목록


홈페이지 제작에 필요한 기술
<OL>
		<LI>웹디자인
	<UL>
		<LI type="square"> 포토샵
		<LI type="square"> 일러스트
		<LI type="square"> 드림위버
		<LI type="square"> 플래쉬
	</UL>
		<LI>웹프로그래밍
	<UL>
		<LI type="square"> 자바스크립트
		<LI type="square"> ASP
		<LI type="square"> XML
	</UL>
</OL>


내용을 설명하거나 계층적인 구조로 할 때 사용


계층구조

<DL>
	<DT>불펌 
	<DD>허락받지 않고 스크랩하는 것을(펌질)  금지하는 것 → 不과 펌(퍼가다)의 합성어
	<DT>무플
	<DD>어떤 게시판에 글을 썼는데 리플이 한개도 안 달렸을 때 무플이라고 합니다
</DL>