1/*
2 * λ°μν μΉ λμμΈ μμ μ€νμΌμνΈ
3 * Mobile First μ κ·Όλ²
4 */
5
6/* ============================================
7 CSS λ³μ (Custom Properties)
8 ============================================ */
9:root {
10 --primary-color: #3498db;
11 --secondary-color: #2ecc71;
12 --dark-color: #2c3e50;
13 --light-color: #ecf0f1;
14 --text-color: #333;
15
16 /* λ°μν μ¬λ°± */
17 --spacing-sm: 10px;
18 --spacing-md: 20px;
19 --spacing-lg: 40px;
20}
21
22/* ============================================
23 κΈ°λ³Έ μ€νμΌ (λͺ¨λ°μΌ μ°μ )
24 ============================================ */
25* {
26 margin: 0;
27 padding: 0;
28 box-sizing: border-box;
29}
30
31body {
32 font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
33 line-height: 1.6;
34 color: var(--text-color);
35 background-color: #f5f5f5;
36}
37
38.container {
39 width: 100%;
40 padding: var(--spacing-sm);
41}
42
43/* ============================================
44 λ€λΉκ²μ΄μ
45 ============================================ */
46.navbar {
47 display: flex;
48 justify-content: space-between;
49 align-items: center;
50 flex-wrap: wrap;
51 background-color: var(--dark-color);
52 padding: 15px var(--spacing-sm);
53 position: sticky;
54 top: 0;
55 z-index: 1000;
56}
57
58.logo {
59 color: white;
60 font-size: 1.25rem;
61 font-weight: bold;
62}
63
64.menu-toggle {
65 display: block;
66 background: none;
67 border: none;
68 color: white;
69 font-size: 1.5rem;
70 cursor: pointer;
71}
72
73.nav-links {
74 display: none;
75 width: 100%;
76 list-style: none;
77 flex-direction: column;
78 margin-top: 15px;
79}
80
81.nav-links.active {
82 display: flex;
83}
84
85.nav-links li a {
86 display: block;
87 color: white;
88 text-decoration: none;
89 padding: 10px 0;
90 border-bottom: 1px solid rgba(255,255,255,0.1);
91}
92
93.nav-links li a:hover {
94 color: var(--primary-color);
95}
96
97/* ============================================
98 λ©μΈ μ½ν
μΈ
99 ============================================ */
100h1 {
101 font-size: 1.75rem;
102 margin: var(--spacing-md) 0;
103 text-align: center;
104}
105
106.lead {
107 text-align: center;
108 color: #666;
109 margin-bottom: var(--spacing-md);
110}
111
112.section {
113 background: white;
114 padding: var(--spacing-md);
115 margin-bottom: var(--spacing-md);
116 border-radius: 8px;
117 box-shadow: 0 2px 5px rgba(0,0,0,0.1);
118}
119
120h2 {
121 font-size: 1.25rem;
122 color: var(--dark-color);
123 margin-bottom: 15px;
124 padding-bottom: 10px;
125 border-bottom: 2px solid var(--primary-color);
126}
127
128/* ============================================
129 λ·°ν¬νΈ μΈλμΌμ΄ν°
130 ============================================ */
131.viewport-indicator span {
132 display: none;
133 padding: 15px;
134 background: var(--primary-color);
135 color: white;
136 border-radius: 8px;
137 font-size: 1.25rem;
138 text-align: center;
139}
140
141.viewport-indicator .mobile { display: block; }
142
143/* ============================================
144 λ°μν 그리λ
145 ============================================ */
146.responsive-grid {
147 display: grid;
148 grid-template-columns: 1fr;
149 gap: 10px;
150}
151
152.grid-item {
153 background: var(--primary-color);
154 color: white;
155 padding: 30px;
156 text-align: center;
157 border-radius: 8px;
158 font-size: 1.5rem;
159 font-weight: bold;
160}
161
162/* ============================================
163 λ°μν μΉ΄λ
164 ============================================ */
165.card-grid {
166 display: flex;
167 flex-direction: column;
168 gap: var(--spacing-md);
169}
170
171.card {
172 background: white;
173 border-radius: 8px;
174 overflow: hidden;
175 box-shadow: 0 2px 8px rgba(0,0,0,0.1);
176}
177
178.card-image {
179 height: 150px;
180 background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
181 display: flex;
182 align-items: center;
183 justify-content: center;
184 color: white;
185 font-size: 1.5rem;
186}
187
188.card-content {
189 padding: var(--spacing-md);
190}
191
192.card-content h3 {
193 margin-bottom: 10px;
194}
195
196.card-content p {
197 color: #666;
198 margin-bottom: 15px;
199}
200
201.btn {
202 display: inline-block;
203 padding: 10px 20px;
204 background: var(--primary-color);
205 color: white;
206 text-decoration: none;
207 border-radius: 4px;
208 border: none;
209 cursor: pointer;
210 font-size: 1rem;
211}
212
213.btn:hover {
214 background: #2980b9;
215}
216
217.btn-primary {
218 width: 100%;
219}
220
221/* ============================================
222 λ°μν νμ΄ν¬κ·ΈλνΌ
223 ============================================ */
224.responsive-heading {
225 /* clamp(μ΅μκ°, μ νΈκ°, μ΅λκ°) */
226 font-size: clamp(1.5rem, 5vw, 3rem);
227 color: var(--dark-color);
228 margin-bottom: 15px;
229}
230
231.responsive-text {
232 font-size: clamp(0.875rem, 2vw, 1.125rem);
233 line-height: 1.8;
234}
235
236code {
237 background: var(--light-color);
238 padding: 2px 6px;
239 border-radius: 3px;
240 font-family: monospace;
241}
242
243/* ============================================
244 λ°μν μ΄λ―Έμ§
245 ============================================ */
246.image-container {
247 text-align: center;
248}
249
250.responsive-image {
251 max-width: 100%;
252 height: auto;
253 border-radius: 8px;
254}
255
256.caption {
257 margin-top: 10px;
258 font-size: 0.875rem;
259 color: #666;
260}
261
262/* ============================================
263 λ°μν ν
μ΄λΈ
264 ============================================ */
265.table-container {
266 overflow-x: auto;
267}
268
269.responsive-table {
270 width: 100%;
271 border-collapse: collapse;
272 min-width: 600px;
273}
274
275.responsive-table th,
276.responsive-table td {
277 padding: 12px;
278 text-align: left;
279 border-bottom: 1px solid #ddd;
280}
281
282.responsive-table th {
283 background: var(--dark-color);
284 color: white;
285}
286
287.responsive-table tbody tr:hover {
288 background: #f5f5f5;
289}
290
291/* λͺ¨λ°μΌ ν
μ΄λΈ μ€νμΌ */
292@media (max-width: 600px) {
293 .responsive-table {
294 min-width: auto;
295 }
296
297 .responsive-table thead {
298 display: none;
299 }
300
301 .responsive-table tbody tr {
302 display: block;
303 margin-bottom: 15px;
304 border: 1px solid #ddd;
305 border-radius: 8px;
306 padding: 10px;
307 }
308
309 .responsive-table td {
310 display: flex;
311 justify-content: space-between;
312 border-bottom: 1px solid #eee;
313 padding: 8px 0;
314 }
315
316 .responsive-table td:last-child {
317 border-bottom: none;
318 }
319
320 .responsive-table td::before {
321 content: attr(data-label);
322 font-weight: bold;
323 color: var(--dark-color);
324 }
325}
326
327/* ============================================
328 λ°μν νΌ
329 ============================================ */
330.responsive-form {
331 max-width: 100%;
332}
333
334.form-row {
335 display: flex;
336 flex-direction: column;
337 gap: var(--spacing-sm);
338}
339
340.form-group {
341 margin-bottom: 15px;
342}
343
344.form-group label {
345 display: block;
346 margin-bottom: 5px;
347 font-weight: bold;
348 color: var(--dark-color);
349}
350
351.form-group input,
352.form-group textarea {
353 width: 100%;
354 padding: 12px;
355 border: 1px solid #ddd;
356 border-radius: 4px;
357 font-size: 1rem;
358}
359
360.form-group input:focus,
361.form-group textarea:focus {
362 outline: none;
363 border-color: var(--primary-color);
364 box-shadow: 0 0 5px rgba(52, 152, 219, 0.3);
365}
366
367/* ============================================
368 μ½λ λΈλ‘
369 ============================================ */
370pre {
371 background: #2c3e50;
372 color: #ecf0f1;
373 padding: 15px;
374 border-radius: 8px;
375 overflow-x: auto;
376 font-size: 0.875rem;
377 line-height: 1.5;
378}
379
380pre code {
381 background: none;
382 padding: 0;
383}
384
385/* ============================================
386 νΈν°
387 ============================================ */
388.footer {
389 background: var(--dark-color);
390 color: white;
391 padding: var(--spacing-md);
392 margin-top: var(--spacing-lg);
393}
394
395.footer-content {
396 display: flex;
397 flex-direction: column;
398 gap: var(--spacing-md);
399}
400
401.footer-section h3 {
402 margin-bottom: 10px;
403 color: var(--primary-color);
404}
405
406.footer-section ul {
407 list-style: none;
408}
409
410.footer-section ul li a {
411 color: #bdc3c7;
412 text-decoration: none;
413}
414
415.footer-section ul li a:hover {
416 color: white;
417}
418
419.social-links {
420 display: flex;
421 gap: 15px;
422 font-size: 1.5rem;
423}
424
425.social-links a {
426 text-decoration: none;
427}
428
429.footer-bottom {
430 margin-top: var(--spacing-md);
431 padding-top: var(--spacing-md);
432 border-top: 1px solid rgba(255,255,255,0.1);
433 text-align: center;
434 color: #7f8c8d;
435}
436
437/* ============================================
438 νλΈλ¦Ώ (576px μ΄μ)
439 ============================================ */
440@media (min-width: 576px) {
441 :root {
442 --spacing-sm: 15px;
443 --spacing-md: 25px;
444 }
445
446 .viewport-indicator .mobile { display: none; }
447 .viewport-indicator .tablet { display: block; }
448
449 .responsive-grid {
450 grid-template-columns: repeat(2, 1fr);
451 }
452
453 .form-row {
454 flex-direction: row;
455 }
456
457 .form-row .form-group {
458 flex: 1;
459 }
460}
461
462/* ============================================
463 μμ λ°μ€ν¬ν (768px μ΄μ)
464 ============================================ */
465@media (min-width: 768px) {
466 .container {
467 max-width: 720px;
468 margin: 0 auto;
469 }
470
471 .menu-toggle {
472 display: none;
473 }
474
475 .nav-links {
476 display: flex;
477 width: auto;
478 flex-direction: row;
479 margin-top: 0;
480 gap: 20px;
481 }
482
483 .nav-links li a {
484 padding: 10px;
485 border-bottom: none;
486 }
487
488 .viewport-indicator .tablet { display: none; }
489 .viewport-indicator .small-desktop { display: block; }
490
491 .responsive-grid {
492 grid-template-columns: repeat(3, 1fr);
493 }
494
495 .card-grid {
496 flex-direction: row;
497 flex-wrap: wrap;
498 }
499
500 .card {
501 flex: 1 1 calc(50% - var(--spacing-md));
502 max-width: calc(50% - var(--spacing-md) / 2);
503 }
504
505 .btn-primary {
506 width: auto;
507 }
508
509 .footer-content {
510 flex-direction: row;
511 justify-content: space-between;
512 }
513
514 .footer-section {
515 flex: 1;
516 }
517}
518
519/* ============================================
520 λ°μ€ν¬ν (992px μ΄μ)
521 ============================================ */
522@media (min-width: 992px) {
523 :root {
524 --spacing-md: 30px;
525 --spacing-lg: 50px;
526 }
527
528 .container {
529 max-width: 960px;
530 }
531
532 h1 {
533 font-size: 2.5rem;
534 }
535
536 .viewport-indicator .small-desktop { display: none; }
537 .viewport-indicator .desktop { display: block; }
538
539 .card {
540 flex: 1 1 calc(33.333% - var(--spacing-md));
541 max-width: calc(33.333% - var(--spacing-md) / 1.5);
542 }
543}
544
545/* ============================================
546 ν° νλ©΄ (1200px μ΄μ)
547 ============================================ */
548@media (min-width: 1200px) {
549 .container {
550 max-width: 1140px;
551 }
552
553 .viewport-indicator .desktop { display: none; }
554 .viewport-indicator .large { display: block; }
555}
556
557/* ============================================
558 μΈμ μ€νμΌ
559 ============================================ */
560@media print {
561 .navbar,
562 .menu-toggle,
563 .footer {
564 display: none;
565 }
566
567 body {
568 background: white;
569 color: black;
570 }
571
572 .section {
573 box-shadow: none;
574 border: 1px solid #ddd;
575 }
576
577 a {
578 color: black;
579 text-decoration: underline;
580 }
581}