728x90
반응형
목록을 만드는 태그
| 이름 | 기능 | |
| <ul> , <li> 태그 | <ul> 태그는 순서가 없는 목록(unorder list)을 만들 때 사용되며, 내부에 요소(list item)를 포함하여 각 항목을 표시한다. 대부분의 브라우저에서 리스트에는 원과 같은 불릿(bullet)이 표현된다. |
|
| <ol> , <li> 태그 |
<ol> 태그는 순서 있는 목록을 만들기 위해서 사용되며 내부에 <li>를 포함한다. 리스트가 숫자(기본값)로 표현되며 속성을 지정하여 변경이 가능하다. <ol>에는 type, start, reserved와 같은 속성을 사용할 수 있으며 속성에 대한 내용은 아래와 같다. |
|
| type | 목록에 사용될 마커를 지정 * 속성값 : 1(숫자/기본값), a(영어 소문자), A(영어 대문자), i(로마숫자 소문자), I(로마숫자 대문자) |
|
| start | 시작 목록의 순번을 지정 * 속성값 : 숫자로 순번을 지정 |
|
| reserved | 항목을 역순으로 표시 | |
| <dl>, <dt>, <dd> tag | <dl>태그는 제목과 설명이 한 쌍인 설명 목록(description list)을 만들 때 사용한다. <dt>와 <dd>와 함께 사용되며, <dt>는 제목을 표시하며 <dd>는 설명(내용)을 표시한다. |
|
태그의 정리: <ol> , <li> 태그
순서가 없는 태그: <ul>
· <li> ~ </li>
대부분의 브라우저에서는 원형의 점으로 표시됨.
순서가 있는 태그: <ol>
1. type 속성
| 속성 값 | 로마 숫자 소문자설명 |
| 1 | 숫자 ( default) |
| a | 영문 소문자 |
| A | 영문 대문자 |
| i | 로마 숫자 대문자 |
| I | 로마 숫자 소문자 |
2. start 속성
· start 속성을 사용하면 중간 번호부터 시작 가능
<ol type="a" start ="3"> <li>용눈이오름</li> <li>만장굴</li> <li>카약체험</li> </ol>
3. reserved: 항목을 역순으로 표시
태그의 정리: <dl>, <dt>, <dd>
· <dl> 태그는 제목과 설명이 한 쌍인 설명 목록(description list)을 만들 때 사용한다.
| <dt> | 제목을 만들 때 사용한다. |
| <dd> | 설명을 표시할 때 사용한다. |
실습 코드
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>제주 올레</title>
<style>
dl {
line-height:25px; /* 줄 간격 */
}
</style>
</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>
728x90
반응형
'JavaScript > [2] 텍스트와 태그' 카테고리의 다른 글
| #2-1. 태그의 처리 복습 (0) | 2022.11.17 |
|---|---|
| #1. 텍스트의 처리 (0) | 2022.11.03 |
