20190515/cssList2.html

<!doctype html> <!-- cssList2.html -->
<html>
	<head>
		<meta charset="utf-8"/>
		<meta name="viewport" content="width=device-width, initial-scale=1"/>
		<style>
			ol.inside {list-style-position:inside;}
			ol.outside {list-style-position:outside;}
			ul.img {list-style-image:url("http://usrcheat.github.io/Images/2/lobster1.png");}
			ul.char {list-style:none;}
			ul.char li::before {content:"#"; padding-right:0px; color:red;}
			/*ul li::before {content:"http://usrcheat.github.io/Images/2/lobster.png"; padding-right:0px; color:red;}*/
			ol.all {list-style:decimal-leading-zero inside;}
			ul.menu li {list-style:none; display:inline; background-color:red;}
			/*ul.menu li {list-style:none; display:inline; padding:0 20px 0 20px;}*/
			</style>
			<title>
				CSS 목록 실습
			</title>
			</head>
			<body>
				<section><h3>
				목록
				</h3>
				<ol class="inside"><li>inside position</li><li>사과</li><li>배</li><li>포도</li></ol>
				<ol class="outside"><li>outside position</li><li>사과</li><li>배</li><li>포도</li></ol>
				<ul class="img"><li>image</li><li>사과</li></ul>
				<ul class="char"><li>기타문자</li><li>사과</li><li>배</li><li>포도</li></ul>
				<ol class="all"><li>한줄로 list-style:decimal-leading-zero inside</li><li>사과</li><li>배</li><li>포도</li></ol>
				<ul class="menu"><li>메뉴|</li><li>로그인|</li><li>회원가입|</li><li>사이트맵</li></ul>
				</section>
			</body>
			</html>