1/*
2 * CSS Layout ์์ ์คํ์ผ์ํธ
3 * Flexbox์ Grid ๋ ์ด์์
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
38h3 {
39 color: #34495e;
40 margin: 15px 0 10px;
41}
42
43.section {
44 background: white;
45 padding: 20px;
46 margin-bottom: 30px;
47 border-radius: 8px;
48 box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
49}
50
51code {
52 background-color: #ecf0f1;
53 padding: 2px 6px;
54 border-radius: 3px;
55 font-family: 'Courier New', monospace;
56}
57
58/* ============================================
59 Flexbox ์คํ์ผ
60 ============================================ */
61
62.flex-container {
63 display: flex;
64 background-color: #ecf0f1;
65 padding: 10px;
66 margin-bottom: 15px;
67 min-height: 60px;
68}
69
70.flex-item {
71 background-color: #3498db;
72 color: white;
73 padding: 15px 20px;
74 margin: 5px;
75 text-align: center;
76 border-radius: 4px;
77}
78
79/* flex-direction */
80.direction-row { flex-direction: row; }
81.direction-row-reverse { flex-direction: row-reverse; }
82.direction-column { flex-direction: column; }
83.direction-column-reverse { flex-direction: column-reverse; }
84
85/* justify-content */
86.justify-start { justify-content: flex-start; }
87.justify-end { justify-content: flex-end; }
88.justify-center { justify-content: center; }
89.justify-between { justify-content: space-between; }
90.justify-around { justify-content: space-around; }
91.justify-evenly { justify-content: space-evenly; }
92
93/* align-items */
94.align-stretch { align-items: stretch; }
95.align-stretch .flex-item { height: auto; }
96.align-start { align-items: flex-start; }
97.align-end { align-items: flex-end; }
98.align-center { align-items: center; }
99.align-baseline { align-items: baseline; }
100
101/* flex-wrap */
102.wrap-nowrap { flex-wrap: nowrap; }
103.wrap-wrap { flex-wrap: wrap; }
104.wrap-reverse { flex-wrap: wrap-reverse; }
105.flex-item.wide { min-width: 150px; }
106
107/* ์์ ์ค์ ์ ๋ ฌ */
108.center-perfect {
109 justify-content: center;
110 align-items: center;
111 background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
112}
113
114.center-perfect .flex-item {
115 font-size: 1.5em;
116 font-weight: bold;
117}
118
119/* ๋ค๋น๊ฒ์ด์
๋ฐ */
120.navbar {
121 display: flex;
122 justify-content: space-between;
123 align-items: center;
124 background-color: #2c3e50;
125 padding: 15px 20px;
126 border-radius: 4px;
127}
128
129.logo {
130 color: white;
131 font-size: 1.5em;
132 font-weight: bold;
133}
134
135.nav-links {
136 display: flex;
137 list-style: none;
138 gap: 20px;
139}
140
141.nav-links a {
142 color: #ecf0f1;
143 text-decoration: none;
144 padding: 8px 15px;
145 border-radius: 4px;
146 transition: background-color 0.3s;
147}
148
149.nav-links a:hover {
150 background-color: #34495e;
151}
152
153/* ์นด๋ ๋ ์ด์์ */
154.card-container {
155 display: flex;
156 gap: 20px;
157 flex-wrap: wrap;
158}
159
160.card {
161 flex: 1;
162 min-width: 200px;
163 display: flex;
164 flex-direction: column;
165 background: white;
166 border-radius: 8px;
167 box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
168 overflow: hidden;
169}
170
171.card-header {
172 background-color: #3498db;
173 color: white;
174 padding: 15px;
175 font-weight: bold;
176}
177
178.card-body {
179 flex: 1;
180 padding: 15px;
181}
182
183.card-footer {
184 padding: 15px;
185 background-color: #f8f9fa;
186 border-top: 1px solid #ecf0f1;
187}
188
189.card-footer button {
190 width: 100%;
191 padding: 8px;
192 background-color: #3498db;
193 color: white;
194 border: none;
195 border-radius: 4px;
196 cursor: pointer;
197}
198
199.card-footer button:hover {
200 background-color: #2980b9;
201}
202
203/* ============================================
204 Grid ์คํ์ผ
205 ============================================ */
206
207.grid-container {
208 display: grid;
209 background-color: #ecf0f1;
210 padding: 10px;
211 margin-bottom: 15px;
212}
213
214.grid-item {
215 background-color: #9b59b6;
216 color: white;
217 padding: 20px;
218 text-align: center;
219 border-radius: 4px;
220}
221
222.grid-item.small {
223 padding: 10px;
224 width: 80px;
225 height: 60px;
226}
227
228/* ๊ธฐ๋ณธ Grid */
229.basic-grid {
230 grid-template-columns: repeat(3, 1fr);
231 gap: 10px;
232}
233
234/* grid-template-columns */
235.columns-fixed {
236 grid-template-columns: 100px 200px 100px;
237 gap: 10px;
238}
239
240.columns-fr {
241 grid-template-columns: 1fr 2fr 1fr;
242 gap: 10px;
243}
244
245.columns-repeat {
246 grid-template-columns: repeat(4, 1fr);
247 gap: 10px;
248}
249
250.columns-minmax {
251 grid-template-columns: repeat(3, minmax(100px, 1fr));
252 gap: 10px;
253}
254
255.columns-auto-fill {
256 grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
257 gap: 10px;
258}
259
260.columns-auto-fit {
261 grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
262 gap: 10px;
263}
264
265/* grid-template-rows */
266.rows-example {
267 grid-template-columns: 1fr;
268 grid-template-rows: 100px 200px 100px;
269 gap: 10px;
270}
271
272/* gap */
273.gap-example {
274 grid-template-columns: repeat(2, 1fr);
275 gap: 20px;
276}
277
278.gap-separate {
279 grid-template-columns: repeat(2, 1fr);
280 row-gap: 30px;
281 column-gap: 10px;
282}
283
284/* ์์ดํ
๋ฐฐ์น */
285.placement-example {
286 grid-template-columns: repeat(3, 1fr);
287 grid-template-rows: repeat(4, 80px);
288 gap: 10px;
289}
290
291.span-col-2 { grid-column: 1 / 3; }
292.span-row-2 { grid-row: 2 / 4; }
293.span-both {
294 grid-column: 2 / 4;
295 grid-row: 3 / 5;
296}
297
298/* grid-template-areas */
299.areas-example {
300 grid-template-areas:
301 "header header header"
302 "sidebar main main"
303 "footer footer footer";
304 grid-template-columns: 200px 1fr 1fr;
305 grid-template-rows: 60px 200px 60px;
306 gap: 10px;
307}
308
309.area-header { grid-area: header; background-color: #e74c3c; }
310.area-sidebar { grid-area: sidebar; background-color: #f39c12; }
311.area-main { grid-area: main; background-color: #27ae60; }
312.area-footer { grid-area: footer; background-color: #3498db; }
313
314/* justify-items, align-items */
315.items-center {
316 grid-template-columns: repeat(2, 1fr);
317 grid-template-rows: repeat(2, 100px);
318 gap: 10px;
319 justify-items: center;
320 align-items: center;
321}
322
323.items-stretch {
324 grid-template-columns: repeat(2, 1fr);
325 grid-template-rows: repeat(2, 100px);
326 gap: 10px;
327}
328
329/* justify-content, align-content */
330.content-center {
331 grid-template-columns: repeat(2, 100px);
332 grid-template-rows: repeat(2, 80px);
333 gap: 10px;
334 height: 250px;
335 justify-content: center;
336 align-content: center;
337}
338
339/* justify-self, align-self */
340.self-example {
341 grid-template-columns: repeat(3, 1fr);
342 grid-template-rows: repeat(2, 100px);
343 gap: 10px;
344}
345
346/* ๊ฐค๋ฌ๋ฆฌ */
347.gallery {
348 display: grid;
349 grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
350 grid-auto-rows: 150px;
351 gap: 10px;
352}
353
354.gallery-item {
355 background-color: #1abc9c;
356 color: white;
357 display: flex;
358 justify-content: center;
359 align-items: center;
360 border-radius: 8px;
361 font-weight: bold;
362}
363
364.gallery-item.large {
365 grid-column: span 2;
366 grid-row: span 2;
367}
368
369.gallery-item.tall {
370 grid-row: span 2;
371}
372
373.gallery-item.wide {
374 grid-column: span 2;
375}
376
377/* ๋์๋ณด๋ */
378.dashboard {
379 display: grid;
380 grid-template-areas:
381 "header header header"
382 "nav main aside"
383 "footer footer footer";
384 grid-template-columns: 150px 1fr 200px;
385 grid-template-rows: 60px 1fr 50px;
386 gap: 10px;
387 min-height: 400px;
388}
389
390.dash-header {
391 grid-area: header;
392 background-color: #2c3e50;
393 color: white;
394 display: flex;
395 align-items: center;
396 padding: 0 20px;
397}
398
399.dash-nav {
400 grid-area: nav;
401 background-color: #34495e;
402 color: white;
403 padding: 15px;
404}
405
406.dash-main {
407 grid-area: main;
408 background-color: #ecf0f1;
409 padding: 15px;
410 display: grid;
411 grid-template-columns: repeat(2, 1fr);
412 gap: 10px;
413}
414
415.widget {
416 background-color: white;
417 padding: 15px;
418 border-radius: 8px;
419 box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
420}
421
422.wide-widget {
423 grid-column: span 2;
424}
425
426.dash-aside {
427 grid-area: aside;
428 background-color: #bdc3c7;
429 padding: 15px;
430}
431
432.dash-footer {
433 grid-area: footer;
434 background-color: #7f8c8d;
435 color: white;
436 display: flex;
437 align-items: center;
438 justify-content: center;
439}
440
441/* ๋ฐ์ํ Grid */
442.responsive-grid {
443 grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
444 gap: 15px;
445}
446
447/* ============================================
448 ํธํฐ
449 ============================================ */
450
451footer {
452 text-align: center;
453 padding: 20px;
454 color: #7f8c8d;
455 border-top: 1px solid #ecf0f1;
456 margin-top: 30px;
457}
458
459footer a {
460 color: #3498db;
461 text-decoration: none;
462}
463
464footer a:hover {
465 text-decoration: underline;
466}