코밍이의 하루

[HTML5] 순서 있는 목록 본문

웹언어 공부/HTML5

[HTML5] 순서 있는 목록

코밍이 2021. 8. 11. 02:07

1. 개발 환경

구분 내용
사용 언어 HTML5
개발환경 Visual Studio Code
참고 도서 [Do it] HTML5 + CSS3 웹 표준의 정석
웹브라우저 Chrome

 

2. 주요 문법

1) 관련 태그

태그 내용
<ol> 순서가 필요한 목록을 만들 때 사용
<li> <ol> 태그안에 위치하며 각 항목 표시 

2) ol 속성

속성 내용
type 항목 앞에 오는 타입을 다양하게 조절(1,a,A,i,I)
start 순서목록은 기본값 1부터 시작, 순번 지정을 통해 중간 번호부터 시작할 수 있음.
reversed 항목을 역순으로 표시

 

 

3. 소스 코드

- ol.html

<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="utf-8">
	<title>1박 2일 가족 여행 코스</title>
</head>
<body>
	<h1>1박 2일 가족 여행 코스</h1>
	<ul>
		<li>1일차
			<ol type="a">
				<li>해녀박물관</li>
				<li>낚시체험</li>
			</ol>
		</li>
		<li>2일차
			<ol type="a" start ="3">
				<li>용눈이오름</li>
				<li>만장굴</li>
				<li>카약체험</li>
			</ol>
		</li>
	</ul>

</body>
</html>

 

4. 실행 화면

ol.html

저작자표시 비영리 변경금지

'웹언어 공부 > HTML5' 카테고리의 다른 글

[HTML5] 표를 만드는 태그(1)  (0) 2021.08.12
[HTML5] 설명 목록 만들기  (0) 2021.08.11
[HTML5] 순서 없는 목록  (0) 2021.08.11
[HTML5] 동아시아 글자 표시하기  (0) 2021.08.04
[HTML5] 일부 텍스트에만 스타일 적용하기  (0) 2021.08.04
'웹언어 공부/HTML5' Related Articles more