-
Notifications
You must be signed in to change notification settings - Fork 0
/
memory.html
118 lines (111 loc) · 4.96 KB
/
memory.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
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale=1" >
<title>추억</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/simple-sidebar.css" rel="stylesheet">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Poppins">
<!-- 메뉴 토글 기능-->
<script src="js/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>
<style>
@import url(http://fonts.googleapis.com/earlyaccess/nanumpenscript.css);
body,h1,h2,h3,h4,h5 {font-family: "Poppins", sans-serif}
body{font-size:16px;}
img{border-radius: 30px}
.w3-half img{margin-bottom:-6px;margin-top:16px;opacity:0.8;cursor:pointer}
.w3-half img:hover{opacity:1}
</style>
</head>
<body>
<div id="wrapper">
<div id="sidebar-wrapper">
<!-- 사이드바 메뉴 css -->
<ul class="sidebar-nav">
<li class="sidebar-brand"><a href="./main.html">나의 소개 홈페이지</a></li>
<li><a href = "./me.html">나</a></li>
<li><a href = "./friends.html">가족/친구</a></li>
<li><a href = "./memory.html">추억</a></li>
<li><a href = "./hobby.html">취미</a></li>
<li><a href = "./tresure.html">보물지도</a></li>
</ul>
</div>
<br>
<h1 style="font-family:Nanum Pen Script; font-size:400%; padding-left:300px; padding-top:50px;">오랜 추억들</h1>
<div class="w3-main w3-content w3-padding" style="max-width:1200px;margin-top:100px;">
<!-- 1번째 문단 -->
<div class="w3-row-padding w3-padding-16 w3-center">
<div class="w3-quarter">
<img src="추억1.jpg" alt="" style="width:100%" onclick="onClick(this)">
<h3></h3>
</div>
<div class="w3-quarter">
<img src="추억2.jpg" alt="" style="width:100%" onclick="onClick(this)">
<h3></h3>
</div>
<div class="w3-quarter">
<img src="추억3.jpg" alt="" style="width:100%" onclick="onClick(this)">
<h3></h3>
</div>
<div class="w3-quarter">
<img src="추억4.jpg" alt="" style="width:100%" onclick="onClick(this)">
<h3></h3>
</div>
</div>
<!-- 2번째 문단 -->
<div class="w3-row-padding w3-padding-16 w3-center">
<div class="w3-quarter">
<img src="추억5.jpg" alt="" style="width:100%" onclick="onClick(this)">
<h3></h3>
</div>
<div class="w3-quarter">
<img src="추억6.jpg" alt="" style="width:100%" onclick="onClick(this)">
<h3></h3>
</div>
<div class="w3-quarter">
<img src="추억7.jpg" alt="" style="width:100%" onclick="onClick(this)">
<h3></h3>
</div>
<div class="w3-quarter">
<img src="추억8.jpg" alt="" style="width:100%" onclick="onClick(this)">
<h3></h3>
</div>
</div>
<!-- Modal for full size images on click-->
<div id="modal01" class="w3-modal w3-black w3-padding-0" onclick="this.style.display='none'">
<div class="w3-modal-content w3-animate-zoom w3-center w3-transparent w3-padding-64">
<img id="img01" class="w3-image">
<p id="caption"></p>
</div>
</div>
</div>
<a href="toggle_menu" class="btn btn-default" id="toggle_menu">메뉴 숨기기</a>
</div>
<script>
// 메뉴 토글 버튼
$("#toggle_menu").click(function(e)
{
e.preventDefault();
$("#wrapper").toggleClass("toggled");
});
// 이미지 확장
function w3_open() {
document.getElementById("mySidenav").style.display = "block";
document.getElementById("myOverlay").style.display = "block";
}
function w3_close() {
document.getElementById("mySidenav").style.display = "none";
document.getElementById("myOverlay").style.display = "none";
}
// Modal Image Gallery
function onClick(element) {
document.getElementById("img01").src = element.src;
document.getElementById("modal01").style.display = "block";
var captionText = document.getElementById("caption");
captionText.innerHTML = element.alt;
}
</script>
</body>
</html>