-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathmain.html
More file actions
380 lines (369 loc) · 19.2 KB
/
main.html
File metadata and controls
380 lines (369 loc) · 19.2 KB
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
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>에브리타임</title>
<link rel="stylesheet" href="css/main.css" />
<link rel="icon" href="img/browser_logo.png" />
<link rel="apple-touch-icon" href="img/browser_logo.png" />
</head>
<body>
<header>
<div class="logo">
<img src="img/nav.logo.png" />
<div>
<div class="mainname">에브리타임</div>
<div class="subname">덕성여대</div>
</div>
</div>
<div class="logo2">
<img src="img/aside.title.hamburger.png" />
<div>
<div class="subname">비밀게시판</div>
</div>
</div>
<div class="semiNav">
<span style="color: #d93c2b">게시판</span><span>시간표</span
><span> 강의실</span><span>학점계산기</span><span>친구</span
><span>책방</span><span>캠퍼스픽</span>
</div>
<div class="btns">
<img class="chat" src="img/chat.png" />
<img class="person" src="img/person.png" />
</div>
</header>
<nav>
<div class="nav1">
<a href="#">자유게시판</a><a href="#">비밀게시판</a
><a href="#">질문게시판</a><a href="#">새내기게시판</a
><a href="#">정보게시판</a><a href="#">홍보게시판</a>
</div>
<div class="nav2">
<a href="#">어른 사자 한진경</a><a href="#">어른 사자 이규민</a
><a href="#">어른 사자 김은서</a><a href="#">어른 사자 박규리</a
><a href="#">어른 사자 함요영</a
><a href="#">어른 사자 이성경</a>
</div>
<div class="nav3">
<a href="#">어른 사자 박소은</a><a href="#">어른 사자 이현주</a
><a href="#">어른 사자 김현지</a><a href="#">어른 사자 한지원</a
><a href="#">어른 사자 목소연</a
><a href="#">어른 사자 김서윤</a>
</div>
<div class="nav4">
<a href="#">아기 사자 강나연</a><a href="#">아기 사자 강승현</a
><a href="#">아기 사자 김민지</a><a href="#">아기 사자 김진효</a
><a href="#">아기 사자 노진경</a
><a href="#">아기 사자 박민주</a>
</div>
<div class="nav5">
<a href="#">아기 사자 박서현</a><a href="#">아기 사자 박선우</a
><a href="#">아기 사자 이주원</a><a href="#">아기 사자 정서영</a
><a href="#">아기 사자 최윤영</a
><a href="#">아기 사자 한정현</a>
</div>
<div class="nav6">
<a href="#">컴퓨터공학전공</a><a href="#">IT미디어전공</a
><a href="#">소프트웨어전공</a><a href="#">사이버보안전공</a
><a href="#">문화인류학전공</a><a href="#">경영학전공</a>
</div>
</nav>
<div class="wrap">
<section class="secBox">
<section class="sec1">
<div class="categoryName">비밀게시판</div>
<div class="recom">
<div class="recom-q">
<img
class="questImg"
src="img\icn_mcr_board_question_light.png"
/>
<span>덕성</span>
<span>12기</span>
<span>파이팅~</span>
</div>
<div class="recom-h">
<img
class="hotImg"
src="img\icn_mcr_board_hotarticle_light.png"
/>
<span>덕멋최고</span>
<span>어흥</span>
</div>
</div>
<div class="addBtn" onclick='showForm(event)'>
<div>새 글을 작성해주세요!</div>
<img class="pen" src="img/pen.png" />
</div>
<form class="addForm">
<input type="text" class="addTitle" placeholder="글 제목"></input>
<textarea name="text" placeholder="에브리타임은 누구나 기분 좋게 참여할 수 있는 커뮤니티를 만들기 위해 커뮤니티 이용규칙을 제정하여 운영하고 있습니다. 위반 시 게시물이 삭제되고 서비스 이용이 일정 기간 제한될 수 있습니다.
아래는 이 게시판에 해당하는 핵심 내용에 대한 요약 사항이며, 게시물 작성 전 커뮤니티 이용규칙 전문을 반드시 확인하시기 바랍니다.
※ 정치·사회 관련 행위 금지
- 국가기관, 정치 관련 단체, 언론, 시민단체에 대한 언급 혹은 이와 관련한 행위
- 정책·외교 또는 정치·정파에 대한 의견, 주장 및 이념, 가치관을 드러내는 행위
- 성별, 종교, 인종, 출신, 지역, 직업, 이념 등 사회적 이슈에 대한 언급 혹은 이와 관련한 행위
- 위와 같은 내용으로 유추될 수 있는 비유, 은어 사용 행위
* 해당 게시물은 시사·이슈 게시판에만 작성 가능합니다.
※ 홍보 및 판매 관련 행위 금지
- 영리 여부와 관계 없이 사업체·기관·단체·개인에게 직간접적으로 영향을 줄 수 있는 게시물 작성 행위
- 위와 관련된 것으로 의심되거나 예상될 수 있는 바이럴 홍보 및 명칭·단어 언급 행위
* 해당 게시물은 홍보게시판에만 작성 가능합니다.
※ 불법촬영물 유통 금지
불법촬영물등을 게재할 경우 전기통신사업법에 따라 삭제 조치 및 서비스 이용이 영구적으로 제한될 수 있으며 관련 법률에 따라 처벌받을 수 있습니다.
※ 그 밖의 규칙 위반
- 타인의 권리를 침해하거나 불쾌감을 주는 행위
- 범죄, 불법 행위 등 법령을 위반하는 행위
- 욕설, 비하, 차별, 혐오, 자살, 폭력 관련 내용을 포함한 게시물 작성 행위
- 음란물, 성적 수치심을 유발하는 행위
- 스포일러, 공포, 속임, 놀라게 하는 행위"
class="addText"
spellcheck="false"
></textarea>
<div class="itsQ">
<div>
질문 글을 작성하면 게시판 상단에 일정 기간 동안 노출되어, 더욱 빠르게 답변을 얻을 수 있게 됩니다.
<br>또한, 다른 학우들이 정성껏 작성한 답변을 유지하기 위해, 댓글이 달린 이후에는
<b>글을 수정 및 삭제할 수 없습니다.</b>
</div>
</div>
<div class="addBtns">
<div>
<button class="hashTag"></button>
<div class="imgPlus"><input type="file" accept="image/*"></div>
</div>
<div>
<button class="checkQuestBox" onclick='changeQ(event)'></button>
<button class="checkAnonBox" onclick='changeA(event)'></button>
<button class="submitBtn" type="submit"></button>
</div>
</div>
<!-- <div class="showImg">
<div></div>
<div class="imgPlus2"><input type="file" accept="image/*"></div>
</div> -->
</form>
<div class="postBox">
<div class="post">
<div class="postText">
<div class="post-title">
네가 "깃아 미안해" 했잖아?
</div>
<div class="post-content">
그럼 깃 충돌 이딴거 안생겼어
</div>
<div class="post-detail">
<img class="like" src="img/like.png" />
<div id="like-count">10</div>
<img class="reply" src="img/reply.png" />
<div id="reply-count">17</div>
| 10분전 | 익명
</div>
</div>
<img class="previewImg" src="img/preview.png" />
</div>
<div class="post">
<div class="postText">
<div class="post-title">
심각한 멋사 중독입니다
</div>
<div class="post-content">
흥 무슨 소리 세션이나 들어 어흥
</div>
<div class="post-detail">
<img class="like" src="img/like.png" />
<div id="like-count">10</div>
<img class="reply" src="img/reply.png" />
<div id="reply-count">17</div>
| 20분전 | 익명
</div>
</div>
<img class="previewImg" src="img/preview.png" />
</div>
<div class="post">
<div class="postText">
<div class="post-title">
꽁꽁 얼어붙은 한강 위로
</div>
<div class="post-content">
아기 사자가 걸어다닙니다
</div>
<div class="post-detail">
<img class="like" src="img/like.png" />
<div id="like-count">10</div>
<img class="reply" src="img/reply.png" />
<div id="reply-count">17</div>
| 30분전 | 익명
</div>
</div>
<img class="previewImg" src="img/preview.png" />
</div>
<div class="post">
<div class="postText">
<div class="post-title">
어른 사자 밟으실 수
</div>
<div class="post-content">
수수수수수퍼노바
</div>
<div class="post-detail">
<img class="like" src="img/like.png" />
<div id="like-count">10</div>
<img class="reply" src="img/reply.png" />
<div id="reply-count">17</div>
| 40분전 | 익명
</div>
</div>
<img class="previewImg" src="img/preview.png" />
</div>
<div class="post">
<div class="postText">
<div class="post-title">
아기 사자 업고 튀어
</div>
<div class="post-content">
네? 저를요?
</div>
<div class="post-detail">
<img class="like" src="img/like.png" />
<div id="like-count">10</div>
<img class="reply" src="img/reply.png" />
<div id="reply-count">17</div>
| 50분전 | 익명
</div>
</div>
<img class="previewImg" src="img/preview.png" />
</div>
</div>
</section>
<section class="sec2">
<form class="search">
<select name="category-select" id="category-select">
<option value="s-all">전체</option>
<option value="s-tag">해시태그</option>
<option value="s-con">글 내용</option>
<option value="s-title">글 제목</option>
</select>
<input type="text" placeholder="검색어를 입력하세요" />
</form>
<a class="nextBtn" href="#"
><div>다음</div>
<img class="next" src="img/next.png"
/></a>
</section>
</section>
<article>
<div class="cateBox">
<div class="cateTitle">실시간 인기 글</div>
<div class="catePost">
<div class="catePost-title">
네가 깃아 미안해 했잖아?
</div>
<div class="catePost-content">
그럼 깃 충돌 이딴거 안생겼어
</div>
<div class="catePost-detail">
<div>비밀게시판</div>
<img class="catePost-like" src="img/like.png" />
<div id="like-count">10</div>
<img class="catePost-reply" src="img/reply.png" />
<div id="reply-count">17</div>
</div>
</div>
<div class="catePost">
<div class="catePost-title">
네가 깃아 미안해 했잖아?
</div>
<div class="catePost-content">
그럼 깃 충돌 이딴거 안생겼어
</div>
<div class="catePost-detail">
<div>비밀게시판</div>
<img class="catePost-like" src="img/like.png" />
<div id="like-count">10</div>
<img class="catePost-reply" src="img/reply.png" />
<div id="reply-count">17</div>
</div>
</div>
</div>
<div class="cateBox">
<div class="cateTitle">HOT 게시물</div>
<div class="catePost">
<div class="catePost-title">
네가 깃아 미안해 했잖아?
</div>
<div class="catePost-content">
그럼 깃 충돌 이딴거 안생겼어
</div>
<div class="catePost-detail">
<div>비밀게시판</div>
<img class="catePost-like" src="img/like.png" />
<div id="like-count">10</div>
<img class="catePost-reply" src="img/reply.png" />
<div id="reply-count">17</div>
</div>
</div>
<div class="catePost">
<div class="catePost-title">
네가 깃아 미안해 했잖아?
</div>
<div class="catePost-content">
그럼 깃 충돌 이딴거 안생겼어
</div>
<div class="catePost-detail">
<div>비밀게시판</div>
<img class="catePost-like" src="img/like.png" />
<div id="like-count">10</div>
<img class="catePost-reply" src="img/reply.png" />
<div id="reply-count">17</div>
</div>
</div>
</div>
</article>
</div>
<footer>
<div>
<span>이용약관</span>
<span>개인정보처리방침</span>
<span>청소년보호정책</span>
<span>커뮤니티이용규칙</span>
<span>공지사항</span>
<span>문의하기</span>
<span>© 에브리타임</span>
</div>
<div>직업정보제공사업 신고번호 : J1204020230008</div>
</footer>
<script>
const itsQ = document.querySelector(".itsQ");
function changeQ(e) {
event.preventDefault();
const button = e.target;
if (button.classList.contains("active")) {
button.style.backgroundImage = "url('/img/container.articles.write.question.png')";
itsQ.style.display = "none"
} else {
button.style.backgroundImage = "url('/img/container.articles.write.question.active.png')";
itsQ.style.display = "inline"
}
button.classList.toggle("active");
}
function changeA(e) {
event.preventDefault();
const button = e.target;
if (button.classList.contains("active")) {
button.style.backgroundImage = "url('/img/container.articles.write.anonym.png')";
} else {
button.style.backgroundImage = "url('/img/container.articles.write.anonym.active.png')";
}
button.classList.toggle("active");
}
const addForm = document.querySelector(".addForm");
function showForm(e) {
event.preventDefault();
e.target.style.display = "none"
addForm.style.display = "flex"
}
</script>
</body>
</html>