-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathhanat-02.html
168 lines (164 loc) · 4.95 KB
/
hanat-02.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="./css/style.css" />
</head>
<body style="height: 100vh">
<audio
autoplay
loop
src="background-sound.mp3"
id="background-sound"
></audio>
<div class="container">
<!-- 바로 아랫줄은 나한테 필요 없는데 @장규은 한테 필요할 거 같아서 우선 넣어놨어. 어차피 display:none이라 -->
<button id="open-modal" style="display: none"></button>
<button id="open-modal-multi" style="display: none"></button>
<div class="cards-wrapper">
<img
src="./img/component/cardBack.jpg"
alt=""
class="card-shuffle"
id="0"
/>
<img
src="./img/component/cardBack.jpg"
alt=""
class="card-shuffle"
id="1"
/><img
src="./img/component/cardBack.jpg"
alt=""
class="card-shuffle"
id="2"
/><img
src="./img/component/cardBack.jpg"
alt=""
class="card-shuffle"
id="3"
/><img
src="./img/component/cardBack.jpg"
alt=""
class="card-shuffle"
id="4"
/><img
src="./img/component/cardBack.jpg"
alt=""
class="card-shuffle"
id="5"
/><img
src="./img/component/cardBack.jpg"
alt=""
class="card-shuffle"
id="6"
/><img
src="./img/component/cardBack.jpg"
alt=""
class="card-shuffle"
id="7"
/><img
src="./img/component/cardBack.jpg"
alt=""
class="card-shuffle"
id="8"
/><img
src="./img/component/cardBack.jpg"
alt=""
class="card-shuffle"
id="9"
/><img
src="./img/component/cardBack.jpg"
alt=""
class="card-shuffle"
id="10"
/><img
src="./img/component/cardBack.jpg"
alt=""
class="card-shuffle"
id="11"
/><img
src="./img/component/cardBack.jpg"
alt=""
class="card-shuffle"
id="12"
/><img
src="./img/component/cardBack.jpg"
alt=""
class="card-shuffle"
id="13"
/><img
src="./img/component/cardBack.jpg"
alt=""
class="card-shuffle"
id="14"
/><img
src="./img/component/cardBack.jpg"
alt=""
class="card-shuffle"
id="15"
/><img
src="./img/component/cardBack.jpg"
alt=""
class="card-shuffle"
id="16"
/><img
src="./img/component/cardBack.jpg"
alt=""
class="card-shuffle"
id="17"
/><img
src="./img/component/cardBack.jpg"
alt=""
class="card-shuffle"
id="18"
/><img
src="./img/component/cardBack.jpg"
alt=""
class="card-shuffle"
id="19"
/><img
src="./img/component/cardBack.jpg"
alt=""
class="card-shuffle"
id="20"
/><img
src="./img/component/cardBack.jpg"
alt=""
class="card-shuffle"
id="21"
/>
</div>
<!-- 모달을 띄우기 위한 빈 div -->
<div id="modal" class="modal"></div>
</div>
</body>
<script></script>
<!-- jquery 사용 선언 -->
<script
src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"
integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ=="
crossorigin="anonymous"
referrerpolicy="no-referrer"
></script>
<script src="/js/app.js"></script>
<script src="/js/card.js"></script>
<script src="/js/modal.js"></script>
<script src="js/hanat-02.js"></script>
<script type="text/javascript">
// 페이지 로딩 이후, 2초 이내에 띄울 메시지 목록
// case 1) 띄울 메시지가 없는 경우
// var messages = [];
// case 2) 띄울 메시지가 있는 경우
// var messages = [
// '메시지 1', '메시지 2'
// ];
// @양진안: 형님은 이 부분만 수정하시면 될 거 같습니다!
// @이채진: 짱진이도 맨 처음에 메시지 띄울 때 이거 사용하면 될 거 같아용
// @장규은: 규은이도 짱진이랑 마찬가지로 맨 처음 메시지 띄울 때 이거 사용하면 될 거 같아용
// 다음 페이지 이동 버튼을 눌렀을 때, 다음 페이지로 이동 할 수 있도록 하는 이벤트
// 본인의 상황에 맞춰서 다음 페이지로 넘어가야 할 경우, 결론적으로는 loadNextContent 함수에 이동하고자 하는 html 파일명을 인자로 넘겨주면 됨
</script>
</html>