-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
196 lines (180 loc) · 5.46 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
/* 이서윤체 폰트 로드 */
@font-face {
font-family: "iseoyoon";
src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/[email protected]/LeeSeoyun.woff")
format("woff");
font-weight: normal;
font-style: normal;
}
body {
font-family: "iseoyoon";
display: flex;
justify-content: center;
margin: 0;
background-image: url("./background.png");
}
.container {
width: 390px;
background-color: #ff9d73;
height: 100%;
}
.photos {
margin-top: 30px;
}
.photo-frame {
background-color: white;
margin: 15px 20px;
height: 200px;
background-size: cover;
position: relative;
cursor: pointer;
}
.footer {
display: flex;
flex-direction: column;
align-items: center;
}
.f-title {
color: white;
font-size: 25px;
font-weight: 900;
}
.f-date {
color: white;
font-size: 15px;
font-weight: 500;
}
#image1 {
background-image: url("img1.png");
}
#image2 {
background-image: url("img2.png");
}
#image3 {
background-image: url("img3.png");
}
#image4 {
background-image: url("img4.png");
}
.photo-discription {
background-color: black;
color: white;
padding: 0 20px;
width: fit-content;
border-radius: 10px;
margin-bottom: 10px;
position: absolute;
bottom: 0;
transform: translate(-50%);
left: 50%;
opacity: 0;
}
.video {
height: 100%;
width: 100%;
}
.showText {
opacity: 1;
transition: opacity 0.5s linear;
}
.hideText {
opacity: 0;
}
</style>
<script>
// 텍스트가 보여지는 기능
// 1. 몇 번째 사진에 마우스가 올라갔는지 확인(if문)
// 2. 해당 사진을 찾아 hideText class를 지워주고, showText는 삽입해줌
function showText(number) {
if (number === 1) {
document.querySelector("#desc1").classList.remove("hideText");
document.querySelector("#desc1").classList.add("showText");
} else if (number === 2) {
document.querySelector("#desc2").classList.remove("hideText");
document.querySelector("#desc2").classList.add("showText");
} else {
document.querySelector("#desc3").classList.remove("hideText");
document.querySelector("#desc3").classList.add("showText");
}
}
// 텍스트가 감춰지는 기능
// 1. 몇 번째 사진에서 마우스가 벗어났는지 확인(if문)
// 2. 해당 사진을 찾아 shotText class를 지워주고, hideText는 삽입해줌
function hideText(number) {
if (number === 1) {
document.querySelector("#desc1").classList.remove("showText");
document.querySelector("#desc1").classList.add("hideText");
} else if (number === 2) {
document.querySelector("#desc2").classList.remove("showText");
document.querySelector("#desc2").classList.add("hideText");
} else {
document.querySelector("#desc3").classList.remove("showText");
document.querySelector("#desc3").classList.add("hideText");
}
}
// 클릭 기능
// 1. 선택된 사진의 숫자를 가진 텍스트를 alert 형태로 출력해줌
function alertText(number) {
alert(`${number}번째 추억이에요! 눌러주셔서 감사합니다 :)`);
}
</script>
</head>
<body>
<div class="container">
<div class="photos">
<div
id="image1"
class="photo-frame"
onmouseover="showText(1)"
onmouseout="hideText(1)"
onclick="alertText(1)"
>
<span id="desc1" class="photo-discription">
우리 작년 1월에 동해갔을 때 :)
</span>
</div>
<div
id="image2"
class="photo-frame"
onmouseover="showText(2)"
onmouseout="hideText(2)"
onclick="alertText(2)"
>
<span id="desc2" class="photo-discription">
작년 할로윈 파티 때
</span>
</div>
<div
id="image3"
class="photo-frame"
onmouseover="showText(3)"
onmouseout="hideText(3)"
onclick="alertText(3)"
>
<span id="desc3" class="photo-discription">
친구와 싸웠을 때 위로해준 너
</span>
</div>
<div class="photo-frame">
<iframe
src="https://www.youtube.com/embed/TWz1btekxfs"
frameborder="0"
class="video"
></iframe>
</div>
</div>
<div class="footer">
<p class="f-title">Happy Lunch Time</p>
<p class="f-date">2023.04.15</p>
</div>
</div>
</body>
</html>