목록을 만드는 태그
1. 목록을 만드는 태그
<ul>, <li> - 순서 없는 목록
- 각 항목 앞에 불릿이 붙여짐
- CSS의 list-style-type 속성으로 불릿 수정
<body> <h1>관광 안내 전화</h1> <ul> <li>일반 전화:(국번없이)1330</li> <li>휴대 전화:010-1111-2222</li> </ul> </body>
💡 여러 항목이 나열될 때 </li> 태그를 생략해도 다음에 오는 <li> 태그를 만나면 자동으로 그 전에 </li>태그가 있는 것처럼 인식함
<ol>, <li> - 순서 목록
- 각 항목 앞에 숫자가 붙여짐
- <ol> 태그의 속성
- type 속성 : 불릿 앞의 숫자 조정
- start 속성 : 중간 번호부터 수정
- reserved 속성 : 역순으로 표시
<body>
<h1>1박 2일 가족 여행 코스</h1>
<ul>
<li>1일차</li>
<!-- <ol></ol>들여쓰기 -->
<!-- <ol></ol>+li:순서 있는 목록: 기본은 숫자 1,2 -->
<!-- type 속성으로 순서 타입을 정함 -->
<ol type="a">
<li>해녀박물관</li>
<li>낚시체험</li>
</ol>
<li>2일차</li>
<!-- start 속성으로 시작 순서를 정함 -->
<!-- <ol type="a" start = "3"> -->
<!-- type="I" 로마숫자 대문자 -->
<!-- <ol type="I"> -->
<!-- type="i" 로마숫자 소문자 -->
<ol type="i">
<li>용눈이오름</li>
<li>만장굴</li>
<li>카약체험</li>
</ol>
</ul>
</body>
<dl>, <dt>, <dd> - 설명 목록
- ‘제목’과 그에 대한 ‘설명’으로 이루어진 목록
- <dl>과 <dt>, <dd> 태그 사용
- 하나의 <dt>에 여러 개의 <dd> 값을 가질 수 있다
<body>
<!-- dl 목록으로 dt가 제목 역할, dd는 항목은 들여쓰기 -->
<dl>
<dt>올레 1코스</dt>
<dd>코스: 시흥 초등학교 옆 - 광치기 해변</dd>
<dd>거리: 14.6km(4~5시간)</dd>
<dt>올레 2코스</dt>
<dd>코스: 시흥 초등학교 옆 - 광치기 해변</dd>
<dd>거리: 14.6km(4~5시간)</dd>
</dl>
</body>
'HTML CSS > HTML' 카테고리의 다른 글
이미지와 하이퍼링크 (1) | 2024.04.08 |
---|---|
표를 만드는 태그 (0) | 2024.04.08 |
텍스트를 표시하는 태그 (0) | 2024.04.08 |
HTML 기본 문서 구조 (0) | 2024.04.08 |
웹 브라우저와 웹 편집 (0) | 2024.04.08 |