<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>가상클래스 예제</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
a {
color: #000;
text-decoration: none;
}
body {
font-family: "맑은 고딕";
font-size: 16px;
line-height: 1.5;
}
table {
border-collapse: collapse;
}
ol, ul {
list-style: none;
}
.menu {
margin: 50px auto;
width: 200px;
}
.menu li a {
padding: 10px 20px;
display: block; /* a 태그는 인라인 요소이기 때문에 블럭 요소로 바꿈 */
color: #fff;
background-color: #000;
border-bottom: 1px solid #fff;
}
.menu li a:hover, .menu li a.on { /* 마우스 올렸을 때 */
background-color: #f00;
}
.menu li a:active { /* 마우스 클릭하고 있는 상태 */
background-color: #00f;
}
.menu li a:focus { /* 탭 키 */
background-color: #0f0;
}
</style>
</head>
<body>
<ul class="menu">
<li><a class="on" href="#">회원가입안내</a></li>
<li><a href="#">로그인</a></li>
<li><a href="#">아이디 찾기</a></li>
<li><a href="#">비밀번호 찾기</a></li>
<li><a href="#">고객센터</a></li>
</ul>
</body>
</html>
Engineering is the closest thing to magic that exists in the world.