-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
232 lines (219 loc) · 8.63 KB
/
index.html
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
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>이탈리아 문화 탐험</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<div class="container">
<!-- 시작 화면 -->
<div class="start-screen" id="startScreen">
<img src="img/italy-flag.png" alt="이탈리아 로고" class="logo" />
<h1>이탈리아 문화 탐험</h1>
<p>이탈리아의 멋진 문화를 함께 알아보아요!</p>
<button class="button" onclick="startExploration()">시작하기</button>
<p id="copyright">-</p>
<p id="copyright">2모둠 - 김서진, 이준서, 오승주</p>
</div>
<!-- 슬라이드 1: 카니발 -->
<div class="slide" id="carnival">
<h2>카니발이란?</h2>
<div class="image-container">
<img src="img/carnival.jpeg" alt="베네치아 카니발" />
</div>
<p>
카니발은 아주 오래전부터 시작된 신나는 축제예요. 옛날 사람들은 특별한
기간 동안 맛있는 음식을 먹지 않고 기도를 해야 했어요. 그래서 그 기간이
시작되기 전에 맛있는 음식도 실컷 먹고 신나게 놀면서 축제를 즐겼답니다.
</p>
<div class="navigation">
<button class="button prev-button" onclick="prevSlide()">
← 이전
</button>
<button class="button next-button" onclick="nextSlide()">
다음 →
</button>
</div>
</div>
<!-- 슬라이드 2: 베네치아 가면 -->
<div class="slide">
<h2>베네치아의 특별한 가면</h2>
<div class="image-container">
<img src="img/venice-mask.jpeg" alt="베네치아 가면" />
</div>
<p>
베네치아라는 예쁜 도시에서는 축제 때 모든 사람들이 예쁜 가면을 써요.
처음에는 가죽이나 도자기로 간단하게 만들었지만, 지금은 반짝이는 금색과
예쁜 깃털, 보석으로 꾸며서 아주 멋지게 만든답니다.
</p>
<div class="navigation">
<button class="button prev-button" onclick="prevSlide()">
← 이전
</button>
<button class="button next-button" onclick="nextSlide()">
다음 →
</button>
</div>
</div>
<!-- 슬라이드 3: 과자 -->
<div class="slide">
<h2>맛있는 과자</h2>
<div class="food-section">
<div class="food-item">
<img src="img/macaron.jpeg" alt="마카롱" />
<h3>마카롱</h3>
<p>동그랗고 알록달록한 마카롱</p>
</div>
<div class="food-item">
<img src="img/nunettine.jpeg" alt="누네띠네" />
<h3>누네띠네</h3>
<p>바삭하고 달콤한 누네띠네</p>
</div>
</div>
<div class="navigation">
<button class="button prev-button" onclick="prevSlide()">
← 이전
</button>
<button class="button next-button" onclick="nextSlide()">
다음 →
</button>
</div>
</div>
<!-- 파스타 슬라이드 -->
<div class="slide" id="pasta-slide">
<h2>파스타</h2>
<div class="image-container pasta-image">
<img
src="img/pasta.jpeg"
alt="이탈리아 파스타"
style="aspect-ratio: 3/2; object-fit: cover"
/>
</div>
<p>
긴 국수처럼 생긴 스파게티가 가장 유명해요. 납작하거나 동그란 모양 등
여러 가지 모양의 파스타가 있어서 골라 먹는 재미가 있답니다.
</p>
<div class="navigation">
<button class="button prev-button" onclick="prevSlide()">
← 이전
</button>
<button class="button next-button" onclick="nextSlide()">
다음 →
</button>
</div>
</div>
<!-- 피자 슬라이드 -->
<div class="slide pizza-slide">
<h2>피자</h2>
<div class="image-container pizza-image">
<img src="img/pizza.jpeg" alt="이탈리아 피자" />
</div>
<p>
이탈리아는 피자의 고향이에요! 토마토 소스와 치즈, 바질 잎을 올린
마르게리따 피자가 가장 유명하답니다. 다양한 재료를 올려서 만드는 여러
종류의 피자가 있어요.
</p>
<div class="navigation">
<button class="button prev-button" onclick="prevSlide()">
← 이전
</button>
<button class="button next-button" onclick="nextSlide()">
다음 →
</button>
</div>
</div>
<!-- 트룰리(특별한 집) 슬라이드 -->
<div class="slide" id="trulli-slide">
<h2>특별한 집</h2>
<div class="image-container">
<img
src="img/trulli.jpeg"
alt="트룰리 집"
style="width: 100%; height: 300px; object-fit: cover"
/>
</div>
<p>
이탈리아 알베로벨로라는 마을에는 '트룰리'라는 독특한 집들이 있어요.
동그란 벽에 뾰족한 지붕이 있는 모양이 마치 동화 속 집처럼 예쁘답니다.
</p>
<div class="navigation">
<button class="button prev-button" onclick="prevSlide()">
← 이전
</button>
<button class="button next-button" onclick="nextSlide()">
다음 →
</button>
</div>
</div>
<!-- 슬라이드 7: 집 꾸미기 -->
<div class="slide">
<h2>집 꾸미기</h2>
<div class="image-container">
<img src="img/italian-home.jpeg" alt="이탈리아 집 인테리어" />
</div>
<p>
이탈리아 사람들은 집을 예쁘게 꾸미는 것을 좋아해요. 북쪽 지역 사람들은
우아하게, 남쪽 지역 사람들은 밝고 화려하게 집을 꾸민답니다.
</p>
<div class="navigation">
<button class="button prev-button" onclick="prevSlide()">
← 이전
</button>
<button class="button next-button" onclick="nextSlide()">
퀴즈 시작
</button>
</div>
</div>
<!-- 퀴즈 섹션 -->
<div class="quiz" id="quiz">
<h2>재미있는 O/X 퀴즈</h2>
<div class="quiz-question">
<p>1. 카니발은 사순절 전에 열리는 축제인가요?</p>
<div class="quiz-options">
<button class="button" onclick="checkAnswer(1, true)">O</button>
<button class="button" onclick="checkAnswer(1, false)">X</button>
</div>
<p id="answer1" class="answer-feedback"></p>
</div>
<div class="quiz-question">
<p>2. 트룰리는 이탈리아의 전통 음식인가요?</p>
<div class="quiz-options">
<button class="button" onclick="checkAnswer(2, true)">O</button>
<button class="button" onclick="checkAnswer(2, false)">X</button>
</div>
<p id="answer2" class="answer-feedback"></p>
</div>
<div class="quiz-question">
<p>3. 마르게리따 피자는 이탈리아에서 시작되었나요?</p>
<div class="quiz-options">
<button class="button" onclick="checkAnswer(3, true)">O</button>
<button class="button" onclick="checkAnswer(3, false)">X</button>
</div>
<p id="answer3" class="answer-feedback"></p>
</div>
<div class="quiz-question">
<p>4. 베네치아 카니발에서는 가면을 쓰나요?</p>
<div class="quiz-options">
<button class="button" onclick="checkAnswer(4, true)">O</button>
<button class="button" onclick="checkAnswer(4, false)">X</button>
</div>
<p id="answer4" class="answer-feedback"></p>
</div>
<div class="quiz-question">
<p>5. 파스타는 중국에서 시작되었나요?</p>
<div class="quiz-options">
<button class="button" onclick="checkAnswer(5, true)">O</button>
<button class="button" onclick="checkAnswer(5, false)">X</button>
</div>
<p id="answer5" class="answer-feedback"></p>
</div>
<button class="button home-button" onclick="goHome()">
홈으로 가기
</button>
</div>
</div>
<script src="script.js"></script>
</body>
</html>