HTML, CSS
HTML목록을 만드는 태그
병호네
2024. 4. 10. 00:46
<ul>, <li> - 순서 없는 목록
- 각 항목 앞에 불릿이 붙여짐
- CSS의 list-style-type 속성으로 불릿 수정
<ol>, <li> - 순서 목록
- 각 항목 앞에 숫자가 붙여짐
- <ol> 태그의 속성
- type 속성 : 불릿 앞의 숫자 조정
- start 속성 : 중간 번호부터 수정
- reserved 속성 : 역순으로 표시
코드작성
<h1>1박 2일 가족 여행 코스</h1>
<ul>
<!--<ol> </ol>+ li: 순서 있는 목록:기본은 숫가 1,2,-->
<!-- type 속성으로 순서 타입을 정함-->
<li>1일차</li>
<ol type="a">
<li>광안리해수욕장</li>
<li>광안대교</li>
</ol>
<li>2일차</li>
<ol type="i">
<li>해운대 해수욕장</li>
<li>달맞이 섬</li>
<li>양정 구경</li>
</ol>
</ul>
출력
<dl>, <dt>, <dd> - 설명 목록
- ‘제목’과 그에 대한 ‘설명’으로 이루어진 목록
- <dl>과 <dt>, <dd> 태그 사용
- 하나의 <dt>에 여러 개의 <dd> 값을 가질 수 있다
코드작성
<!-- dl 목록으로 dt가 제목역활,dd는 항목으로 들여쓰기-->
<body>
<dl>
<dt>사하구 1코스</dt>
<dd>코스: 하단 초등학교 옆 - 다대포 해변</dd>
<dd>거리: 10.6kmㅡ(2~3시간)</dd>
<dt>사하구 2코스</dt>
<dd>코스: 다대포 - 하단 초등학교 옆</dd>
<dd>거리: 10.6kmㅡ(2~3시간)</dd>
</dl>
</body>
출력
