<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>속성 선택자</title>
<style>
ul{
list-style-type: none;
}
li{
width: 120px;
display: inline-block;
margin: 10px;
}
li a{
padding: 5px 10px;
font-size: 14px;
color: blue;
text-decoration: none;
}
a[href]{
background-color: yellow;
}
</style>
</head>
<body>
<ul>
<li><a>메인 메뉴 : </a></li>
<li><a href="#">메뉴 1</a></li>
<li><a href="#">메뉴 2</a></li>
<li><a href="#">메뉴 3</a></li>
<li><a href="#">메뉴 4</a></li>
</ul>
</body>
</html>
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title> 가상 클래스 </title>
<style>
body {
background-color:#fff;
}
form fieldset{
margin-bottom:25px;
}
form legend{
font-size:15px;
font-weight:600;
}
input:disabled{
background: #ccc;
border: 1px #ddd solid;
}
input:checked+span{
color: blue;
}
</style>
</head>
<body>
<form>
<fieldset>
<legend>사용자 정보</legend>
<label>이름 <input type="text" disabled></label>
</fieldset>
<fieldset>
<legend>신청 과목</legend>
<p>이 달에 신청할 과목을 선택하세요</p>
<label><input type="radio" name="subject" value="speaking"><span>회화</span></label>
<label><input type="radio" name="subject" value="grammar"><span>문법</span></label>
<label><input type="radio" name="subject" value="writing"><span>작문</span></label>
</fieldset>
</form>
</body>
</html>
<!DOCTYPE HTML>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>CSS 선택자</title>
<style>
.top-img:hover{
border: 4px solid black;
}
</style>
</head>
<body>
<p>이미지 위로 마우스 포인터를 올려보세요</p>
<img src="images/tangerines.jpg" class="top-img">
</body>
</html>
