-
Notifications
You must be signed in to change notification settings - Fork 0
/
sub1_1.html
293 lines (264 loc) · 18.1 KB
/
sub1_1.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
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" />
<!-- 최소/최대 스케일 1x, 확대/축소 불가 -->
<title>세상의 모든 글, 모글</title>
<link rel="shortcut icon" href="./images/icons/favicon.ico" />
<link rel="stylesheet" type="text/css" href="./css/normalize.css" /> <!-- 브라우저별 태그 형태 통일 -->
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/[email protected]/slick/slick.css"/> <!-- Slick Carousel -->
<link rel="stylesheet" type="text/css" href="./css/default.css" /> <!-- 공통 CSS -->
<link rel="stylesheet" type="text/css" href="./css/layout_sub.css" /> <!-- 개별 페이지 CSS -->
<!-- 모듈 CSS -->
<link rel="stylesheet" type="text/css" href="./css/header.css" />
<link rel="stylesheet" type="text/css" href="./css/footer.css" />
<link rel="stylesheet" type="text/css" href="./css/interface.css" /> <!-- 인터페이스 구성요소 CSS -->
<link rel="stylesheet" type="text/css" href="./css/mq.css" /> <!-- 미디어 쿼리 CSS -->
<link rel="stylesheet" type="text/css" href="./css/animation.css" /> <!-- 애니메이션 키프레임 CSS -->
<!-- JavaScript -->
<script type="text/javascript" src="https://code.jquery.com/jquery-3.5.1.min.js"></script> <!-- jQuery -->
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/[email protected]/slick/slick.min.js"></script> <!-- Slick -->
<script type="text/javascript" src="./js/default.js"></script> <!-- 공통 JS -->
<script type="text/javascript" src="./js/interface.js"></script> <!-- 인터페이스 구성요소 JS -->
<script type="text/javascript" src="./js/js_sub.js"></script> <!-- 개별 페이지 JS -->
<!--[if lt IE 9]>
<script src="./js/html5shiv.js"></script>
<![endif]-->
</head>
<body> <!-- CWK Normal HTML Ver. 202101 -->
<div id="wrap">
<!-- Non-Related -->
<aside id="gotoTop">
<button class="go" onclick="location.href='#wrap'">go to top</button>
</aside>
<nav id="navMobile">
<p class="mnav_cate" btn-name="카테고리">
<a href="#"><img src="images/icons/icoCate.png" alt="" /></a>
</p>
<p class="mnav_comm" btn-name="커뮤니티">
<a href="./sub1_2.html"><img src="images/icons/icoComm.png" alt="" /></a>
</p>
<p class="mnav_home" btn-name="홈">
<a href="./index.html"><img src="images/icons/icoHome.png" alt="" /></a>
</p>
<p class="mnav_my" btn-name="나의 서재">
<a href="#"><img src="images/icons/icoShelf.png" alt="" /></a>
</p>
<p class="mnav_acc" btn-name="정보수정">
<a href="#"><img src="images/icons/icoSetting.png" alt="" /></a>
</p>
</nav>
<!-- Non-Related -->
<header id="headBase" class="head_sub">
<div class="int_wrap">
<h1 class="logo scr_alt"><a href="./index.html" target="_self">Mogle</a></h1>
<nav id="navMain" class="nav_index txtbold">
<a href="#"><span>화제작 모아보기</span></a>
<a class="nav_checked" href="#"><span>도서</span></a>
<a href="#"><span>영화 / 연극 / 뮤지컬</span></a>
<a href="#"><span>TV 프로그램</span></a>
<a class="thisitem" href="./sub1_2.html"><span>커뮤니티</span></a>
</nav>
<form id="frmHSearch" class="frmsearch_sub">
<input id="txtHSearch" type="text" name="headSearch" maxlength="60" placeholder="검색 키워드를 입력하세요." />
</form>
<button id="btnMyMenu" class="btn_sub txtbold">나의 서재</button>
<button id="btnProfile" class="btn_sub"><img src="./images/profile_img.jpg" alt="프로필 보기" /></button>
<div id="floatAcc">
<h4>로그인이 필요한 서비스입니다.</h4>
<hr class="hf" />
<input id="txtID" type="email" name="loginID" maxlength="50" placeholder="ID (e-mail 주소)" value="[email protected]" />
<input id="txtPW" type="password" name="loginPW" maxlength="20" placeholder="비밀번호" value="1234567891011" />
<button id="btnLogin" type="submit">로그인</button>
<button id="btnJoin">회원가입</button>
<button id="btnFind">ID / 비밀번호 찾기</button>
</div>
</div>
</header> <!-- Header -->
<!-- Page Main Contents Start -->
<div id="subContentBG">
<div>
<div class="int_wrap">
<p class="sub_information">소설 | 판타지 | 외국</p>
</div>
</div>
</div>
<section id="subMainArea" class="content_container int_wrap">
<aside id="contentSideBar">
<a href="#"><img class="cover_content" src="./images/bookcovers/14.jpg" alt="" /></a>
평균 별점이 몇점이고<br />
어쩌고 저쩌고 이 작가의 다른 어쩌고 저쩌고
</aside> <!-- ContentSideBar -->
<article id="subContent">
<div class="subtitle_box">
<h2 class="subtitle txtbold">어스시의 마법사</h2>
<p class="subtitle_en txtenlight">A Wizard of Earthsea</p>
<p class="sub_author">어슐러 르 귄 · 1968</p>
</div>
<div id="subButtons" class="txtbold">
<button id="subWrite">리뷰 작성하기</button>
<button id="subAdd">나의 서재에 보관하기</button>
<button id="subMore"></button>
</div>
<hr class="hf" />
<div id="subText">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce convallis, nisi pellentesque varius congue, nisl lacus maximus lorem, at interdum turpis risus eleifend leo. Cras ut ipsum eu nisi tempus condimentum eu eu magna. Vestibulum enim risus, aliquam nec leo a, luctus facilisis orci. Mauris sit amet nisi sed nibh hendrerit elementum. Sed varius, augue vitae aliquet vulputate, risus velit pretium lectus, eget varius tortor erat id sem. Fusce vitae commodo orci. Nam lacus augue, luctus sed lacinia et, commodo sed mauris. Vivamus ac rhoncus ex, sed fermentum ex. Duis felis nisi, aliquam vitae arcu id, gravida sagittis lectus. Curabitur nec euismod ante. Sed vitae libero sapien. In hac habitasse platea dictumst. Donec ac orci et dui vulputate tempor quis sed sem. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p>
<p>
Maecenas mattis tincidunt neque, vel sagittis nisl hendrerit eu. Curabitur at metus nec odio rutrum rhoncus in sed nulla. Proin sollicitudin, justo et vehicula pellentesque, ex massa bibendum justo, id iaculis lectus massa nec dolor. Donec semper, ipsum id dignissim bibendum, felis ante tincidunt lectus, eu lacinia neque dui at magna. Donec tristique elit at bibendum fermentum. Nam nisi nisi, tempus sit amet felis a, lobortis venenatis justo. Donec in porttitor eros, et eleifend risus. Suspendisse turpis erat, finibus ut tellus id, laoreet condimentum diam. Curabitur non molestie justo, eget sollicitudin nisl. Phasellus nec erat vehicula, tristique dui quis, interdum massa. Cras sagittis, lacus nec interdum finibus, diam libero ornare velit, sit amet sodales turpis ligula non orci. Suspendisse sit amet porta lorem. Sed aliquam dui nunc, id efficitur erat condimentum eu. Phasellus molestie, dui ut venenatis auctor, lacus dui ultrices tellus, eget tempor urna lacus id turpis.
</p>
</div>
<hr class="hf" />
<div id="subAddition">
<div class="subadd_comment">
<h3 class="subadd_title">이 작품에 대한 한줄평</h3>
<ul>
<li>
<img class="subadd_comment_face" src="images/faces/f01.jpg" alt="" />
<p class="txtbold">코멘트 남긴 사람</p>
<p>코멘트 내용</p>
</li>
<li>
<img class="subadd_comment_face" src="images/faces/f02.jpg" alt="" />
<p class="txtbold">코멘트 남긴 사람</p>
<p>코멘트 내용</p>
</li>
<li>
<img class="subadd_comment_face" src="images/faces/f03.jpg" alt="" />
<p class="txtbold">코멘트 남긴 사람</p>
<p>코멘트 내용</p>
</li>
<li>
<img class="subadd_comment_face" src="images/faces/f04.jpg" alt="" />
<p class="txtbold">코멘트 남긴 사람</p>
<p>코멘트 내용</p>
</li>
</ul>
<form id="subComment">
<input id="subCommentText" type="text" placeholder="한줄평 입력하기" />
<button id="subCommentSubmit">입력</button>
</form>
</div>
<div class="subadd_prorv">
<h3 class="subadd_title">이 작품에 대한 모글리 리뷰</h3>
<article class="subadd_prorv_article">
<img class="subadd_prorv_face" src="./images/faces/f05.jpg" alt="" />
<p class="subadd_prorv_title">
<span class="txtbold">가나다라마바사</span><br />
<span class="txtnorm">글쓴이</span>
</p>
<p class="subadd_prorv_text">
Suspendisse potenti. Aliquam sed vehicula elit. Nulla et euismod nisi. Nunc nec ipsum sit amet ligula interdum euismod. Phasellus bibendum orci eu turpis molestie ullamcorper. Fusce purus leo, malesuada vitae volutpat non, aliquam id dolor. Maecenas hendrerit libero vel gravida blandit. Nulla a elementum metus, pharetra varius dolor. Nunc pellentesque metus nisl, lacinia iaculis augue pulvinar nec. Sed a mauris cursus sem convallis varius vitae eget lectus. Cras venenatis justo vel lorem condimentum ullamcorper nec at massa. Nam bibendum felis vitae egestas tincidunt. Aliquam non accumsan nulla.
</p>
<div class="subadd_prorv_btncontainer">
<button class="btnNice">좋아요</button>
<button class="btnHate">관심없음</button>
</div>
</article>
</div>
</div> <!-- subAddition -->
<hr class="hf" />
<h3 class="subadd_title">이 작품이 포함된 컬렉션</h3>
<div id="subCollection">
<article class="collection_windows">
<a href="#">
<div class="collection_items">
<img src="./images/bookcovers/14.jpg" alt="" />
<img src="./images/bookcovers/04.jpg" alt="" />
<img src="./images/bookcovers/05.jpg" alt="" />
<img src="./images/bookcovers/06.jpg" alt="" />
<img src="./images/bookcovers/07.jpg" alt="" />
<img src="./images/bookcovers/08.jpg" alt="" />
</div>
<dl class="collection_owner">
<img src="./images/faces/f01.jpg" alt="" />
<dt class="txtbold">
"컬렉션 제목"
</dt>
<dd>
컬렉션 사용자<span> · 총 256개의 작품</span>
</dd>
</dl>
</a>
</article>
<!-- 1 -->
<article class="collection_windows">
<a href="#">
<div class="collection_items">
<img src="./images/bookcovers/14.jpg" alt="" />
<img src="./images/bookcovers/09.jpg" alt="" />
<img src="./images/bookcovers/10.jpg" alt="" />
<img src="./images/bookcovers/11.jpg" alt="" />
<img src="./images/bookcovers/12.jpg" alt="" />
<img src="./images/bookcovers/13.jpg" alt="" />
</div>
<dl class="collection_owner">
<img src="./images/faces/f05.jpg" alt="" />
<dt class="txtbold">
"컬렉션 제목"
</dt>
<dd>
컬렉션 사용자<span> · 총 256개의 작품</span>
</dd>
</dl>
</a>
</article>
<!-- 2 -->
<article class="collection_windows">
<a href="#">
<div class="collection_items">
<img src="./images/bookcovers/14.jpg" alt="" />
<img src="./images/bookcovers/15.jpg" alt="" />
<img src="./images/bookcovers/16.jpg" alt="" />
<img src="./images/bookcovers/17.jpg" alt="" />
<img src="./images/bookcovers/18.jpg" alt="" />
<img src="./images/bookcovers/19.jpg" alt="" />
</div>
<dl class="collection_owner">
<img src="./images/faces/f08.jpg" alt="" />
<dt class="txtbold">
"컬렉션 제목"
</dt>
<dd>
컬렉션 사용자<span> · 총 256개의 작품</span>
</dd>
</dl>
</a>
</article>
<!-- 3 -->
</div>
</article> <!-- subContent -->
</section> <!-- subMainArea -->
<!-- Page Main Contents End -->
<p id="rvCount">지금까지 <span class="count_item txtenbold">1,234,567</span> 개의 작품에 대한 <span class="count_review txtenbold">67,891,011</span> 개의 리뷰가 작성되었습니다.</p>
<footer id="footBase" class="foot_sub">
<div class="int_wrap">
<div id="footLinks">
<a href="#">이용약관</a>
<hr class="vf" />
<a class="txtbold" href="#">개인정보 처리방침</a>
<hr class="vf" />
<a href="#">이메일 주소 무단수집 거부</a>
<hr class="vf" />
<a href="#">서비스 정보</a>
<div id="snsIcons">
<a href="#"><img src="./images/icons/icoFacebook.png" alt="mogle 페이스북" /></a>
<a href="#"><img src="./images/icons/icoTwitter.png" alt="mogle 트위터" /></a>
<a href="#"><img src="./images/icons/icoInstagram.png" alt="mogle 인스타그램" /></a>
</div>
</div>
<p>주식회사 모글 · 대표자 김창완</p>
<p>고객센터 · 1544-5555 | <a class="txtenlight" href="mailto:[email protected]">[email protected]</a></p>
<address>부산광역시 부산진구 성지곡로 12번길 29</address>
<p>사업자 등록번호 · 2021-부산초읍-25515</p>
<div id="footCopy">
<h1 class="logo scr_alt"><a href="./index.html" target="_self">Mogle</a></h1>
<p class="txtenlight">ⓒ All Rights Reserved.</p>
</div>
</div>
</footer> <!-- Footer -->
</div> <!-- #wrap -->
</body>
</html>