SonGam/HTML_W12

1:root {
2  --main-color: #4a90e2;
3  --hover-color: #2c3e50;
4  --font-family: 'Noto Sans KR', sans-serif;
5  --card-bg: #ffffff;
6}
7
8body {
9  font-family: var(--font-family);
10  margin: 0;
11  padding: 0;
12  background-color: #f4f4f4;
13  color: #333;
14}
15
16header, footer {
17  background-color: var(--main-color);
18  color: white;
19  text-align: center;
20  padding: 20px;
21}
22
23nav a {
24  color: white;
25  margin: 0 10px;
26  text-decoration: none;
27  font-weight: bold;
28}
29
30.card-container {
31  display: grid;
32  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
33  gap: 20px;
34  padding: 40px;
35}
36
37.card {
38  background-color: var(--card-bg);
39  padding: 20px;
40  border-radius: 12px;
41  border: 1px solid #ccc;
42  text-align: center;
43  animation: fadeIn 1s ease forwards;
44  opacity: 0;
45  transition: transform 0.3s ease;
46}
47
48.card:hover {
49  transform: scale(1.05);
50}
51
52@keyframes fadeIn {
53  to {
54    opacity: 1;
55  }
56}
57
58.form-box {
59  max-width: 600px;
60  margin: 0 auto 50px;
61  padding: 0 20px;
62}
63
64.card img {
65  width: 100%;
66  height: 180px;
67  object-fit: cover;
68  border-radius: 8px;
69  margin-bottom: 12px;
70}
71
72input, textarea {
73  width: 100%;
74  padding: 12px;
75  margin-bottom: 12px;
76  border: 1px solid #ccc;
77  border-radius: 8px;
78  font-size: 16px;
79}
80
81input:focus, textarea:focus {
82  outline: 2px solid var(--main-color);
83}
84
85button {
86  background-color: var(--main-color);
87  color: white;
88  padding: 12px 20px;
89  border: none;
90  border-radius: 8px;
91  font-size: 16px;
92  cursor: pointer;
93  transition: transform 0.3s ease;
94}
95
96button:hover {
97  transform: scale(1.1);
98  background-color: var(--hover-color);
99}
100
101footer {
102  font-size: 14px;
103}
104
105/* 추가 애니메이션 */
106@keyframes fadeIn {
107  0% {
108    opacity: 0;
109    transform: translateY(20px);
110  }
111  100% {
112    opacity: 1;
113    transform: translateY(0);
114  }
115}
116
117@keyframes slideUp {
118  0% {
119    opacity: 0;
120    transform: translateY(40px);
121  }
122  100% {
123    opacity: 1;
124    transform: translateY(0);
125  }
126}
127
128@keyframes zoomIn {
129  0% {
130    opacity: 0;
131    transform: scale(0.9);
132  }
133  100% {
134    opacity: 1;
135    transform: scale(1);
136  }
137}
138
139/* 적용 대상 스타일 */
140.form-box {
141  animation: fadeIn 1s ease forwards;
142}
143
144.form-box h2 {
145  animation: zoomIn 0.8s ease forwards;
146}
147
148.form-box p {
149  animation: zoomIn 1s ease forwards;
150}
151
152.form-box ul li {
153  opacity: 0;
154  animation: slideUp 0.6s ease forwards;
155  animation-delay: 0.2s;
156}
157
158.form-box ul li:nth-child(2) {
159  animation-delay: 0.4s;
160}
161
162.form-box ul li:nth-child(3) {
163  animation-delay: 0.6s;
164}
165
166/* 반응형 */
167@media (max-width: 1023px) {
168  .card-container {
169    grid-template-columns: repeat(2, 1fr);
170  }
171}
172
173@media (max-width: 767px) {
174  .card-container {
175    grid-template-columns: 1fr;
176  }
177}