1. List Tag ?
- 목록 태그
: 문자를 입력하여 목록 형태를 구현하기 위해 사용하는 태그
블럭 레벨 요소이므로 박스 형태로 나타난다.
2. <ol> & <li> 태그
ol : ordered list 의 약자로, 순서가 있는 목록을 생성하는 태그
li : list item 의 약자로, 목록의 항목을 생성하는 태그
항목을 순서대로 나열할 때 사용하며,
기본적으로 항목 앞에 '1. 2. 3. ~' 숫자 매김이 자동으로 붙는 목록 형태를 띈다.
사용 방법
<ol>태그를 입력하여 목록을 생성.<ol>태그 내부에<li>태그를 생성.<li>와</li>사이에 항목을 입력.
<ol>
<li>항목1</li>
<li>항목2</li>
<li>항목3</li>
...
</ol>
관련 속성
start 속성
: 목록 순서 매김의 시작 번호를 지정하는 속성
여러 개의 순서 있는 목록을 하나로 연결하여 번호를 붙여야 하는 경우 사용한다.
<ol start=”시작 번호”> 형태로 <ol> 태그에 작성한다.
Ex.
<ol>
<li>회사소개</li>
<li>생산설비</li>
<li>제품소개</li>
</ol>
<ol start="4">
<li>온라인문의</li>
<li>공지사항</li>
<li>커뮤니티</li>
</ol>
type 속성
: 목록의 순서를 나타내는 표현의 형태를 지정하는 속성 (HTML 속성)
<type=”속성 값”> 형태로<ol> 태그 또는 <ul> 태그에 작성한다.
| 속성 값 | 형태 |
|---|---|
| 1 | 숫자 (기본값) |
| a | 영문 소문자 |
| A | 영문 대문자 |
| i | 로마 숫자 소문자 |
| I (대문자 i) | 로마 숫자 대문자 |
Ex.
<ol>
<li>회사소개</li>
<li type="1">생산설비</li>
<li type="a">제품소개</li>
</ol>
<ol>
<li type="A">온라인문의</li>
<li type="i">공지사항</li>
<li type="I">커뮤니티</li>
</ol>
list-style-type 속성
: 목록의 순서를 나타내는 표현의 형태를 지정하는 속성 (CSS 속성)
{list-style-type: value;} 형태로 작성한다.
| 속성 값 | 형태 |
|---|---|
| decimal | 십진수 형태 (기본값) (1, 2, 3 …) |
| decimal-leading-zero | 0이 붙는 십진수 형태 (01, 02, 03 …) |
| lower-roman | 로마 숫자의 소문자 형태 |
| upper-roman | 로마 숫자의 대문자 형태 |
| lower-alpha | 알파벳의 소문자 형태 |
| upper-alpha | 알파벳의 대문자 형태 |
Ex.
<style>
#one {list-style-type: decimal;}
#two {list-style-type: decimal-leading-zero;}
#three {list-style-type: lower-roman;}
#four {list-style-type: upper-roman;}
#five {list-style-type: lower-alpha;}
#six {list-style-type: upper-alpha;}
</style>
<ol>
<li id="one">회사소개</liㅑㅇ>
<li id="two">생산설비</li>
<li id="three">제품소개</li>
</ol>
<ol>
<li id="four">온라인문의</li>
<li id="five">공지사항</li>
<li id="six">커뮤니티</li>
</ol>
예시
<h2>레드향 샐러드 레시피</h2>
<p><b>재료</b> : 레드향 1개, 아보카도 1개, 토마토 1개, 샐러드 채소 30g</p>
<p><b>드레싱</b> : 올리브유 1큰술, 레몬즙 2큰술, 꿀 1큰술, 소금 약간</p>
<h3>재료 준비</h3>
<ol type="a">
<li>샐러드 채소를 씻고 물기를 제거한 후 준비합니다.</li>
<li>레드향과 아보카도, 토마토를 먹기 좋은 크기로 썰어줍니다.</li>
</ol>
<h3>드레싱 준비</h3>
<ol type="a" start="3">
<li>드레싱 쟤료를 믹서에 갈아줍니다.</li>
</ol>
<h3>샐러드 완성</h3>
<ol start="4">
<li type="a">볼에 샐러드 채소와 썰어 둔 레드향, 아보카도, 토마토를 넣고 드레싱을 뿌리면 끝!</li>
</ol>
3. <ul> & <li> 태그
ul : unordered list 의 약자로, 순서가 없는 목록을 생성하는 태그
li : list item 의 약자로, 목록의 항목을 생성하는 태그
항목의 순서가 중요하지 않을 때 사용하며,
기본적으로 항목 앞에 *블릿(bullet) 이 자동으로 붙는 목록 형태를 띈다.
*블릿 (bullet) ?
: 항목 앞에 붙는 작은 원이나 사각형 형태의 특수문자
사용 방법
<ul>태그를 입력하여 목록을 생성.<ul>태그 내부에<li>태그를 생성.<li>와</li>사이에 항목을 입력.
<ul>
<li>항목1</li>
<li>항목2</li>
<li>항목3</li>
...
</ul>
관련 속성
type 속성
: 블릿의 형태를 지정하는 속성 (HTML 속성)
<type=”속성 값”> 형태로 <ul> 태그 또는 <li> 태그에 작성한다.
| 속성 값 | 형태 |
|---|---|
| disc | 채운 원형 기호 (기본값) |
| circle | 빈 원형 기호 |
| square | 채운 사각형 기호 |
| none | 블릿 없음 |
Ex.
<ul>
<li>Bread</li>
<li type="disc">Milk</li>
<li type="circle">Candy</li>
<li type="square">Cookie</li>
<li type="none">Chocolate</li>
</ul>
list-style 속성
: 블릿의 형태를 지정하는 속성 (CSS 속성)
{list-style: value;} 형태로 작성한다.
| 속성 값 | 형태 |
|---|---|
| disc | 채운 원형 기호 (기본값) |
| circle | 빈 원형 기호 |
| square | 채운 사각형 기호 |
| none | 블릿 없음 |
Ex.
<style>
#one {list-style: disc;}
#two {list-style: circle;}
#three {list-style: square;}
#four {list-style: none;}
</style>
<ul>
<li>Bread</li>
<li id="one">Milk</li>
<li id="two">Candy</li>
<li id="three">Cookie</li>
<li id="four">Chocolate</li>
</ul>
예시
<h2>희망 점심 메뉴 취합</h2>
<ul>
<li type="circle">짬뽕</liㅅ>
<li>두루치기</li>
<li type="circle">된장찌개</li>
<li>돈가스</li>
<li type="circle">김밥</li>
</ul>
4. <dl> & <dt> & <dd> 태그
dl : definition list 의 약자로, 이름(name) 과 값(value) 형태로 된 정의 목록을 생성하는 태그
dt : definition title 의 약자로, 특정 설명에 대한 타이틀을 지정하는 태그
dd : definition data 의 약자로, 특정 설명을 작성하는 태그
웹 문서에서 목록 형식의 콘텐츠를 삽입할 경우, 용어 뜻을 나열하는 경우에 주로 사용하며
설명 부분이 타이틀 안으로 들여쓰기 처리되는 목록 형태를 띈다.
사용 방법
<dl>태그를 입력하여 목록을 생성.<dl>태그 내부에<dt>태그를 생성하여 타이틀 입력.<dl>태그 내부에<dd>태그를 생성하여 설명을 입력.
<dl>
<dt>타이틀</dt>
<dd>설명 란입니다.</dd>
</dl>
예시
<dl>
<dt>선물용 사과 3kg</dt>
<dd>소과 13 ~ 16과</dd>
<dd>중과 10 ~ 12과</dd>
</dl>
<dl>
<dt>선물용 사과 5kg</dt>
<dd>중과 15 ~ 19과</dd>
</dl>
