안녕하세요, 여행벌입니다.
오늘은 목록을 만드는 태그들에 대해서 다뤄보겠습니다.
<ul> <li> 태그 - 순서 없는 목록 만들기
순서가 필요하지 않은 목록(unordered list)을 만들 때는 <ul> 태그를 사용하고 <ul> 태그 안에 <li> 태그를 사용해 각 항목을 표시합니다. <ul> 태그의 경우 각 항목 앞에 작은 원이나 사각형 같은 불릿이 붙습니다. CSS를 이용하면 불릿을 수정할 수 있습니다.
<ol> <li> 태그 - 순서 있는 목록 만들기
순서가 필요한 목록(ordered list)을 만들 때는 <ol> 태그를 사용하고 <ol> 태그 안에 <li> 태그를 사용해 각 항목을 표시합니다. <ul> 태그와 사용 방법은 같으나 <ol> 태그에는 여러 속성들이 함께 사용되어 목록의 숫자 표기 방법이나 시작하는 숫자 등을 바꿀 수 있습니다.
type 속성 : 1(숫자, 기본값) a(영문 소문자) A(영문 대문자) i(로마숫자 소문자) I(로마숫자 대문자)
start 속성 : 순서 목록은 기본적으로 1부터 시작하는데 start 속성을 이용하면 중간 번호부터 시작할 수 있습니다.
reversed 속성 : 항목을 역순으로 표시합니다.
<dl> <dt> <dd> 태그 - 설명 목록 만들기
<dl> 태그는 '제목'과 설명이 한 쌍인 설명 목록(description list)을 만듭니다. <dl> 태그는 목록을 만들고 <dt> 태그는 제목을 <dd> 태그는 설명을 표시합니다.
예시를 통해서 익혀보겠습니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>기초문법#4 예제</title>
</head>
<body>
<p>중국집 메뉴(ul, li)</p>
<ul>
<li>짜장면</li>
<li>짬뽕</li>
<li>볶음밥</li>
<li>탕수육</li>
<li>양념탕수육</li>
</ul>
<p>중국집 메뉴(ol, li type = 1)</p>
<ol type=1>
<li>짜장면</li>
<li>짬뽕</li>
<li>볶음밥</li>
<li>탕수육</li>
<li>양념탕수육</li>
</ol>
<p>중국집 메뉴(ol, li type = i)</p>
<ol type=i>
<li>짜장면</li>
<li>짬뽕</li>
<li>볶음밥</li>
<li>탕수육</li>
<li>양념탕수육</li>
</ol>
</body>
</html>
<ol> 태그는 type 에 따라서 목록을 표시해주는 방법이 달라지는 것을 확인할 수 있습니다.
reversed 속성을 추가해보겠습니다.
<p>중국집 메뉴(ol, li type = 1)</p>
<ol type=1 reversed=true>
<li>짜장면</li>
<li>짬뽕</li>
<li>볶음밥</li>
<li>탕수육</li>
<li>양념탕수육</li>
</ol>
reverse 속성에 의해 순서가 반대로 표시되는 것을 확인할 수 있습니다.
이번에는 start 속성을 추가해보겠습니다.
<p>중국집 메뉴(ol, li type = i)</p>
<ol type=i start=3>
<li>짜장면</li>
<li>짬뽕</li>
<li>볶음밥</li>
<li>탕수육</li>
<li>양념탕수육</li>
</ol>
start 속성을 추가하면 다음과 같이 3부터 시작합니다.
<dl> <dt> <dd>태그도 예시를 통해서 익혀보겠습니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>제주 올레</title>
</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>
<dl> <dt> <dd> 태그를 이용하면 위와 같이 설명 목록을 만들 수 있습니다.