-
Notifications
You must be signed in to change notification settings - Fork 0
/
tcDetail.html
220 lines (217 loc) · 16.5 KB
/
tcDetail.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
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="theme-color" content="#394685">
<meta name="color-scheme" content="light dark">
<meta name="title" content="서울미래유산">
<meta name="description" content="미래로 흘려보낼 오늘의 유산, 시민이 만들어가는 서울미래유산입니다.">
<meta name="keywords" content="여행, 서울, 미래유산, 서울미래유산, dugod, tjdnf, alfodbtks, tjdnfalfodbtks">
<meta property="og:site_name" content="서울미래유산">
<meta property="og:title" content="서울미래유산">
<meta property="og:description" content="미래로 흘려보낼 오늘의 유산, 시민이 만들어가는 서울미래유산입니다.">
<link rel="canonical" href="https://deacct.github.io/seoulFutureHeritage/">
<link rel="icon" type="image/png" sizes="32x32" href="img/icon-32.png">
<link rel="icon" type="image/png" sizes="512x512" href="img/icon-512.png">
<link rel="apple-touch-icon" sizes="192x192" href="img/apple-touch-icon-192.png">
<link href="css/reset.css" rel="stylesheet">
<link href="css/main.css" rel="stylesheet">
<link href="css/sub.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;500;900&display=swap" rel="stylesheet">
<link rel="manifest" href="manifest.json">
<script src="js/anime.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.6.1/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.6.1/ScrollTrigger.min.js"></script>
<script src="//dapi.kakao.com/v2/maps/sdk.js?appkey=1c7ca61130bc645630fae3d809b0af8f&libraries=services"></script>
<script src="js/main.js" defer></script>
<script src="js/sub.js" defer></script>
<title>서울미래유산</title>
</head>
<body class="tcDetail">
<div class="wrapper">
<header>
<div class="headerInner">
<h1>
<a href="index.html">
서울미래유산
<svg>
<path d="M22.28,19.7a8.77,8.77,0,0,1-.75-2.65,22.77,22.77,0,0,1-.19-2.94V1.78H10.94V14.11a22.81,22.81,0,0,1-.2,2.94A8.77,8.77,0,0,1,10,19.7q-1.83,4.07-4.28,8.44A78.64,78.64,0,0,1,0,36.88l7.18,5.55Q9.7,39.25,12,35.82c1.52-2.3,2.9-4.5,4.16-6.61Q18,32.38,20.2,35.74c1.48,2.25,3.08,4.42,4.8,6.54l6.73-5.84a87,87,0,0,1-5.37-8.54Q24.11,23.76,22.28,19.7Z" transform="translate(0 0)"/>
<polygon points="33.96 12.72 25.84 12.72 25.84 21.88 33.96 21.88 33.96 45 43.66 45 43.66 1.29 33.96 1.29 33.96 12.72"/>
<polygon points="48.81 22.97 65.1 22.97 65.1 25.25 51.09 25.25 51.09 30.99 80.5 30.99 80.5 32.48 51.09 32.48 51.09 45 90.69 45 90.69 39.06 60.79 39.06 60.79 37.52 90.2 37.52 90.2 25.25 76.19 25.25 76.19 22.97 92.47 22.97 92.47 16.83 48.81 16.83 48.81 22.97"/><path class="cls-1" d="M52.72,13a11.36,11.36,0,0,0,7.08,2H81.48a11.36,11.36,0,0,0,7.08-2,6.55,6.55,0,0,0,2.63-5.52A6.58,6.58,0,0,0,88.56,2a11.42,11.42,0,0,0-7.08-2H59.8a11.42,11.42,0,0,0-7.08,2A6.57,6.57,0,0,0,50.1,7.52,6.54,6.54,0,0,0,52.72,13Zm7.55-6.51a1.94,1.94,0,0,1,1.26-.39H79.75A1.9,1.9,0,0,1,81,6.53a1.24,1.24,0,0,1,.47,1,1.21,1.21,0,0,1-.47,1,1.85,1.85,0,0,1-1.26.4H61.53a1.89,1.89,0,0,1-1.26-.4,1.24,1.24,0,0,1-.47-1A1.27,1.27,0,0,1,60.27,6.53Z" transform="translate(0 0)"/><path class="cls-1" d="M105.8,40.46h13.61V20.83H105.8Zm3-17h7.57V37.79h-7.57Z" transform="translate(0 0)"/><rect class="cls-1" x="124.5" y="19.55" width="3.03" height="25.45"/><polygon class="cls-1" points="152.28 28.97 148.79 28.97 148.79 19.84 145.8 19.84 145.8 44.24 148.79 44.24 148.79 31.7 152.28 31.7 152.28 44.97 155.31 44.97 155.31 19.55 152.28 19.55 152.28 28.97"/><polygon class="cls-1" points="135.12 31.7 143.12 31.7 143.12 20.65 132.09 20.65 132.09 23.33 140.12 23.33 140.12 29.09 132.12 29.09 132.12 40.75 144.05 40.75 144.05 38.08 135.12 38.08 135.12 31.7"/><path class="cls-1" d="M163.45,31.41a7.06,7.06,0,0,0,2.56.44h8.56a7.06,7.06,0,0,0,2.56-.44,5.65,5.65,0,0,0,2-1.25,5.75,5.75,0,0,0,1.33-1.92,6.11,6.11,0,0,0,.48-2.47,6.2,6.2,0,0,0-.48-2.46,5.79,5.79,0,0,0-3.33-3.18,7.28,7.28,0,0,0-2.56-.44H166a7.28,7.28,0,0,0-2.56.44,5.79,5.79,0,0,0-3.33,3.18,6.2,6.2,0,0,0-.48,2.46,6.11,6.11,0,0,0,.48,2.47,5.75,5.75,0,0,0,1.33,1.92A5.65,5.65,0,0,0,163.45,31.41Zm.19-8.13a3.57,3.57,0,0,1,2.55-.91h8.2a3.57,3.57,0,0,1,2.55.91,3.25,3.25,0,0,1,1,2.49,3.25,3.25,0,0,1-1,2.49,3.57,3.57,0,0,1-2.55.91h-8.2a3.57,3.57,0,0,1-2.55-.91,3.25,3.25,0,0,1-1-2.49A3.25,3.25,0,0,1,163.64,23.28Z" transform="translate(0 0)"/><polygon class="cls-1" points="157.75 37 163.86 37 163.86 45 166.92 45 166.92 37 173.67 37 173.67 45 176.72 45 176.72 37 182.83 37 182.83 34.32 157.75 34.32 157.75 37"/><path class="cls-1" d="M191.22,30.06q.92-.82,1.62-1.53c.48.47,1,1,1.63,1.49l1.83,1.58q.93.81,1.86,1.56c.62.5,1.2,1,1.75,1.37l1.71-2.18c-1.18-.9-2.34-1.84-3.46-2.84s-2.15-2-3.08-2.9a2.1,2.1,0,0,1-.56-.85,3.64,3.64,0,0,1-.14-1V20.07h-3.09v4.65a3.15,3.15,0,0,1-.14,1,2.47,2.47,0,0,1-.55.87c-.45.47-.94,1-1.47,1.49s-1.09,1-1.68,1.57l-1.77,1.56c-.6.51-1.19,1-1.77,1.46l1.71,2.13c.54-.43,1.14-.91,1.78-1.44s1.28-1.08,1.93-1.65S190.61,30.61,191.22,30.06Z" transform="translate(0 0)"/><polygon class="cls-1" points="190.6 36.1 187.57 36.1 187.57 44.77 207.21 44.77 207.21 42.09 190.6 42.09 190.6 36.1"/><polygon class="cls-1" points="206.6 19.55 203.57 19.55 203.57 38.1 206.6 38.1 206.6 28.53 210 28.53 210 25.8 206.6 25.8 206.6 19.55"/>
<path d="M200.38,4c-2.11,1.77-3.94,3.29-7.75,3.29S187,5.75,184.88,4s-4.75-4-9.62-4-7.39,2.11-9.62,4-3.93,3.29-7.75,3.29S152.26,5.75,150.15,4s-4.75-4-9.62-4-7.39,2.11-9.62,4S127,7.27,123.16,7.27,117.53,5.75,115.41,4s-4.74-4-9.61-4V2.91c3.81,0,5.63,1.53,7.75,3.3s4.74,4,9.61,4,7.39-2.11,9.62-4,3.94-3.3,7.75-3.3,5.64,1.53,7.75,3.3,4.74,4,9.61,4,7.4-2.11,9.62-4,3.94-3.3,7.75-3.3,5.64,1.53,7.75,3.3,4.75,4,9.62,4,7.39-2.11,9.62-4,3.94-3.3,7.75-3.3V0C205.13,0,202.61,2.11,200.38,4Z" transform="translate(0 0)"/>
</svg>
</a>
</h1>
<button class="gnbOpen">
대메뉴열기
<svg>
<path class="openSt" d="M0,2C5.62,2,5.62,8.7,11.25,8.7S16.87,2,22.5,2s5.62,6.7,11.25,6.7S39.37,2,45,2"/>
<path class="openNd" d="M0,19.15c5.62,0,5.62,6.7,11.25,6.7s5.62-6.7,11.25-6.7,5.62,6.7,11.25,6.7,5.62-6.7,11.25-6.7"/>
<path class="openRd" d="M0,36.3c5.62,0,5.62,6.7,11.25,6.7s5.62-6.7,11.25-6.7S28.12,43,33.75,43,39.37,36.3,45,36.3"/>
</svg>
</button>
<nav class="menu">
<h2 class="vsHide">대메뉴</h2>
<ul class="gnb">
<li><a href="find.html">탐색하기<span></span></a></li>
<li><a href="tourCourse.html" class="current">체험코스<span></span></a></li>
<li><a href="wallpaper.html">월페이퍼<span></span></a></li>
</ul>
</nav>
</div>
</header>
<section id="visual">
<strong>남대문로, 태평로</strong>
<h2>
<span class="lnBrk">서울의 중심을</span>
<span class="lnBrk">가로지르다</span>
</h2>
<div class="picMask">
<div class="picture"></div>
</div>
</section>
<main>
<div class="mainInner">
<div class="tcMainLeft">
<section>
<div class="locaCard">
<h2>
<span class="lnBrk">서울역광장 및</span>
<span class="lnBrk">강우규 의사 동상</span>
</h2>
<strong class="location">용산구 한강대로 405</strong>
<p>서울역광장은 1970, 80년대에 주요 집회가 꾸준히 이어졌던 민주화 시위의 중심지이자 ‘민족 대이동’이라 표현되는 귀성·귀경길의 중심지로 서울시민들의 생활을 엿볼 수 있는 장소이다. 사이토총독저격사건, 서울역 회군, 6.26 국민평화대행진 등 대한민국 근현대사의 중요한 사건들이 발생된 장소이다.</p>
<div class="gallery">
<div></div>
<div></div>
<div></div>
</div>
<a href="#" class="more">더 알아보기</a>
</div>
</section>
<section>
<div class="locaCard">
<h2>
<span class="lnBrk">서울광장</span>
</h2>
<strong class="location">중구 태평로1가 31</strong>
<p>서울광장은 제26대 조선 왕인 고종이 대한제국을 개창할 때 황제의 거처인 경운궁(덕수궁)을 국가 통치의 중점으로 삼고자 조성한 광장이다. 그렇게 만들어진 서울광장은 늘 한반도 역사의 중심 역할을, 특히 민의가 표출되는 공간으로서 역사성을 이어오고 있다.</p>
<div class="gallery">
<div></div>
<div></div>
<div></div>
</div>
<a href="#" class="more">더 알아보기</a>
</div>
</section>
<section>
<div class="locaCard">
<h2>
<span class="lnBrk">세실극장</span>
</h2>
<strong class="location">중구 정동 3-1</strong>
<p>세실극장은 건축적인 면에서 무시할 수 없는 공간이다. 부채꼴의 공간 구성으로 관객의 시야 확보가 용이해 배우와 관객의 친밀도가 높은극장인데, 이는 한국 1세대 건축가로서 우리나라의 건축 설계 능력을 크게 확장한 고 김중업의 설계 덕분이다.</p>
<div class="gallery">
<div></div>
<div></div>
<div></div>
</div>
<a href="#" class="more">더 알아보기</a>
</div>
</section>
<section>
<div class="locaCard">
<h2>
<span class="lnBrk">옛 부민관</span>
</h2>
<strong class="location">중구 세종대로 125</strong>
<p>이 건물은 1935년 일제가 문화예술 공연장으로 사용하기 위해 건립되었다. 해방 이후부터는 1975년까지 대한민국 국회의사당으로 사용되었다. 국회의사당으로 쓰이던 근 25년의 시간 동안 이곳에서는 이후 한국 현대사의 흐름을 바꾸어 놓은 각종 사안들이 논의되고 결정됐다.</p>
<div class="gallery">
<div></div>
<div></div>
<div></div>
</div>
<a href="#" class="more">더 알아보기</a>
</div>
</section>
<section>
<div class="locaCard">
<h2>
<span class="lnBrk">도로원표</span>
<span class="lnBrk">(칭경기념비전 내)</span>
</h2>
<strong class="location">종로구 세종로 142-3</strong>
<p>도로원표는 일제가 조선을 지배하던 시절 지배의 ‘지리적 출발점’이라고 할 수 있다. 가로세로 길이가 채 1미터가 안 되는 돌 조각, 유심히 살펴보면 평양과 대전, 목포, 대구, 부산 등 전국 주요 도시까지의 거리가 한자로 새겨져 있다.</p>
<div class="gallery">
<div></div>
<div></div>
<div></div>
</div>
<a href="#" class="more">더 알아보기</a>
</div>
</section>
<section>
<div class="locaCard">
<h2>
<span class="lnBrk">세종로 이순신 동상</span>
</h2>
<strong class="location">서울 종로구 세종로 1-68</strong>
<p>이 동상은 국민적인 위인인 이순신의 정신과 업적을 기리기 위한 목적도 있었지만, 국가 중심도로라는 세종로의 위상을 생각할 때 근본적으로는 당시 정치현실을 떼 어놓고 볼 수 없다. 고 박정희 전 대통령은 ‘적화통일을 막아낼 수 있는 힘이 있는 권력’으로서의 군사정권의 당위성을 설파하려 했었다.</p>
<div class="gallery">
<div></div>
<div></div>
<div></div>
</div>
<a href="#" class="more">더 알아보기</a>
</div>
</section>
<section>
<div class="locaCard">
<h2>
<span class="lnBrk">세종문화회관</span>
</h2>
<strong class="location">종로구 세종로 81-3</strong>
<p>지난 1978년 건립된 세종문화회관은 기념비적 건물을 지으라는 박정희정권에 의해 만들어진 것이다. 국가 중심도로라고 할 수 있는 세종로 한 복판의 입지가 만만치 않아 보인다. 이는 북한 평양의 인민대학습당이나 만수대극장을 의식한 결과로 더 규모가 커질 수도 있었으나 건축가의 반대로 무산되었다.</p>
<div class="gallery">
<div></div>
<div></div>
<div></div>
</div>
<a href="#" class="more">더 알아보기</a>
</div>
</section>
</div>
<aside id="tcDetailMap">
<h2 class="vsHide">미래유산 위치 지도</h2>
<div class="map">
<!--카카오맵 API-->
</div>
<div class="control">
<button class="prevImg vsHide">이전이미지</button>
<button class="nextImg vsHide">다음이미지</button>
</div>
</aside>
</div>
</main>
<footer>
<div class="footerInner">
<h2 class="vsHide">주소 및 약관</h2>
<div class="footerTop">
<h3><img src="img/logo.svg" alt="서울미래유산"></h3>
<ul class="info">
<li><a href="#">개인정보 처리방침</a></li>
<li><a href="#">이용약관</a></li>
<li><a href="#">사이트맵</a></li>
<li><a href="#">저작권정보</a></li>
</ul>
</div>
<div class="footerBottom">
<p>서울특별시 문화본부 문화정책과 | 중구 덕수궁길 15 서소문별관 1동 4층</p>
<p>COPYRIGHT © 2016. SEOUL METROPOLITAN GOVERNMENT. ALL RIGHTS RESERVED. Redesigned by 이현성</p>
</div>
</div>
</footer>
</div>
</body>
</html>