Workspace-Web/CSS3_Test2.html at master · ybm0934/Workspace-Web · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS3 Attribute / Parent / Child Selector</title>
<style type="text/css">
	input[type="text"] {background: red;}
	input[type="password"] {background: blue;}
	#header > h1{color:red;}
	#section > h1{color:blue;}
	table > tbody > tr > th {color:greenyellow;}
	#action > h1:hover{color:red;}
	#action > h1:active{color:blue;}
	#action{cursor: pointer;}
	#status > input:enabled{background-color: white;}
	#status > input:disabled{background-color: gray;}
	#status > input:focus{background-color: orange;}
</style>
</head>
<body>
	<div>
		<form>
			<input type="text">
			<input type="password">
		</form>
	</div>
	<hr>
	<div id="header">
		<h1 class="title">Title</h1>
		<div id="nav">
			<h1>Navigation</h1>
		</div>
	</div>
	<div id="section">
		<h1 class="title">Title</h1>
		<div id="nav">
			<p>"Neque porro quisquam est qui dolorem ipsum quia dolor sit
				amet, consectetur, adipisci velit..." "There is no one who loves
				pain itself, who seeks after it and wants to have it, simply because
				it is pain..."</p>
		</div>
	</div>
	<hr>
	<div>
		<table border="1">
			<tr>
				<th>이름</th>
				<th>지역</th>
			</tr>
			<tr>
				<td>홍길동</td>
				<td>서울시가 다 집이다...</td>
			</tr>
		</table>
	</div>
	<hr>
	<div id="action">
		<h1>반응선택자</h1>
	</div>
	<hr>
	<div id="status">
		<h2>사용가능</h2>
		<input>
		<h2>사용 불가능</h2>
		<input disabled="disabled">
	</div>
</body>
</html>