김재현 / open-source-project-2017-02

Go to a project
Toggle navigation Toggle navigation pinning
김재현
6bba7932 2 parents 63dde196 69751c47

Merge

Inline Side-by-side
Showing 6 changed files with 344 additions and 11 deletions
body {
padding: 50px;
font: 14px "Lucida Grande", Helvetica, Arial, sans-serif;
}
body,
a {
color: #00b7ff;
color: #808080;
}
ul.sidenav {
list-style-type: none;
margin: 0;
padding: 0;
width: 10%;
background-color: #f1f1f1;
height: 100%;
position: fixed;
overflow: auto;
}
ul.sidenav li a {
display: block;
color: #000;
padding: 8px 16px;
text-decoration: none;
transition: 0.3s;
}
ul.sidenav li a.active {
background-color: #4caf50;
color: #fff;
}
ul.sidenav li a:hover:not(.active) {
background-color: #555;
color: #fff;
}
#content {
margin-left: 25%;
padding: 1px 16px;
height: 100%;
}
table {
display: block;
width: 70%;
height: 100%;
}
td {
text-align: center;
display: block;
}
.bold {
color: #ffc0cb;
font-size: 100%;
}
.small {
color: #808080;
font-size: 8pt;
}
#map {
width: 100%;
......
body
padding: 50px
font: 14px "Lucida Grande", Helvetica, Arial, sans-serif
a
color: #00B7FF
color: gray;
ul.sidenav
list-style-type: none;
margin: 0;
padding: 0;
width: 10%;
background-color: #f1f1f1;
height: 100%;
position : fixed;
overflow : auto;
ul.sidenav li a
display: block;
color: #000;
padding: 8px 16px;
text-decoration: none;
transition: 0.3s;
ul.sidenav li a.active
background-color: #4CAF50;
color: white;
ul.sidenav li a:hover:not(.active)
background-color: #555;
color: white;
#content
margin-left: 25%;
padding: 1px 16px;
height: 100%;
table
display : block
width : 70%
height : 100%
td
text-align : center;
display : block
.bold
color : pink;
font-size : 100%;
.small
color : grey;
font-size : 8pt;
......
......@@ -2,12 +2,48 @@ var express = require('express');
var router = express.Router();
/* GET home page. */
router.get('/', function(req, res, next) {
router.get('/index', function(req, res, next) {
res.render('index', { title: 'Express' });
});
router.get('/test', function(req, res, next) {
res.render('test', { title: '맛집 견문록' });
router.get('/', function(req, res, next) {
res.render('main', { title: '맛집 견문록' });
});
router.get('/map', function(req, res, next){
res.render('map', {title: '맛집 도장찍기'});
});
router.get('/home', function(req,res,next){
res.render('main', {title: '맛집견문록'});
});
router.get('/mybook', function(req, res, next){
var rows = new Array();
var temp1 = {
name : "신사동떡볶이",
place : "서울특별시 영등포구 신길7동"
}
var temp2 ={name : "동해떡국집", place : "서교동 1234"}
var temp3 = {name : "앗뜨거어묵국물", place : "용인시 기흥구 어디일까"}
var temp5 = {name : "와장창창", place : "윌집앞"}
var temp6 = {name : "맛있는 짜장면", place : "너네집앞"}
var temp4 = {name : "네모네모 오징어", place : "영등포경찰서"}
rows.push(temp1);
rows.push(temp2);
rows.push(temp3);
rows.push(temp4);
rows.push(temp5);
rows.push(temp6);
res.render('mybook', {title: '견문록 보기', rows : rows});
});
module.exports = router;
......
<!DOCTYPE html>
<html>
<head>
<title><%= title %></title>
<link rel='stylesheet' href='/stylesheets/style.css'/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
<script>
$(document).ready(function() {
$('.sidenav').hide();
$('#show').click(function() {
$('.sidenav').slideToggle("fast");
});
});
</script>
<div id ="menu">
<div id ="show">clickmenu</div>
<ul class="sidenav">
<li><a class="active" href="home">home</a></li>
<li><a href="map">맛집도장찍기</a></li>
<li><a href="mybook">견문록확인</a></li>
</ul>
</div>
<div id = "header"> </div>
<div id ="content">
<h1><%= title %></h1>
<p>Welcome to <%= title %></p>
</div>
<div id ="footer"></div>
</body>
</html>
<html>
<head>
<title><%= title %></title>
<link rel='stylesheet' href='/stylesheets/style.css'/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
<script>
$(document).ready(function() {
$('.sidenav').hide();
$('#show').click(function() {
$('.sidenav').slideToggle("fast");
});
});
</script>
<div id ="menu">
<div id ="show">clickmenu</div>
<ul class="sidenav">
<li><a class="active" href="home">home</a></li>
<li><a href="map">맛집도장찍기</a></li>
<li><a href="mybook">견문록확인</a></li>
</ul>
</div>
<div id = "header"> </div>
<div id ="content">
<h1>구글지도보기</h1>
탐방한 맛집을 클릭하면 쿠폰북에 기록됩니다
</div>
<div id ="footer"></div>
</body>
</html>
<html>
<head>
<title><%= title %></title>
<link rel='stylesheet' href='/stylesheets/style.css'/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
<script>
$(document).ready(function() {
$('.sidenav').hide();
$('#show').click(function() {
$('.sidenav').slideToggle("fast");
});
});
</script>
<div id ="menu">
<div id ="show">clickmenu</div>
<ul class="sidenav">
<li><a class="active" href="home">home</a></li>
<li><a href="map">맛집도장찍기</a></li>
<li><a href="mybook">견문록확인</a></li>
</ul>
</div>
<div id = "header"> </div>
<div id ="content">
<table border="1">
<%
for( var i=0; i<rows.length; i++)
{
for( var j = 0; j<3; j++){
num = i * 3 + j;
var item = rows[num];
%>
<tr>
<td><p class="bold"><%=num%> : <%=item.name%></p>
<p class="small"><%=item.place%></p></td>
<% } %>
</tr>
<%
}
%>
</table>
</div>
<div id ="footer"></div>
</body>
</html>