WEB.CSS

chapter25 : menu

GAWON 2023. 5. 18. 10:24 
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
	*{
		padding: 0;
		margin: 0;
	}
	ul{
		list-style-type: none;
		background-color: gray;
		overflow: hidden;
	}
	ul li{
		float: left;
	}
	li a{
		display: block;
		text-align: center;
		width: 100px;
		padding: 20px;
		text-decoration: none;
		color: #fff;
	}
	li a:hover {
		background-color: maroon;
		font-weight: bold;
		color: orange;
	}

</style>
</head>
<body>
	<ul>
		<li><a href="#">Home</a></li>
		<li><a href="#">Board</a></li>
		<li><a href="#">Guest</a></li>
		<li><a href="#">About</a></li>
	</ul>
	<div>본문</div>
</body>
</html>