|
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
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
|
<!DOCTYPE html>
<head>
<title>
열심히공부하자
</title>
<style>
#header{ /* 아이디선택자 */
width: 500px;
background-color: coral;
color: blue;
border: 1px solid cornflowerblue;
text-align: center;
}
#wrap{
width: 500px;
background-color: bisque;
border: 2px solid cornflowerblue;
text-align: center;
overflow:hidden; /*float속성을 사용하겠다*/
}
#content{
width: 350px;
border: 1px solid cornflowerblue;
float:left; /*왼쪽에 붙이겠다*/
}
#banner{
border: darkgreen 1px;
float: left; /*아래로 안붙이고 왼쪽에 붙이겠다*/
}
#footer{
clear:both; /*위의 flaot를 초기화*/
width: 500px;
background-color: deepskyblue;
border: 3px solid cornflowerblue;
text-align: center;
}
ul li.menu1{ /* ul태그면서 li태그면서 menu1클래스인것(and) */
color: brown;
font-weight: bold;
}
.menu2, .menu3, .menu4 /* menu1,menu3,menu4 클래스(or) */
{
font-size: 30px;
}
input[type=text]{ /*속성선택자*/
color: brown;
font-size: 20px
}
div li{ /* 후손(div아래 모든li)*/
color: aqua;
}
div > li{ /* 자손(바로아래 li만) */
color: blue;
}
h3~div{ /* 동위 선택자(~) : h1에서 div까지 모든 선택자 */
font-size: 20px;
}
h3+div{ /* 동위 선택자(+) h1에서 바로아래 div선택자까지 */
font-size: 30px;
color: blue;
}
</style>
</head>
<body>
<h3>안녕</h3>
<div id="header">
<h1>열심히공부하자</h1>
</div>
<div id="wrap">
<div id="content">
<ul>
<li class="menu1">menu1</li>
<li class="menu2">menu2</li>
<li class="menu3">menu3</li>
<li class="menu4">menu4</li>
<li class="menu5">menu5</li>
</ul>
<form>
이름 : <input type="text" /><br />
아이디 : <input type="text" /><br />
비밀번호 : <input type="password" /><br />
전화번호 : <input type="tel" /><br />
</form>
</div>
<div id="banner">
<p>광고</p>
<a href="http://www.google.com" target="_blank">
<img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" width="100px"/>
</a>
</div>
</div>
<div id="footer">
<p>서울특별시 중구 장충동 족발집</p>
</div>
</body>
http://colorscripter.com/info#e" target="_blank" style="color:#4f4f4f; text-decoration:none">Colored by Color Scripter
|
http://colorscripter.com/info#e" target="_blank" style="text-decoration:none; color:white">cs |
'프로그래밍' 카테고리의 다른 글
| winform class 이름 변경방법 (0) | 2021.06.10 |
|---|---|
| 선택자(개별,복수개,모두) (0) | 2019.03.27 |
| div와 시멘틱을 이용한 레이아웃 (0) | 2019.03.27 |
| 비디오 / form / 블록,라인 (0) | 2019.03.27 |
| 이미지/사운드 (0) | 2019.03.27 |
댓글