-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
186 lines (143 loc) · 4.82 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
<!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>나의 추억거리를 공유합니다</title>
<meta property="og:title" content="코알라 님의 추억사진"/>
<meta property="og:description" content="내가 만든 첫번째 웹페이지!"/>
<meta property="og:image" content="image.jpg"/>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Nanum+Gothic:wght@400;800&display=swap" rel="stylesheet">
<style>
*{
font-family: 'Nanum Gothic', sans-serif;
}
.mytitle{
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
margin-top: 30px;
}
.btn{
width: 300px;
height: 40px;
border: 2px solid #e8344e;
text-decoration: none;
text-align: center;
line-height: 40px;
color: #e8344e;
font-weight: bold;
border-radius: 40px;
}
.btn:hover{
background-color: #e8344e;
color: white;
}
.box{
width: 1000px;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
margin: 40px auto 0px auto;
}
.map{
width: 500px;
height:500px;
margin-right: 30px;
border-radius: 24px;
}
.story{
width: 450px;
height:500px;
}
.img{
width: 450;
height: 300px;
background-image: url('image.jpg');
background-position: center;
background-size: cover;
border-radius: 24px;
}
.story > h2{
margin: 20px 0px 0px 0px;
color: darkred;
}
.story > h3{
margin: 5px 0px 0px 0px;
font-size: 16px;
color: darkgray;
font-weight: normal;
}
.story > p{
line-height: 24px;
}
@media screen and (max-width: 640px) {
h1{
font-size: 26px;
}
.box{
flex-direction: column;
width: 100%;
}
.map{
width: 100%;
height: 200px;
margin: 0;
}
.story{
width: 100%;
height: auto;
margin-top: 10px;
margin-bottom: 10px;
}
.img{
width: 100%;
height: 200px;
}
}
</style>
</head>
<body>
<div class="mytitle">
<h1>나의 추억거리를 공유합니다</h1>
<a class="btn" href="http://spartacodingclub.shop/free/202105/exhibition" target="_blank">모든 수강생들의 추억 보러가기 ></a>
</div>
<div class="box">
<div class="map" id="map">
</div>
<div class="story">
<div class="img"></div>
<h2>스타벅스 제주시청점</h2>
<h3>제주 제주시 중앙로 215</h3>
<p>친구랑 커피를 마셨다.
커피를 마셨더니 배가 너무 불렀다.
점심을 먹은 뒤에는 작은 음료를 마셔야겠다.</p>
</div>
</div>
<!-- 여기서부터 지도 코드입니다 -->
<script type="text/javascript" src="https://dapi.kakao.com/v2/maps/sdk.js?appkey=535068688f1a8bca1c21a9445ede0a89"></script>
<script>
var markerPosition = new kakao.maps.LatLng(33.500685465347935, 126.52966788266464)
var mapContainer = document.getElementById('map'), // 지도를 표시할 div
mapOption = {
center: markerPosition, // 지도의 중심좌표
level: 3 // 지도의 확대 레벨
};
var map = new kakao.maps.Map(mapContainer, mapOption); // 지도를 생성합니다
var imageSrc = "https://s3.ap-northeast-2.amazonaws.com/materials.spartacodingclub.kr/2021_05_free_parents/sparta-marker.png";
var imageSize = new kakao.maps.Size(65, 86);
var markerImage = new kakao.maps.MarkerImage(imageSrc, imageSize);
var marker = new kakao.maps.Marker({
map: map,
position: markerPosition,
image : markerImage
});
</script>
<!-- 여기까지 지도 코드 입니다 -->
</body>
</html>