목록 태그 다루기
목록과 관련된 태그들은 웹 표준 이전에는 텍스트를 정리하기 위해 사용했으나 이제는 목록을 이용해 이미지나 텍스트 어떤 것이든 목록화해 정리할 수 있고 CSS를 적용해 메뉴나 본문 내용 등에 다양하게 활용할 수 있게 되었습니다. 목록을 만드는 태그는 자주 사용되는 태그이므로 반드시 익히고 넘어가야 합니다
무순서 목록 - <ul>태그와 <li> 태그
순서가 필요하지 않은 목록을 만들 때는 ul태그를 사용하고 <ul> 태그 안에 <li> 태그를 사용해 각 항목을 표시합니다.
순서 없는 목록의 경우 각 항목 앞에 작은 원이나 사각형 같은 불릿이 붙습니다.
|
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h2>식물원 관람 유의사항</h2>
<ul>
<li>입장권에 게시된 관람요령을 살펴보시기 바랍니다.</li>
<li>안내원의 안내에 따라주시기 바랍니다.</li>
<li>관람 지역 이외의 출입제한 지역은 출입을 금합니다.</li>
<li>식물이 식재된 곳에 들어가지 마십시오.</li>
</ul>
</body>
</html>
|
cs |
<출력 결과>
ul 태그의 type 속성 : 전체 항목에 대한 type을 설정합니다. CSS의 list-style-type에서 수정 가능합니다.
- disc : ●
- circle : ○
- square : ■
순서 목록 - <ol> 태그와 <li> 태그
항목을 나열하되 순서가 필요한 목록을 만들 때는 <ol> 태그를 사용하고 각 항목은 <li> 태그를 사용하여 작성합니다.
<ol> 태그는 여러 속성이 함께 사용되어 목록의 숫자 표기 방법이나 시작하는 숫자 등을 바꿀 수 있습니다.
|
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h2>가족 생태체험여행</h2>
<ol>
<li>기간:2019년 1월 4일~10월 5일</li>
<li>대상:가족(초등학생 이상 어린이,부모 및 동반자 참여)<br>
*프로그램의 성격에 따라 대상자의 연령이 변경될 수 있습니다.</li>
<li>인원: 1반 20명 내외(부모 포함)정원</li>
<li>참가비: 해당 프로그램 참조</li>
<li>신청방법:홈페이지 신청, 사전결제(카드)</li>
</ol>
</body>
</html>
|
cs |
<출력 결과>
ol 태그의 type 속성 : 전체 항목에 대한 type을 설정합니다. CSS의 list-style-type에서 수정 가능합니다.
- 1 : 숫자 (1, 2, 3... 기본)
- A : 알파벳 대문자
- a : 알파벳 소문자
- i : 로마 숫자 ⅰⅱⅲ ...
- I : 로마숫자 ⅠⅡⅢ...
<ol> 태그 속성으로 순서 목록의 숫자와 순서 바꾸기
속성 값에 따라 조금씩 다른 형태로 표시가 가능합니다.
②start속성
순서 목록은 기본적으로 1부터 시작하는데 start속성을 이용하면 중간 번호부터 시작 가능합니다.
③reversed속성
항목을 역순으로 표시합니다
첫 번째 순서 목록에서는 type속성을 사용하고 두 번째 순서 목록에서는 type속성과 start속성을 이용해 숫자 종류와 시작 번호를 수정한 예제입니다
|
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h2>가족 생태체험여행</h2>
<ol type="1">
<li>기간:2019년 1월 4일~10월 5일</li>
<li>대상:가족(초등학생 이상 어린이,부모 및 동반자 참여)<br>
*프로그램의 성격에 따라 대상자의 연령이 변경될 수 있습니다.</li>
</ol>
<ol type="i" start="3">
<li>인원: 1반 20명 내외(부모 포함)정원</li>
<li>참가비: 해당 프로그램 참조</li>
<li>신청방법:홈페이지 신청, 사전결제(카드)</li>
</ol>
</body>
</html>
|
cs |
<출력 결과>
정의형 목록 - <dl>, <dt>, <dd> 태그
사전 구성처럼 제목과 설명이 한쌍인 설명 목록을 만들 때 사용합니다.
<dl> 요소로 정의하고 그 안에 <dt>와 <dd> 요소를 포함하는 형태입니다.
dd요소는 블록 레벨 요소이지만 dt요소와 dd요소 이외의 요소를 포함할 수 없습니다.
dt요소는 인라인 요소이며 인라인 요소와 텍스트를 포함할 수 있습니다.
dd요소는 블록 레벨 요소이며 인라인 요소와 텍스트를 포함 할 수 있고, 블록 레벨 요소도 포함 할 수 있습니다.
|
<!DOCTYPE html>
<head>
</head>
<body>
<h1>제주 올레 </h1>
<dl>
<dt>올레 1코스</dt>
<dd>코스 : 시흥 초등학교 옆 - 광치기 해변</dd>
<dd>거리 : 14.6km(4~5시간)</dd>
<dd>난이도 : 중</dd>
<dt>올레 2코스</dt>
<dd>코스 : 광치기 해변 - 온평 포구</dd>
<dd>거리 : 14.5km(4~5시간)</dd>
<dd>난이도 : 중</dd>
</dl>
</body>
</html>
|
cs |
<출력 결과>
하나의 <dt> 태그에 세 개의 <dd> 태그가 사용되었습니다.
출력 결과 이름 하나에 세 개의 설명이 표시됩니다.