1/*
2 * CSS κΈ°μ΄ μμ μ€νμΌμνΈ
3 * μ νμ, λ°μ€ λͺ¨λΈ, ν
μ€νΈ μ€νμΌλ§, μμΉ μ§μ λ±
4 */
5
6/* ============================================
7 κΈ°λ³Έ μ€νμΌ
8 ============================================ */
9
10* {
11 margin: 0;
12 padding: 0;
13 box-sizing: border-box;
14}
15
16body {
17 font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
18 line-height: 1.6;
19 padding: 20px;
20 max-width: 900px;
21 margin: 0 auto;
22 background-color: #f5f5f5;
23}
24
25h1 {
26 text-align: center;
27 color: #333;
28 margin-bottom: 30px;
29}
30
31h2 {
32 color: #2c3e50;
33 border-bottom: 2px solid #3498db;
34 padding-bottom: 10px;
35 margin: 20px 0;
36}
37
38.section {
39 background: white;
40 padding: 20px;
41 margin-bottom: 30px;
42 border-radius: 8px;
43 box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
44}
45
46/* ============================================
47 1. μ νμ
48 ============================================ */
49
50/* μμ μ νμ */
51p {
52 margin: 10px 0;
53}
54
55/* ν΄λμ€ μ νμ */
56.highlight {
57 background-color: #ffeb3b;
58 padding: 5px 10px;
59}
60
61.warning {
62 color: #e74c3c;
63 font-weight: bold;
64}
65
66/* ID μ νμ */
67#unique {
68 background-color: #3498db;
69 color: white;
70 padding: 10px;
71 border-radius: 4px;
72}
73
74/* μμ μ νμ (λͺ¨λ μμ) */
75.parent span {
76 color: #e74c3c;
77 font-weight: bold;
78}
79
80/* μμ μ νμ (μ§μ μμλ§) */
81.container-child > p {
82 background-color: #e8f6f3;
83 padding: 10px;
84 border-left: 4px solid #1abc9c;
85}
86
87/* μΈμ νμ μ νμ */
88h3 + p {
89 color: #9b59b6;
90 font-style: italic;
91}
92
93/* μμ± μ νμ */
94input[type="text"] {
95 border: 2px solid #3498db;
96 padding: 8px;
97 margin: 5px;
98}
99
100input[type="email"] {
101 border: 2px solid #e74c3c;
102 padding: 8px;
103 margin: 5px;
104}
105
106a[target="_blank"] {
107 color: #e74c3c;
108}
109
110a[target="_blank"]::after {
111 content: " β";
112}
113
114/* ============================================
115 2. κ°μ ν΄λμ€
116 ============================================ */
117
118/* νΈλ² ν¨κ³Ό */
119.btn {
120 display: inline-block;
121 padding: 10px 20px;
122 background-color: #3498db;
123 color: white;
124 border: none;
125 border-radius: 4px;
126 cursor: pointer;
127 transition: all 0.3s ease;
128}
129
130.btn:hover {
131 background-color: #2980b9;
132 transform: translateY(-2px);
133 box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
134}
135
136.btn:active {
137 transform: translateY(0);
138}
139
140/* λ§ν¬ μν */
141.link {
142 display: inline-block;
143 margin: 10px;
144}
145
146.link:link {
147 color: #3498db;
148}
149
150.link:visited {
151 color: #9b59b6;
152}
153
154.link:hover {
155 color: #e74c3c;
156}
157
158.link:active {
159 color: #f39c12;
160}
161
162/* first-child, last-child */
163.pseudo-list {
164 list-style: none;
165 padding: 10px;
166 background-color: #ecf0f1;
167}
168
169.pseudo-list li {
170 padding: 10px;
171 margin: 5px 0;
172 background-color: white;
173}
174
175.pseudo-list li:first-child {
176 background-color: #d5f5e3;
177 border-left: 4px solid #27ae60;
178}
179
180.pseudo-list li:last-child {
181 background-color: #fadbd8;
182 border-left: 4px solid #e74c3c;
183}
184
185/* nth-child */
186.nth-list {
187 list-style: none;
188 padding: 10px;
189}
190
191.nth-list li {
192 padding: 10px;
193 margin: 5px 0;
194}
195
196.nth-list li:nth-child(odd) {
197 background-color: #aed6f1;
198}
199
200.nth-list li:nth-child(even) {
201 background-color: #f9e79f;
202}
203
204/* focus */
205.form-input {
206 padding: 10px;
207 border: 2px solid #bdc3c7;
208 border-radius: 4px;
209 width: 300px;
210 transition: border-color 0.3s, box-shadow 0.3s;
211}
212
213.form-input:focus {
214 outline: none;
215 border-color: #3498db;
216 box-shadow: 0 0 8px rgba(52, 152, 219, 0.4);
217}
218
219/* ============================================
220 3. κ°μ μμ
221 ============================================ */
222
223/* ::before, ::after */
224.quote {
225 position: relative;
226 padding: 20px 40px;
227 background-color: #f8f9fa;
228 font-style: italic;
229 border-left: 4px solid #3498db;
230}
231
232.quote::before {
233 content: """;
234 position: absolute;
235 left: 10px;
236 top: 0;
237 font-size: 3em;
238 color: #3498db;
239 line-height: 1;
240}
241
242.quote::after {
243 content: """;
244 position: absolute;
245 right: 10px;
246 bottom: -10px;
247 font-size: 3em;
248 color: #3498db;
249 line-height: 1;
250}
251
252/* ::first-letter */
253.first-letter-example::first-letter {
254 font-size: 3em;
255 font-weight: bold;
256 color: #e74c3c;
257 float: left;
258 margin-right: 10px;
259 line-height: 0.8;
260}
261
262/* ::first-line */
263.first-line-example::first-line {
264 font-weight: bold;
265 color: #2c3e50;
266}
267
268/* ============================================
269 4. λ°μ€ λͺ¨λΈ
270 ============================================ */
271
272.box-demo {
273 display: flex;
274 gap: 20px;
275 margin: 20px 0;
276}
277
278.box {
279 width: 200px;
280 padding: 20px;
281 border: 5px solid #3498db;
282 margin: 10px;
283 background-color: #ecf0f1;
284}
285
286.content-box {
287 box-sizing: content-box;
288 /* μ€μ λλΉ = 200 + 40 + 10 = 250px */
289}
290
291.border-box {
292 box-sizing: border-box;
293 /* μ€μ λλΉ = 200px (ν¨λ©, 보λ ν¬ν¨) */
294}
295
296/* λ°μ€ λͺ¨λΈ μκ°ν */
297.box-model-visual {
298 margin: 20px auto;
299 width: fit-content;
300}
301
302.margin-area {
303 background-color: #ffeaa7;
304 padding: 30px;
305 text-align: center;
306 font-size: 12px;
307}
308
309.border-area {
310 background-color: #fdcb6e;
311 padding: 20px;
312}
313
314.padding-area {
315 background-color: #81ecec;
316 padding: 30px;
317}
318
319.content-area {
320 background-color: #74b9ff;
321 padding: 30px;
322 color: white;
323 font-weight: bold;
324}
325
326/* ============================================
327 5. μμ
328 ============================================ */
329
330.color-demo {
331 display: flex;
332 flex-wrap: wrap;
333 gap: 10px;
334}
335
336.color-box {
337 padding: 20px;
338 color: white;
339 text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
340 border-radius: 4px;
341 min-width: 150px;
342 text-align: center;
343}
344
345/* ============================================
346 6. ν
μ€νΈ μ€νμΌλ§
347 ============================================ */
348
349.text-font {
350 font-family: Georgia, 'Times New Roman', serif;
351}
352
353.text-size {
354 font-size: 1.5em;
355}
356
357.text-weight {
358 font-weight: bold;
359}
360
361.text-style {
362 font-style: italic;
363}
364
365.text-decoration {
366 text-decoration: underline wavy #e74c3c;
367}
368
369.text-transform-upper {
370 text-transform: uppercase;
371}
372
373.text-transform-capital {
374 text-transform: capitalize;
375}
376
377.text-spacing {
378 letter-spacing: 2px;
379 word-spacing: 10px;
380}
381
382.text-shadow {
383 font-size: 2em;
384 text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3),
385 0 0 20px rgba(52, 152, 219, 0.5);
386}
387
388.text-align-center {
389 text-align: center;
390 background-color: #ecf0f1;
391 padding: 10px;
392}
393
394.text-line-height {
395 line-height: 2;
396 background-color: #f8f9fa;
397 padding: 10px;
398}
399
400/* ============================================
401 7. display μμ±
402 ============================================ */
403
404.display-demo {
405 background-color: #ecf0f1;
406 padding: 10px;
407 margin: 10px 0;
408}
409
410.display-block {
411 display: block;
412 background-color: #3498db;
413 color: white;
414 padding: 10px;
415 margin: 5px 0;
416}
417
418.display-inline {
419 display: inline;
420 background-color: #27ae60;
421 color: white;
422 padding: 10px;
423 /* width, height μ μ© μλ¨ */
424}
425
426.display-inline-block {
427 display: inline-block;
428 background-color: #e74c3c;
429 color: white;
430 padding: 10px;
431 margin: 5px;
432 width: 120px;
433 height: 60px;
434 vertical-align: middle;
435}
436
437.display-none {
438 display: none;
439}
440
441/* ============================================
442 8. position μμ±
443 ============================================ */
444
445.position-demo {
446 background-color: #ecf0f1;
447 padding: 20px;
448 margin: 20px 0;
449 min-height: 100px;
450}
451
452.pos-relative {
453 position: relative;
454 top: 20px;
455 left: 20px;
456 background-color: #3498db;
457 color: white;
458 padding: 10px;
459 width: fit-content;
460}
461
462.position-parent {
463 position: relative;
464 height: 150px;
465}
466
467.pos-absolute {
468 position: absolute;
469 top: 10px;
470 right: 10px;
471 background-color: #e74c3c;
472 color: white;
473 padding: 10px;
474}
475
476.pos-fixed-demo {
477 position: fixed;
478 bottom: 20px;
479 right: 20px;
480 background-color: #9b59b6;
481 color: white;
482 padding: 15px;
483 border-radius: 4px;
484 z-index: 1000;
485}
486
487.sticky-container {
488 height: 200px;
489 overflow: auto;
490}
491
492.pos-sticky {
493 position: sticky;
494 top: 0;
495 background-color: #f39c12;
496 color: white;
497 padding: 10px;
498}
499
500/* ============================================
501 9. overflow μμ±
502 ============================================ */
503
504.overflow-demo {
505 display: flex;
506 flex-wrap: wrap;
507 gap: 20px;
508}
509
510.overflow-demo > div {
511 width: 150px;
512 height: 100px;
513 background-color: #ecf0f1;
514 padding: 10px;
515 border: 2px solid #bdc3c7;
516}
517
518.overflow-visible {
519 overflow: visible;
520}
521
522.overflow-hidden {
523 overflow: hidden;
524}
525
526.overflow-scroll {
527 overflow: scroll;
528}
529
530.overflow-auto {
531 overflow: auto;
532}
533
534/* ============================================
535 νΈν°
536 ============================================ */
537
538footer {
539 text-align: center;
540 padding: 20px;
541 color: #7f8c8d;
542 border-top: 1px solid #ecf0f1;
543 margin-top: 30px;
544}