©TCP-tryWWW

<!DOCTYPE html>
<html lang="ko">

<head>
	<meta charset="UTF-8">
	<title>CSS Navigation bar</title>
	<style>
		ul {
			background-color: #FFDAB9;
			width: 150px;
			list-style-type: none;
			margin: 0;
			padding: 0;
			border: solid 1px black;
		}
		li { border-bottom: solid 1px black; }
		li:last-child { border-bottom: none; }
		li a {
			display: block;
			color: #000000;
			padding: 8px;
			text-align: center;
			text-decoration: none;
			font-weight: bold;
		}
		li a.current {
			background-color: #FF6347;
			color: white;
		}
		li a:hover:not(.current) {
			background-color: #CD853F;
			color: white;
		}
	</style>
</head>

<body>

	<h1>메뉴 간 경계선 표현</h1>
	<ul>
		<li><a href="/index.php">Home</a></li>
		<li><a class="current" href="/html/intro">HTML</a></li>
		<li><a href="/css/intro">CSS</a></li>
		<li><a href="/javascript/intro">자바스크립트</a></li>
	</ul>

</body>

</html>