-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathCSS.html
More file actions
300 lines (261 loc) · 12.2 KB
/
CSS.html
File metadata and controls
300 lines (261 loc) · 12.2 KB
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
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
<!DOCTYPE>
<html>
<head>
<title>웹프로그래밍 CSS</title>
<style>
body {background-color:ivory; color:black;}
.red {color:red;}
small.red {color:red;} /*<small class="red">태그에만 적용가능*/
#red {color:red;}
dd > small {color:dodgerblue;}
dt small {color:dodgerblue;}
li:hover {color:gray;}
div.box {
background : yellow;
border-style : solid;
border-color : peru;
margin : 40px;
border-width : 30px;
padding : 20px;
}
p.border {
border-width:3px; /*thin, medium, thick으로도 지정가능*/
border-style:dotted;
border-color:blue;
}
p.border_vertical {
border-left-width : 3px; /* 테두리 왼쪽 두께 3픽셀 */
border-left-style : dotted; /* 테두리 왼쪽 선 점선 */
border-left-color : blue; /* 테두리 왼쪽 선 색 blue */
border-right-width : 3px; /* 테두리 오른쪾 두께 3픽셀 */
border-right-style : dotted; /* 테두리 오른쪽 선 점선 */
border-right-color : blue; /* 테두리 오른쪽 선 색 blue */
}
p.border_short {
text-indent:1em;
border:3px dotted blue;
}
div.Aing {
background-color : skyblue;
background-image:url("media/Aing.png");
background-size:400px 400px;
background-position : center center;
color:red;
}
</style>
</head>
<body>
<header>
<h1 id="top">Hi, Web!</h1>
<h3>Web Programming 스터디를 위한 정리용 html문서입니다</h3><br>
<a href="HTML_webform.html">이전 문서로 돌아가기</a>
</header>
<hr>
<section>
<article>
<h3>CSS3 스타일 시트 구성</h3>
<img src="media\Stylesheet.png"
width="500" height="100">
<ul>
<li>셀렉터 : CSS스타일시트를 HTML페이지에 적용하도록 만든 이름
<li>프로퍼티 : 스타일 속성 이름. CSS3에는 약 200개 정도의 프로퍼티가 있다.
<li>값 : 프로퍼티의 값
<li>주석문 : /*...*/주석문. 여러 줄에 걸쳐 아무 위치나 사용 가능
</ul>
<small>*셀렉터, 프로퍼티, 값은 대소문자를 구분하지 않는다.
</article>
<hr>
<article>
<h3>CSS3 스타일 시트 만들기</h3>
<ul><strong>HTML문서에 CSS스타일시트 만드는 3가지 방법</strong>
<li><details>
<summary><style>태그에 스타일시트 작성</summary>
<style>태그는 <head>태그 내에서만 작성 가능하며,
작성된 스타일시트는 웹 페이지 전체에 적용된다.
</details>
<li style="color:magenta">style 속성에 스타일시트 작성</li>
<li><details>
<summary>스타일시트를 외부 파일로 작성 후, 파일을 불러와 사용</summary>
<small>두가지 방법 사용 가능</small><br>
<link href="filename.css" type="text/css" rel=stylesheet"><br>
@import url("filename.css")<br>
</details>
</ul>
</article>
<hr>
<article>
<h3>CSS3 규칙</h3>
<h4>-스타일 상속</h4>
<dl>
<dt><strong>부모태그</strong>
<dd>자신을 둘러싸는 태그. 부모 태그로부터 스타일시트를 상속받는다
</dl>
<p style="color:green"><p>태그의 스타일시트 color:green<br>
<em style=“font-size:25px”><em>은 <p>의 자식이다.</em>
</p><br>
<h4>-스타일 합치기와 오버라이딩</h4>
<ol><strong>각 태그에는 4가지 종류의 스타일시트가 동시에 적용될 수 있다</strong>
<li>브라우저의 디폴트 스타일시트
<li>.css 스타일시트 파일에 작성된 스타일시트
<li><style>태그에 작성된 스타일시트
<li>style속성에 작성된 스타일시트
</ol>
<small>*아래로 내려갈수록 우선순위가 높다.</small><br>
<p style="background-color:orange"><style>에서 작성한 ivory색 배경보다
<p>의 style속성에 작성한 orange색 배경이 우선 적용된다.</p>
</article>
<hr>
<article>
<h3>셀렉터</h3>
HTML태그의 모양을 꾸밀 스타일시트를 선택하는 기능
<details>
<summary><b>태그 이름 셀렉터</b></summary>
태그 이름이 셀렉터로 사용되는 유형<br>
셀렉터와 같은 이름의 모든 태그에 CSS3 스타일시트 적용<br><br>
<small>*예시 : h3, li {color:brown;}</small>
</details><br>
<details>
<summary><b>class 셀렉터</b></summary>
점(.)으로 시작하는 이름의 셀렉터<br>
HTML태그의 class속성으로만 지정 가능<br>
<i><small>여러 태그를 단체로 동일한 CSS스타일을 적용할 때 적합</small></i><br><br>
<small class="red">.red {color:red;}셀렉터를 적용</small>
</details><br>
<details>
<summary><b>ID 셀렉터</b></summary>
#으로 시작하는 이름의 셀렉터<br>
HTML태그의 ID속성으로만 지정 가능<br>
<i><small>여러 태그 중 특정 태그에만 CSS스타일을 적용할 때 적합</small></i><br><br>
<small id="red">#red {color:red;}셀렉터를 적용</small>
</details><br>
<details>
<summary><b>셀렉터 조합하기</b></summary>
2개 이상의 셀렉터를 조합하여 사용할 수 있다.<br>
<dl>
<dt>자식 셀렉터
<dd>부모 자식 관계인 두 셀렉터를 '>'기호로 조합<br>
<small>dd > small {color:dodgerblue;}</small>
<dt>자손 셀렉터
<dd>자손 관계인 2개 이상의 태그 나열<br>
<small>dt small {color:dodgerblue;}</small>
</dl>
</details><br>
<details>
<summary><b>전체 셀렉터와 속성 셀렉터</b></summary><br>
<strong>-속성 셀렉터</strong><br>
HTML 태그의 특정 속성에 대해 값이 일치하는 태그에만 스타일을 적용<br>
<small>input[type=text]{color:red;} -> type속성값이 "text"인 <input>태그에 적용</small><br><br>
<strong>-전체 셀렉터</strong><br>
와일드카드(*)를 사용하여 웹 페이지의 모든 태그에 스타일을 적용<br>
<small> ex) *{color:red;}</small>
</details><br>
<details>
<summary><b>가상 클래스 셀렉터</b></summary>
어떤 조건이나 상황에서 스타일을 적용하도록 만드 셀렉터<br>
->40개 이상의 가상 클래스 셀렉터들이 있다.<br>
<small>li:hover {color:gray;}</small>
<ol>자주 쓰이는 가상 셀렉터
<li>visited : 방문한 링크에 스타일 적용</li>
<li>hover : 마우스가 올라갈 때 스타일 적용</li>
<li>first-letter : 블록형 태그의 첫 글자에 스타일 적용</li>
</ol>
</details>
</article>
<hr>
<article>
<h3>색 표현</h3>
<p>CSS3에서는 3가지 방법으로 색을 표현할 수 있다.
<ul>
<li style="color:#8A2BE2;">16진수 코드로 표현 -> #8A2BE2</li>
<li style="color:rgb(138, 43, 226)">10진수 코드와 RGB()로 표현 -> rgb(138, 43, 226)</li>
<li style="color:blueviolet">CSS3 표준에 지정된 색 이름으로 표현 -> blueviolet</li>
</ul>
<small>CSS3의 색 관련 프로퍼티 : color, background-color, border-color</small>
</p>
</article>
<hr>
<article>
<h3>텍스트</h3>
CSS3로 문단 들여쓰기나 정렬 등 출력 모양을 제어할 수 있다.
<div style="background-color:white; border-color:black;">
<p style="text-indent:1em;">{text-indent:1em;} -> 1글자 들여쓰기</p>
<p style="text-align:center;">{text-align:center;} -> 중앙 정렬</p>
<p style="text-decoration:underline;">{text-decoration:underline;}</p>
<p style="text-decoration:line-through;">{text-decoration:line-through;}</p>
</div>
</article>
<hr>
<article>
<h3>CSS3의 표준 단위</h3>
<img src="media\CSS3_standard.png" width="540" height="240">
</article>
<hr>
<article>
<h3>폰트</h3>
<small>폰트에는 Serif, Sans-Serif, Monospace 3가지의 유형이 있다.</small><br>
<h4>-폰트의 프로퍼티</h4>
<ul>
<li><b>font-family : 구체적인 폰트 이름 지정</b><br>
<img src="media\font_family.png" width="350" height="80"></li>
<li><b>font-size : 폰트 크기</b><br>
<p>font-size:40px; -> 40픽셀 크기<br>
font-size:medium; -> 중간 크기<br>
font-size:1.6em; -> 현재 폰트의 1.6배 크기</p></li>
<li><b>font-style : normal, italic, oblique 중 하나를 지정</b></li><br>
<li><b>font-weight : 100~900사이의 수, normal, bold, lighter에서 지정</b></li>
</ul>
<h4 style="font-style:italic;">-단축 프로퍼티, font</h4>
<p style="text-indent:1em;">font의 style, weight, size, family를 순서대로 지정</p>
<img src="media\font_property.png" width="600" height="36">
</article>
<hr>
<article>
<h3>박스 모델</h3>
CSS3는 HTML의 태그 요소를 사각형 박스로 다룬다.<br><br>
<table border="0">
<caption style="font-size:large;font-weight:bold;">박스의 구성</caption>
<tbody>
<tr><td rowspan="4"><img src="media\box_model.png" width="150" height="200"></td><td><b>콘텐츠</b> : HTML태그의 텍스트나 이미지 부분</td></tr>
<tr><td><b>패딩</b> : 콘텐츠를 직접 둘러싸고 있는 내부 여백</td></tr>
<tr><td><b>테두리</b> : 패딩 외부의 외곽선으로 직선이나 점선 혹은 이미지로 입힐 수 있음</td></tr>
<tr><td><b>여백</b> : 박스의 맨 바깥 영역, 테두리 바깥 공간으로 인접한 아래위 태그의 박스와의 거리</td></tr>
</tbody>
</table><br>
<h4>-박스의 크기 제어</h4>
width, height, margin, padding등의 프로퍼티로 박스 크기를 지정<br>
<div class="box">
<span>DIVDIVDIV</span>
</div>
<h4>-테두리 꾸미기</h4>
<h5 style="text-indent:1em;">테두리의 두께와 모양과 색</h5>
테두리는 패딩이나 여백과 달리 두께(width), 모양(style), 색(color)을 지정하는 프로퍼티를 가지고 있다.<br>
<p class="border">박스 모델 테두리</p>
<p class="border_vertical">수직 테두리만 지정</p>
<h4 style="font-style:italic;">-단축 프로퍼티, border</h4>
<p title="border의 width, style, color를 순서대로 지정" class="border_short">border:width style blue;</p>
<details>
<summary style="color:red; font-weight:bold;">고급 테두리 꾸미기</h4></summary><br>
<h4>둥근 모서리 테두리</h4>
<p style="border:3px solid green; border-radius:50px;">border-radius:50px;</p>
<p class="border" style="border-radius:0px 20px 40px 60px;">
border-radius:0px 20px 40px 60px -> 왼쪽 위부터 시계방향 적용</p>
<h4>이미지 테두리</h4>
border-image 프로퍼티를 사용해 테두리에 이미지를 입힐 수 있다.
<pre>구현요망</pre>
</details>
</article>
<hr>
<article>
<h3>배경</h3>
background-color와 background-image로 배경색과 배경 이미지를 지정한다.<br>
둘다 지정되면 배경 이미지가 출력되지 않는 영역에 배경색 출력<br>
<div class="Aing">
배경 이미지의 위치 : background-position:center cneter;<br>
배경 이미지의 크기 : background-size:400px 400px;<br>
배경 이미지 반복출력 : background-repeat:repeat-x와 repeat-y중 선택 cneter;<br>
</div>
<h4 style="font-style:italic;">-단축 프로퍼티, background</h4>
<div title="background의 color, image, position/size, repeat, origin을 순서대로 지정" class="Aing">border:color image position/size repeat;</p>
</article>
</body>
</html>