-
Notifications
You must be signed in to change notification settings - Fork 0
/
home.html
226 lines (193 loc) · 9.67 KB
/
home.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
<!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" media = "screen and (min-width: 1050px)" href="home-style-laptop.css">
<link rel="stylesheet" media = "(max-width: 1049px)" href ="home-style-phone.css">
<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=Cute+Font&family=Orbit&display=swap" rel="stylesheet">
</head>
<body>
<div id = "container">
<header>
<div id = "start">
<div id = "logo">
<ul>
<li><img id = "logo" src = "images/home.png" onclick = "location.replace('home.html')"></li>
</ul>
</div>
<div id = "title">
<h3>나만의 전시회</h3>
<h5>누구나 쉽게 여는 온라인 전시회</h5>
</div>
</div>
<div id = "nav">
<ul id = "topMenu">
<li><a href = "#"><span> </span></a>
<ul>
<li><a href = "home.html">전시 탐색</a></li>
</ul>
</li>
<li><a href = "#"><span> </span></a>
<ul>
<li><a href = "record.html">기록하기</a></li>
</ul>
</li>
<li><a href = "#"><span> </span></a>
<ul>
<li><a href = "history.html">내 전시</a></li>
</ul>
</li>
<li><a href="#"><span> </span></a>
<ul>
<li><a href="settings.html">설정</a></li>
</ul>
</li>
</ul>
</div>
</header>
<div id = "mainslide">
<section id = "bodytitle"><h5>전시 탐색</h5></section>
<aside id = "leftsidebar">
<h5>Menu</h5>
<ul>
<li>
<form id = "search-form" action = "">
<input id = "input" type = "text" placeholder="원하는 작가 or 전시">
<button id = "search-button" onclick="return false;">찾아보기</button>
</form>
</li>
<li id = "recent"><button><p>최근 감상한 목록</p></button>
<ul id = "hidden-recent">
<li><a href = "recent_artist.html">최근 감상한 작가</a></li>
<li><a href = "recent_art.html">최근 감상한 전시</a></li>
</ul>
</li>
<li id = "likes"><button><p>즐겨찾는 목록</p></button>
<ul id = "hidden-likes">
<li><a href = "likes_artist.html">즐겨찾는 작가</a></li>
<li><a href = "likes_art.html">즐겨찾는 전시</a></li>
</ul>
</li>
<li id = "tickets"><p>나의 티켓 ?장</p></li>
</ul>
</aside>
<div id = "contents">
<div id = "nature">
<div id = "content-title">
<h4>카이스트의 숨은 풍경</h4>
<h6>by 공대생1 2024.01.29</h6>
</div>
<ul id = "media">
<li><img src = "images/morning.png"></li>
<li>
<p>
카이스트에서 본가로 가기 위해 일찍 눈을 뜬 날에는 아름관에서 해가 뜨는 광경을 볼 수 있다.
카이스트에서 출발하여 대전역까지 가려면 20분 이상 걸리는데, 그 날따라 출근하는 차량들과
안 겹치기 위해 유난히 일찍 기숙사를 나섰다.
<br>
해가 뜨는 광경이 꼭 길에 있는 가로등 같았다.
일찍 일어나 힘겨운 하루를 시작하는 사람들에게 힘이 되어주는 것 같았다.
</p>
</li>
<li><img src = "images/evening.png"></li>
<li>
<p>
카이스트에서 기말고사를 마치고 나온 뒤 찍었던 사진이다.
그 당시 홀가분하고 시원한 마음을 갖고 본 하늘이 정말 예뻤다.
해가 지는 시간은 짧아서 더욱 소중하게 느껴진다.
</p>
</li>
<li><img src = "images/night.png"></li>
<li>
<p>
이 사진도 본가에서 카이스트로 기차를 타고 온 날 찍은 사진이다.
일부러 카메라가 빛을 받는 정도를 줄여서 (정확한 용어는 모른다)
어둡게 찍어서, 달이 더 빛나도록 찍었다.
눈으로 보는 것만큼 예쁘게 나오지는 않았지만 최대한 그 순간을 담았다.
</p>
</li>
</ul>
</div>
<div id = "comments">
<form action = "">
<h4>Comments</h4><span id = "number-comm"></span>
<input type = "text" id = "comment" placeholder="댓글을 입력하세요."><button id= "comm-submit" onclick = "addComment(); return false;">확인</button>
</form>
<ul id = "comm-history"></ul>
</div>
</div>
</div>
<footer>
</footer>
</div>
<script>
// 최근 감상한 목록 보여주기 / 사라지기
var recent = document.querySelector("#recent");
var hiddenRecent = document.querySelector("#hidden-recent");
recent.addEventListener("click", function(){
hiddenRecent.style.display = "block";
})
recent.addEventListener("dblclick", function(){
hiddenRecent.style.display = "none";
});
// 즐겨찾는 목록 보여주기 / 사라지기
var likes = document.querySelector("#likes");
var hiddenLikes = document.querySelector("#hidden-likes");
likes.addEventListener("click", function(){
hiddenLikes.style.display = "block";
})
likes.addEventListener("dblclick", function(){
hiddenLikes.style.display = "none";
});
// media division 에 박스 경계 넣고 싶은데, 항목 추가될 때마다 박스도 늘어나게
var contents = document.querySelector("#contents");
var media = document.querySelector("#media");
var contentTitle = document.querySelector("#content-title");
var nature = document.querySelector("#nature");
// 컨텐츠 상자 안의 제목과 내용을 포함하는 박스
//media.style.height = contents.style.height - contentTitle.style.height;
//댓글 쓰고 확인 누르면 추가, 댓글 쓴 시간도 추가
function addComment() {
var commentHistory = document.querySelector("#comm-history");
var newlistel = document.createElement("li");
var timeEl = document.createElement("li");
var totalEl = document.createElement("li");
var comment = document.querySelector("#comment"); //입력 받은 댓글
var commentText = document.createTextNode(comment.value);
var time = new Date();
var localtime = time.toLocaleTimeString();
var timeText = document.createTextNode(localtime);
timeEl.appendChild(timeText);
timeEl.style.fontSize = "0.7em";
timeEl.style.margin = "5px";
newlistel.style.margin = "5px";
var enter = document.createTextNode("\n");
newlistel.appendChild(commentText);
newlistel.appendChild(enter);
totalEl.appendChild(newlistel);
totalEl.appendChild(timeEl);
totalEl.style.border = "1px solid lightgray";
totalEl.style.padding = "5px";
totalEl.style.margin = "20px";
totalEl.style.borderRadius = "7px";
totalEl.style.width = "90%";
commentHistory.appendChild(totalEl);
//댓글 창이 비어있다면 입력 안 되도록.
if (comment.value === "") {
alert("댓글을 입력하세요.");
commentHistory.removeChild(totalEl);
}
comment.value = "";
//댓글 갯수도 표시
/* var number = document.querySelector("#number-comm");
var length = commentHistory.length;
var lengthText = document.createTextNode(length);
number.appendChild(lengthText); */
}
</script>
</body>
</html>