이유제 / CultureGallery

Go to a project
Toggle navigation Toggle navigation pinning
송효섭
65aa55cf 1 parent fce0e2c2

merge kakaotest 오류수정, 전체 구조 개선

Inline Side-by-side
Showing 39 changed files with 1384 additions and 102 deletions
1 +# Culture Gallery
2 +
3 +## ✔ 목차
4 +- [✔ 목차](#-목차)
5 +- [소개](#-소개)
6 + - [개발 환경](#개발-환경)
7 + - [사용한 API](#사용한-api)
8 +- [설치 방법](#-설치-방법)
9 + - [요구 사항](#요구-사항)
10 + - [설치](#설치)
11 +- [사용 방법](#-사용-방법)
12 +- [기여하기](#️-기여하기)
13 +- [라이센스](#-라이센스)
14 +- [연락처](#-연락처)
15 +
16 +## 소개
17 +![메인-화면](images/mainpage.jpg)
18 +
19 +한국에서 진행하는 공연 중 본인에게 맞는 공연을 찾을 수 있는 서버입니다.<br>
20 +본인 현재 위치 기반으로 주변에서 진행 하고있는 /진행 될 공연의 정보를 카카오 맵으로 제공합니다.<br>
21 +기간/위치/비용 등의 필터를 통해 본인이 원하는 공연을 검색할 수 있습니다.<br>
22 +카카오 계정 로그인을 통해 보러 가고 싶은 공연을 카카오톡 친구와 공유할 수 있는 기능을 제공합니다.
23 +
24 +### 개발 환경
25 +* [node.js - 14.15.1 LTS](https://nodejs.org/ko/)
26 +* [Express - 4.17.1](https://expressjs.com/ko/)
27 +* [HTML5]
28 +* [CSS3]
29 +
30 +### 사용한 API
31 +* [Kakaomap Maps API](https://apis.map.kakao.com/)
32 + * [Document](https://apis.map.kakao.com/web/documentation/)
33 +* [Kakao Login API](https://developers.kakao.com/docs/latest/ko/kakaologin/common/)
34 + * [Document](https://developers.kakao.com/docs/latest/ko/kakaologin/common)
35 +
36 +
37 +## 설치 방법
38 +서버 설치 방법을 소개합니다. 이 방법은 Local에서만 동작합니다.
39 +### 요구 사항
40 +* node.js
41 +
42 +이 [링크](https://nodejs.org/ko/)에서 설치할 수 있습니다.
43 +* npm
44 +
45 +node.js와 함께 설치됩니다.
46 +혹은 가장 최신 버전으로 업데이트합니다.
47 +```sh
48 +npm install -g npm
49 +```
50 +### 설치
51 +1. [리포지토리](http://khuhub.khu.ac.kr/2019102210/CultureGallery) 클론
52 + 원하는 디렉토리에서 아래의 명령어를 입력해 이 리포지토리를 가져옵니다.
53 + ```
54 + git clone http://khuhub.khu.ac.kr/2019102210/CultureGallery.git
55 + ```
56 +2. npm 패키지 설치
57 + 서버 실행에 필요한 패키지를 설치합니다.
58 + ```
59 + npm install
60 + ```
61 +3. 포트 변경
62 + 본 웹서비스는 local 환경에서 8000 번 포트를 할당받아 실행됩니다.
63 + 8000번 포트에서 실행되고 있는 다른 프로그램 혹은 웹서비스와 동시에 실행될 수 없습니다.
64 +
65 +4. 서버 구동
66 + 터미널에서 본 프로젝트의 디렉토리로 이동한 후 npm start를 실행합니다.
67 + ```
68 + npm start
69 + ```
70 +
71 +## 사용 방법 (구체화 중)
72 +1. IE 8 이상의 웹 브라우저로 localhost:8000에 접속합니다.
73 +![메인-화면](images/mainpage.jpg)<br>
74 +
75 +2. 나의 근처 공연/ 검색하기 / 로그인 버튼 중 하나를 선택합니다.<br>
76 +-기능 1. 나의 근처 공연<br>
77 + 본인의 위치를 받아올 수 있도록 위치 수집 권한을 허락해주세요.<br>
78 + 지도 중심에 본인의 위치가 나오고 주변의 공연 장소에 마크가 달립니다.(보완 중)<br>
79 +
80 +-기능 2. 검색하기<br>
81 + 원하는 필터를 체크한 후, 검색하면 해당 조건을 충족하는 공연들이 나옵니다.(개발 중)<br>
82 +
83 +-기능 3. 로그인<br>
84 + 카카오톡 계정 로그인을 통해 더 많은 기능을 사용하세요!<br>
85 + 로그인을 하면 보러 가고 싶은 공연의 정보를 카카오톡 친구와 공유할 수 있습니다.<br>
86 +
87 +## 라이센스
88 +MIT 라이센스를 따릅니다. 자세한 내용은 `License` 파일을 확인해주세요.
89 +
90 +## 연락처
91 +이유제: dbwp031@khu.ac.kr<br>
92 +송효섭: crad_on25@khu.ac.kr<br>
...\ No newline at end of file ...\ No newline at end of file
1 const express = require('express'); 1 const express = require('express');
2 -const fs = require('fs');
3 const path = require('path'); 2 const path = require('path');
4 -const logger = require('morgan');
5 const app = express(); 3 const app = express();
6 4
7 - 5 +//화면 별 router 연결, 라우터 호출해서 페이지를 불러오는데 사용함.
8 -app.use(logger('combined')); 6 +var mainRouter = require('./routes/main') //호출시 main.js 실행 (main.js : title 할당하고 main.html 열어줌)
9 - 7 +var loginRouter = require('./routes/login')
10 //디폴트 포트 값 : 8000 8 //디폴트 포트 값 : 8000
11 app.set('port', process.env.PORT || 8000); 9 app.set('port', process.env.PORT || 8000);
12 10
13 -//get하는 방법 : sendfile(파일 디렉토리 ) : 개선 필요 -> html 페이지 이동 및 data 전달 방법 찾기 11 +//ejs (html포맷) 파일을 웹사이트에 view로 띄워주기 위한 view engine 설정.
14 -app.get('/', (req, res) => { 12 +app.set('views', path.join(__dirname, 'views'));
15 - res.sendFile(path.join(__dirname, './public/html/main.html')) 13 +app.set('view engine', 'ejs');
16 -}); 14 +app.engine('html', require('ejs').renderFile);
17 -app.get('/plan', (req, res) => { 15 +
18 - res.send('Server is working'); 16 +//각각의 요청에서 router 호출해서 page를 전환함.
19 - res.sendFile(path.join(__dirname, './public/html/main.html')); 17 +app.use('/', mainRouter);
20 - //console.log(app.get('port'), '번 포트 대기 중'); 18 +app.use('/login', loginRouter);
21 -}); 19 +
22 -app.get('/login', (req, res) => { 20 +
23 - // console.log('로그인 페이지 오픈 시도됨.'); 21 +//css, image 등 정적 파일을 public에서 불러옴 -> html과 연결함
24 - fs.readFile('./public/html/login.html', function (err, data) { 22 +app.use(express.static(path.join(__dirname, 'public')));
25 - res.writeHead(200, { 'Content-Type': 'text/html' }); 23 +
26 - res.end(data); 24 +
27 - }) 25 +// app.get('/', (req, res) => {
28 -}) 26 +// //res.send('Server is working');
27 +// // res.sendFile(path.join(__dirname, '/html/main.html'));
28 +// res.sendFile(__dirname + "/html/main.html");
29 +// console.log(app.get('port'), '번 포트 대기 중');
30 +// });
31 +
32 +// app.get('/login', (req, res) => {
33 +// console.log('로그인 페이지 오픈 시도됨.');
34 +// res.sendFile(__dirname + "/html/login.html");
35 +// // fs.readFile('./html/login.html', function (err, data) {
36 +// // res.writeHead(200, { 'Content-Type': 'text/html' });
37 +// // res.end(data);
38 +// // })
39 +// })
29 40
30 app.get('/logout', function (req, res) { 41 app.get('/logout', function (req, res) {
31 res.send("Logout success"); 42 res.send("Logout success");
......
1 +<html>
2 +
3 +<head>
4 + <title>로그인 페이지</title>
5 + <link rel="stylesheet" href="login_style.css" type="text/css">
6 + <script src="https://developers.kakao.com/sdk/js/kakao.js"></script>
7 +
8 +</head>
9 +
10 +<body>
11 + <header>
12 + <div class="nav-bar">
13 + <img src="camera.png" alt="" class="logo">
14 +
15 + <ul class="menu">
16 + <li><a href="">Home</a></li>
17 + <li><a href="">Services</a></li>
18 + <li><a href="">Portfolio</a></li>
19 + <li><a href="">Testimonimal</a></li>
20 + <li><a href="">Career</a></li>
21 + <li><a href="">Contact</a></li>
22 + </ul>
23 +
24 + </div>
25 + <div class="welcome">
26 +
27 + <h1>로그인</h1>
28 + <a id="kakao-login-btn"></a>
29 +
30 + </div>
31 +
32 + </header>
33 +</body>
34 +<script>
35 + Kakao.init('0678e32dab56db1c52ac63ab4ccb7663');
36 +
37 + console.log(Kakao.isInitialized());
38 +
39 + Kakao.Auth.createLoginButton({
40 + container: '#kakao-login-btn',
41 + success: function (authObj) {
42 + console.log(JSON.stringify(authObj));
43 + alert(JSON.stringify(authObj));//authObj -> 토큰임.
44 + },
45 + fail: function (err) {
46 + alert(JSON.stringify(err));
47 + }
48 + })
49 +</script>
50 +
51 +</html>
...\ No newline at end of file ...\ No newline at end of file
1 +*
2 +{
3 + margin: 0;
4 + padding: 0;
5 +}
6 +
7 +
8 +.nav-bar
9 +{
10 + background: #000;
11 + height: 80px;
12 +}
13 +
14 +.logo{
15 + background-color: #fff;
16 + margin: 10px 50px;
17 + height: 60px;
18 +}
19 +
20 +.menu{
21 + float: right;
22 + list-style: none;
23 + margin:20px;
24 +}
25 +
26 +.menu li{
27 + display: inline-block;
28 + margin: 10px 5px;
29 +}
30 +
31 +.menu li a{
32 + text-decoration: none;
33 + color: #fff;
34 + padding: 5px 10px;
35 + font-family: sans-serif;
36 + letter-spacing: 2px;
37 + border: 1px solid #fff;
38 +}
39 +
40 +.menu li a:hover{
41 + background: #fff;
42 + transition: .4s;
43 + color: #000;
44 +}
45 +
46 +.welcome{
47 + position:relative;
48 + text-align:center;
49 + font-family: sans-serif;
50 + color:#000;
51 + top: 300px;
52 +}
53 +
54 +.welcome h1{
55 + font-size: 42px;
56 + margin: 25px;
57 +}
58 +
1 +<html>
2 +
3 +<head>
4 + <title>Webpage Design In HTML and CSS</title>
5 + <link rel="stylesheet" href="main_style.css" type="text/css">
6 +</head>
7 +
8 +<body>
9 + <header>
10 + <div class="nav-bar">
11 + <img src="camera.png" alt="" class="logo">
12 +
13 + <ul class="menu">
14 + <li><a href="">Home</a></li>
15 + <li><a href="">Services</a></li>
16 + <li><a href="">Portfolio</a></li>
17 + <li><a href="">Testimonimal</a></li>
18 + <li><a href="">Career</a></li>
19 + <li><a href="">Contact</a></li>
20 + </ul>
21 +
22 + </div>
23 + <div class="welcome">
24 +
25 + <h1>어떤 공연을 찾으시나요?</h1>
26 + <a href="#" class="btn btn1">나의 근처 공연</a>
27 + <a href="#" class="btn btn2">검색하기</a>
28 + <a href="login.html" class="btn btn3">로그인</a>
29 + </div>
30 +
31 + </header>
32 +</body>
33 +
34 +</html>
...\ No newline at end of file ...\ No newline at end of file
1 +*
2 +{
3 + margin: 0;
4 + padding: 0;
5 +}
6 +
7 +header
8 +{
9 + background-image:linear-gradient(rgba(0,0,0,0.5),rgba(0,0,100,0.5)), url(back1.jpg);
10 + height: 100vh;
11 + background-size: cover;
12 + background-position: center;
13 + background-repeat: no-repeat;
14 + transition: 5s;
15 +
16 + animation-name: animate;
17 + animation-direction: alternate-reverse;
18 + animation-duration: 30s;
19 + animation-fill-mode:forwards;
20 + animation-iteration-count: infinite;
21 + animation-play-state: running;
22 + animation-timing-function:ease-in-out;
23 +}
24 +@keyframes animate{
25 + 0%{
26 + background-image:linear-gradient(rgba(0,0,0,0.5),rgba(0,0,100,0.5)), url(back1.jpg);
27 + }
28 + 33%{
29 + background-image:linear-gradient(rgba(0,0,0,0.5),rgba(0,0,100,0.5)), url(back2.jpg);
30 +
31 + }
32 + 66%{
33 + background-image:linear-gradient(rgba(0,0,0,0.5),rgba(0,0,100,0.5)), url(back3.jpg);
34 +
35 + }
36 +}
37 +.nav-bar
38 +{
39 + background: rgb(0,0,0,0.5);
40 + height: 80px;
41 +}
42 +
43 +.logo{
44 + background-color: #fff;
45 + margin: 10px 50px;
46 + height: 60px;
47 +}
48 +
49 +.menu{
50 + float: right;
51 + list-style: none;
52 + margin:20px;
53 +}
54 +
55 +.menu li{
56 + display: inline-block;
57 + margin: 10px 5px;
58 +}
59 +
60 +.menu li a{
61 + text-decoration: none;
62 + color: #fff;
63 + padding: 5px 10px;
64 + font-family: sans-serif;
65 + letter-spacing: 2px;
66 + border: 1px solid #fff;
67 +}
68 +
69 +.menu li a:hover{
70 + background: #fff;
71 + transition: .4s;
72 + color: #000;
73 +}
74 +
75 +.welcome{
76 + position:relative;
77 + text-align:center;
78 + font-family: sans-serif;
79 + color:#fff;
80 + top: 300px;
81 +}
82 +
83 +.welcome h1{
84 + font-size: 42px;
85 + margin: 25px;
86 +}
87 +
88 +.btn{
89 + font-size:18px;
90 + letter-spacing: 2px;
91 + margin:5px;
92 + padding:7px 10px;
93 + text-decoration: none;
94 + border: 1px solid #fff;
95 +}
96 +
97 +.btn{
98 + color:#fff;
99 +
100 +}
101 +.btn:hover{
102 + background: #fff;
103 + color: #000;
104 + transition: .4s;
105 +}
...\ No newline at end of file ...\ No newline at end of file
1 +var http = require('http');
2 +var fs = require('fs');
3 +var app = http.createServer(function(request,response){
4 + var url=request.url;
5 + if(url == '/'){
6 + url = '/send.html';
7 + }
8 + if(url == '/loginmainpage'){
9 + url='/loginmainpage.html';
10 + }
11 + response.writeHead(200);
12 + response.end(fs.readFileSync(__dirname+url));
13 +});
14 +
15 +app.listen(8080);
...\ No newline at end of file ...\ No newline at end of file
1 +<!DOCTYPE html>
2 +<html>
3 + <head>
4 + <meta charset="utf-8"/>
5 + <title>login page title</title>
6 + <script src="https://developers.kakao.com/sdk/js/kakao.js"></script>
7 +
8 + </head>
9 +<body>
10 + <a id="kakao-login-btn"></a>
11 + <a href="http://developers.kakao.com/logout"></a>
12 + <script>
13 + Kakao.init('0678e32dab56db1c52ac63ab4ccb7663');
14 +
15 + console.log(Kakao.isInitialized());
16 +
17 + Kakao.Auth.createLoginButton({
18 + container: '#kakao-login-btn',
19 + success: function(authObj){
20 + console.log(JSON.stringify(authObj));
21 + alert(JSON.stringify(authObj));//authObj -> 토큰임.
22 + redirectUrl
23 + },
24 + fail: function(err){
25 + alert(JSON.stringify(err));
26 + }
27 + })
28 + console.log('hi');
29 + Kakao.Link.createDefaultButton({
30 + container: ".kakao-link",
31 + objectType: "feed",
32 + content:{
33 + title: "안녕하세요",
34 + description: "반갑습니다.",
35 + link:{
36 + webUrl: "https://www.naver.com/",
37 + mobileWebUrl: "https://www.naver.com/"
38 + },
39 + },
40 + })
41 + function kakaoLogout(){
42 + Kakao.Auth.logout(function(response){
43 + alert(response+'logout');
44 + Kakao.API.request({
45 + url: '/v1/user/unlink',
46 + success: function(response) {
47 + console.log(response);
48 + },
49 + fail: function(error) {
50 + console.log(error);
51 + console.log("error");
52 + },
53 + })
54 + })
55 + }
56 +</script>
57 +<script>
58 + console.log('hi');
59 + Kakao.Link.createDefaultButton({
60 + container: ".kakao-link",
61 + objectType: "feed",
62 + content:{
63 + title: "안녕하세요",
64 + description: "반갑습니다.",
65 + link:{
66 + webUrl: "https://www.naver.com/",
67 + mobileWebUrl: "https://www.naver.com/"
68 + },
69 + },
70 + })
71 +</script>
72 +
73 +<a onclick="kakaoLogout();">카카오 로그아웃</a>
74 +</body>
75 +</html>
1 +<!DOCTYPE html>
2 +<html>
3 + <head>
4 + <title>login main page title</title>
5 + </head>
6 +</html>
...\ No newline at end of file ...\ No newline at end of file
1 +<!DOCTYPE html>
2 +<html>
3 + <head>
4 + <meta charset="utf-8"/>
5 + <title>send page title</title>
6 + <script src="https://developers.kakao.com/sdk/js/kakao.js"></script>
7 + <script src="send.js"></script>
8 + </head>
9 + <body>
10 + <a onclick="sendLink()">보내기</a>
11 + </body>
12 +</html>
...\ No newline at end of file ...\ No newline at end of file
1 +function sendLink(){
2 + Kakao.init('0678e32dab56db1c52ac63ab4ccb7663')
3 + Kakao.Link.sendDefault({
4 + objectType: 'feed',
5 + content:{
6 + title: "관심있는 공연 정보",
7 + description: '주소-> http://naver.com',
8 + imageUrl:'http://k.kakaocdn.net/dn/Q2iNx/btqgeRgV54P/VLdBs9cvyn8BJXB3o7N8UK/kakaolink40_original.png',
9 + link:{
10 + mobileWebUrl: 'http://naver.com',
11 + webUrl: 'http://naver.com',
12 + },
13 + },
14 + buttons: [
15 + {
16 + title: '웹으로 보기',
17 + link: {
18 + mobileWebUrl: 'http://naver.com',
19 + webUrl: 'http://naver.com',
20 + },
21 + },
22 + {
23 + title: '웹으로 보기',
24 + link: {
25 + mobileWebUrl: 'http://naver.com',
26 + webUrl: 'http://naver.com',
27 + },
28 + },
29 + ],
30 + })
31 +};
...\ No newline at end of file ...\ No newline at end of file
1 +<!DOCTYPE html>
2 +<html>
3 +<head>
4 + <meta charset="utf-8">
5 + <title>geolocation으로 마커 표시하기</title>
6 +
7 +</head>
8 +<body>
9 +<p style="margin-top:-12px">
10 + <b>Chrome 브라우저는 https 환경에서만 geolocation을 지원합니다.</b> 참고해주세요.
11 +</p>
12 +<div id="map" style="width:500px;height:350px;"></div>
13 +
14 +<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=a3386042ab2e0550ea06d265855b452c">//kakao map api 주소 받아옴</script>
15 +<script>
16 +var mapContainer = document.getElementById('map'), // 지도를 표시할 div
17 + mapOption = {
18 + center: new kakao.maps.LatLng(33.450701, 126.570667), // 지도의 중심좌표
19 + level: 10 // 지도의 확대 레벨
20 + };
21 +
22 +var map = new kakao.maps.Map(mapContainer, mapOption); // 지도를 생성합니다
23 +
24 +// HTML5의 geolocation으로 사용할 수 있는지 확인합니다
25 +if (navigator.geolocation) {
26 +
27 + // GeoLocation을 이용해서 접속 위치를 얻어옵니다
28 + navigator.geolocation.getCurrentPosition(function(position) {
29 +
30 + var lat = position.coords.latitude, // 위도
31 + lon = position.coords.longitude; // 경도
32 + console.log(lat);
33 + console.log(lon);
34 + var locPosition = new kakao.maps.LatLng(lat, lon), // 마커가 표시될 위치를 geolocation으로 얻어온 좌표로 생성합니다
35 + message = '<div style="padding:5px;">여기에 계신가요?!</div>'; // 인포윈도우에 표시될 내용입니다
36 +
37 + // 마커와 인포윈도우를 표시합니다
38 + displayMarker(locPosition, message);
39 +
40 + });
41 +
42 +} else { // HTML5의 GeoLocation을 사용할 수 없을때 마커 표시 위치와 인포윈도우 내용을 설정합니다
43 +
44 + var locPosition = new kakao.maps.LatLng(33.450701, 126.570667),
45 + message = 'geolocation을 사용할수 없어요..'
46 +
47 + displayMarker(locPosition, message);
48 +}
49 +
50 +
51 +var positions = [
52 + {
53 + title: '카카오',
54 + latlng: new kakao.maps.LatLng(37.2427865, 127.106767)
55 + }
56 +];
57 +
58 +
59 +displayShows(positions);
60 +function displayShows(positions){
61 + var imageSrc = "https://t1.daumcdn.net/localimg/localimages/07/mapapidoc/markerStar.png";
62 +
63 +for (var i = 0; i < positions.length; i ++) {
64 +
65 + // 마커 이미지의 이미지 크기 입니다
66 + var imageSize = new kakao.maps.Size(24, 35);
67 +
68 + // 마커 이미지를 생성합니다
69 + var markerImage = new kakao.maps.MarkerImage(imageSrc, imageSize);
70 +
71 + // 마커를 생성합니다
72 + var marker = new kakao.maps.Marker({
73 + map: map, // 마커를 표시할 지도
74 + position: positions[i].latlng, // 마커를 표시할 위치
75 + title : positions[i].title, // 마커의 타이틀, 마커에 마우스를 올리면 타이틀이 표시됩니다
76 + image : markerImage // 마커 이미지
77 + });
78 + }
79 +}
80 +// 지도에 마커와 인포윈도우를 표시하는 함수입니다
81 +function displayMarker(locPosition, message) {
82 +
83 + // 마커를 생성합니다
84 + var marker = new kakao.maps.Marker({
85 + map: map,
86 + position: locPosition
87 + });
88 +
89 + var iwContent = message, // 인포윈도우에 표시할 내용
90 + iwRemoveable = true;
91 +
92 + // 인포윈도우를 생성합니다
93 + var infowindow = new kakao.maps.InfoWindow({
94 + content : iwContent,
95 + removable : iwRemoveable
96 + });
97 +
98 + // 인포윈도우를 마커위에 표시합니다
99 + infowindow.open(map, marker);
100 +
101 + // 지도 중심좌표를 접속위치로 변경합니다
102 + map.setCenter(locPosition);
103 +}
104 +</script>
105 +</body>
106 +</html>
...\ No newline at end of file ...\ No newline at end of file
1 +var http = require('http');
2 +var fs = require('fs');
3 +var app = http.createServer(function(request,response){
4 + var url=request.url;
5 + if(url == '/'){
6 + url = '/mapPage.html';
7 + }
8 + response.writeHead(200);
9 + response.end(fs.readFileSync(__dirname+url));
10 +});
11 +
12 +app.listen(8080);
...\ No newline at end of file ...\ No newline at end of file
1 +<!DOCTYPE html>
2 +<html>
3 + <head>
4 + <meta charset="utf-8">
5 + <title> map Page title </title>
6 + </head>
7 +<body>
8 + <div id="map" style="width:500px;height:350px"></div>
9 + <script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=a3386042ab2e0550ea06d265855b452c">//kakao map api 주소 받아옴</script>
10 +
11 + <script src="./mypos.js"></script>
12 + <script src="./show_pos.js"></script>
13 +</body>
14 +</html>
...\ No newline at end of file ...\ No newline at end of file
1 +var mapContainer = document.getElementById('map'), // 지도를 표시할 div
2 +
3 +// 지도를 표시할 div와 지도 옵션으로 지도를 생성합니다
4 +mapOption = {
5 + center: new kakao.maps.LatLng(33.450701, 126.570667), // 지도의 중심좌표
6 + level: 5 // 지도의 확대 레벨
7 + };
8 +
9 +var map = new kakao.maps.Map(mapContainer, mapOption); // 지도를 생성합니다
10 +
11 +// HTML5의 geolocation으로 사용할 수 있는지 확인합니다
12 +if (navigator.geolocation) {
13 +
14 + // GeoLocation을 이용해서 접속 위치를 얻어옵니다
15 + navigator.geolocation.getCurrentPosition(function(position) {
16 +
17 + var lat = position.coords.latitude, // 위도
18 + lon = position.coords.longitude; // 경도
19 +
20 + var locPosition = new kakao.maps.LatLng(lat, lon), // 마커가 표시될 위치를 geolocation으로 얻어온 좌표로 생성합니다
21 + message = '<div style="padding:5px;">나의 위치!</div>'; // 인포윈도우에 표시될 내용입니다
22 +
23 + // 마커와 인포윈도우를 표시합니다
24 + displayMarker(locPosition, message);
25 +
26 + });
27 +
28 +} else { // HTML5의 GeoLocation을 사용할 수 없을때 마커 표시 위치와 인포윈도우 내용을 설정합니다
29 +
30 + var locPosition = new kakao.maps.LatLng(33.450701, 126.570667),
31 + message = 'geolocation을 사용할수 없어요..'
32 +
33 + displayMarker(locPosition, message);
34 +}
35 +
36 +// 지도에 마커와 인포윈도우를 표시하는 함수입니다
37 +function displayMarker(locPosition, message) {
38 +
39 + // 마커를 생성합니다
40 + var marker = new kakao.maps.Marker({
41 + map: map,
42 + position: locPosition
43 + });
44 +
45 + var iwContent = message, // 인포윈도우에 표시할 내용
46 + iwRemoveable = true;
47 +
48 + // 인포윈도우를 생성합니다
49 + var infowindow = new kakao.maps.InfoWindow({
50 + content : iwContent,
51 + removable : iwRemoveable
52 + });
53 +
54 + // 인포윈도우를 마커위에 표시합니다
55 + infowindow.open(map, marker);
56 +
57 + // 지도 중심좌표를 접속위치로 변경합니다
58 + map.setCenter(locPosition);
59 +}
...\ No newline at end of file ...\ No newline at end of file
1 +var positions = [
2 + {
3 + title: '카카오',
4 + latlng: new kakao.maps.LatLng(37.2427865, 127.106767)
5 + }
6 +];
7 +
8 +displayShows(positions);
9 +
10 +function displayShows(positions){
11 + var imageSrc = "https://t1.daumcdn.net/localimg/localimages/07/mapapidoc/markerStar.png";
12 +
13 +for (var i = 0; i < positions.length; i ++) {
14 +
15 + // 마커 이미지의 이미지 크기 입니다
16 + var imageSize = new kakao.maps.Size(24, 35);
17 +
18 + // 마커 이미지를 생성합니다
19 + var markerImage = new kakao.maps.MarkerImage(imageSrc, imageSize);
20 +
21 + // 마커를 생성합니다
22 + var marker = new kakao.maps.Marker({
23 + map: map, // 마커를 표시할 지도
24 + position: positions[i].latlng, // 마커를 표시할 위치
25 + title : positions[i].title, // 마커의 타이틀, 마커에 마우스를 올리면 타이틀이 표시됩니다
26 + image : markerImage // 마커 이미지
27 + });
28 + }
29 +}
...\ No newline at end of file ...\ No newline at end of file
...@@ -9,8 +9,8 @@ ...@@ -9,8 +9,8 @@
9 "version": "1.0.0", 9 "version": "1.0.0",
10 "license": "MIT", 10 "license": "MIT",
11 "dependencies": { 11 "dependencies": {
12 - "express": "^4.17.1", 12 + "ejs": "^3.1.5",
13 - "morgan": "^1.10.0" 13 + "express": "^4.17.1"
14 } 14 }
15 }, 15 },
16 "node_modules/accepts": { 16 "node_modules/accepts": {
...@@ -25,21 +25,31 @@ ...@@ -25,21 +25,31 @@
25 "node": ">= 0.6" 25 "node": ">= 0.6"
26 } 26 }
27 }, 27 },
28 + "node_modules/ansi-styles": {
29 + "version": "3.2.1",
30 + "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz",
31 + "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==",
32 + "dependencies": {
33 + "color-convert": "^1.9.0"
34 + },
35 + "engines": {
36 + "node": ">=4"
37 + }
38 + },
28 "node_modules/array-flatten": { 39 "node_modules/array-flatten": {
29 "version": "1.1.1", 40 "version": "1.1.1",
30 "resolved": "https://registry.npmjs.org/array-flatten/-/array-flatten-1.1.1.tgz", 41 "resolved": "https://registry.npmjs.org/array-flatten/-/array-flatten-1.1.1.tgz",
31 "integrity": "sha1-ml9pkFGx5wczKPKgCJaLZOopVdI=" 42 "integrity": "sha1-ml9pkFGx5wczKPKgCJaLZOopVdI="
32 }, 43 },
33 - "node_modules/basic-auth": { 44 + "node_modules/async": {
34 - "version": "2.0.1", 45 + "version": "0.9.2",
35 - "resolved": "https://registry.npmjs.org/basic-auth/-/basic-auth-2.0.1.tgz", 46 + "resolved": "https://registry.npmjs.org/async/-/async-0.9.2.tgz",
36 - "integrity": "sha512-NF+epuEdnUYVlGuhaxbbq+dvJttwLnGY+YixlXlME5KpQ5W3CnXA5cVTneY3SPbPDRkcjMbifrwmFYcClgOZeg==", 47 + "integrity": "sha1-rqdNXmHB+JlhO/ZL2mbUx48v0X0="
37 - "dependencies": { 48 + },
38 - "safe-buffer": "5.1.2" 49 + "node_modules/balanced-match": {
39 - }, 50 + "version": "1.0.0",
40 - "engines": { 51 + "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.0.tgz",
41 - "node": ">= 0.8" 52 + "integrity": "sha1-ibTRmasr7kneFk6gK4nORi1xt2c="
42 - }
43 }, 53 },
44 "node_modules/body-parser": { 54 "node_modules/body-parser": {
45 "version": "1.19.0", 55 "version": "1.19.0",
...@@ -61,6 +71,15 @@ ...@@ -61,6 +71,15 @@
61 "node": ">= 0.8" 71 "node": ">= 0.8"
62 } 72 }
63 }, 73 },
74 + "node_modules/brace-expansion": {
75 + "version": "1.1.11",
76 + "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
77 + "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==",
78 + "dependencies": {
79 + "balanced-match": "^1.0.0",
80 + "concat-map": "0.0.1"
81 + }
82 + },
64 "node_modules/bytes": { 83 "node_modules/bytes": {
65 "version": "3.1.0", 84 "version": "3.1.0",
66 "resolved": "https://registry.npmjs.org/bytes/-/bytes-3.1.0.tgz", 85 "resolved": "https://registry.npmjs.org/bytes/-/bytes-3.1.0.tgz",
...@@ -69,6 +88,37 @@ ...@@ -69,6 +88,37 @@
69 "node": ">= 0.8" 88 "node": ">= 0.8"
70 } 89 }
71 }, 90 },
91 + "node_modules/chalk": {
92 + "version": "2.4.2",
93 + "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
94 + "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==",
95 + "dependencies": {
96 + "ansi-styles": "^3.2.1",
97 + "escape-string-regexp": "^1.0.5",
98 + "supports-color": "^5.3.0"
99 + },
100 + "engines": {
101 + "node": ">=4"
102 + }
103 + },
104 + "node_modules/color-convert": {
105 + "version": "1.9.3",
106 + "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
107 + "integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==",
108 + "dependencies": {
109 + "color-name": "1.1.3"
110 + }
111 + },
112 + "node_modules/color-name": {
113 + "version": "1.1.3",
114 + "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz",
115 + "integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU="
116 + },
117 + "node_modules/concat-map": {
118 + "version": "0.0.1",
119 + "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
120 + "integrity": "sha1-2Klr13/Wjfd5OnMDajug1UBdR3s="
121 + },
72 "node_modules/content-disposition": { 122 "node_modules/content-disposition": {
73 "version": "0.5.3", 123 "version": "0.5.3",
74 "resolved": "https://registry.npmjs.org/content-disposition/-/content-disposition-0.5.3.tgz", 124 "resolved": "https://registry.npmjs.org/content-disposition/-/content-disposition-0.5.3.tgz",
...@@ -127,6 +177,20 @@ ...@@ -127,6 +177,20 @@
127 "resolved": "https://registry.npmjs.org/ee-first/-/ee-first-1.1.1.tgz", 177 "resolved": "https://registry.npmjs.org/ee-first/-/ee-first-1.1.1.tgz",
128 "integrity": "sha1-WQxhFWsK4vTwJVcyoViyZrxWsh0=" 178 "integrity": "sha1-WQxhFWsK4vTwJVcyoViyZrxWsh0="
129 }, 179 },
180 + "node_modules/ejs": {
181 + "version": "3.1.5",
182 + "resolved": "https://registry.npmjs.org/ejs/-/ejs-3.1.5.tgz",
183 + "integrity": "sha512-dldq3ZfFtgVTJMLjOe+/3sROTzALlL9E34V4/sDtUd/KlBSS0s6U1/+WPE1B4sj9CXHJpL1M6rhNJnc9Wbal9w==",
184 + "dependencies": {
185 + "jake": "^10.6.1"
186 + },
187 + "bin": {
188 + "ejs": "bin/cli.js"
189 + },
190 + "engines": {
191 + "node": ">=0.10.0"
192 + }
193 + },
130 "node_modules/encodeurl": { 194 "node_modules/encodeurl": {
131 "version": "1.0.2", 195 "version": "1.0.2",
132 "resolved": "https://registry.npmjs.org/encodeurl/-/encodeurl-1.0.2.tgz", 196 "resolved": "https://registry.npmjs.org/encodeurl/-/encodeurl-1.0.2.tgz",
...@@ -140,6 +204,14 @@ ...@@ -140,6 +204,14 @@
140 "resolved": "https://registry.npmjs.org/escape-html/-/escape-html-1.0.3.tgz", 204 "resolved": "https://registry.npmjs.org/escape-html/-/escape-html-1.0.3.tgz",
141 "integrity": "sha1-Aljq5NPQwJdN4cFpGI7wBR0dGYg=" 205 "integrity": "sha1-Aljq5NPQwJdN4cFpGI7wBR0dGYg="
142 }, 206 },
207 + "node_modules/escape-string-regexp": {
208 + "version": "1.0.5",
209 + "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz",
210 + "integrity": "sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ=",
211 + "engines": {
212 + "node": ">=0.8.0"
213 + }
214 + },
143 "node_modules/etag": { 215 "node_modules/etag": {
144 "version": "1.8.1", 216 "version": "1.8.1",
145 "resolved": "https://registry.npmjs.org/etag/-/etag-1.8.1.tgz", 217 "resolved": "https://registry.npmjs.org/etag/-/etag-1.8.1.tgz",
...@@ -188,6 +260,14 @@ ...@@ -188,6 +260,14 @@
188 "node": ">= 0.10.0" 260 "node": ">= 0.10.0"
189 } 261 }
190 }, 262 },
263 + "node_modules/filelist": {
264 + "version": "1.0.1",
265 + "resolved": "https://registry.npmjs.org/filelist/-/filelist-1.0.1.tgz",
266 + "integrity": "sha512-8zSK6Nu0DQIC08mUC46sWGXi+q3GGpKydAG36k+JDba6VRpkevvOWUW5a/PhShij4+vHT9M+ghgG7eM+a9JDUQ==",
267 + "dependencies": {
268 + "minimatch": "^3.0.4"
269 + }
270 + },
191 "node_modules/finalhandler": { 271 "node_modules/finalhandler": {
192 "version": "1.1.2", 272 "version": "1.1.2",
193 "resolved": "https://registry.npmjs.org/finalhandler/-/finalhandler-1.1.2.tgz", 273 "resolved": "https://registry.npmjs.org/finalhandler/-/finalhandler-1.1.2.tgz",
...@@ -221,6 +301,14 @@ ...@@ -221,6 +301,14 @@
221 "node": ">= 0.6" 301 "node": ">= 0.6"
222 } 302 }
223 }, 303 },
304 + "node_modules/has-flag": {
305 + "version": "3.0.0",
306 + "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
307 + "integrity": "sha1-tdRU3CGZriJWmfNGfloH87lVuv0=",
308 + "engines": {
309 + "node": ">=4"
310 + }
311 + },
224 "node_modules/http-errors": { 312 "node_modules/http-errors": {
225 "version": "1.7.2", 313 "version": "1.7.2",
226 "resolved": "https://registry.npmjs.org/http-errors/-/http-errors-1.7.2.tgz", 314 "resolved": "https://registry.npmjs.org/http-errors/-/http-errors-1.7.2.tgz",
...@@ -260,6 +348,23 @@ ...@@ -260,6 +348,23 @@
260 "node": ">= 0.10" 348 "node": ">= 0.10"
261 } 349 }
262 }, 350 },
351 + "node_modules/jake": {
352 + "version": "10.8.2",
353 + "resolved": "https://registry.npmjs.org/jake/-/jake-10.8.2.tgz",
354 + "integrity": "sha512-eLpKyrfG3mzvGE2Du8VoPbeSkRry093+tyNjdYaBbJS9v17knImYGNXQCUV0gLxQtF82m3E8iRb/wdSQZLoq7A==",
355 + "dependencies": {
356 + "async": "0.9.x",
357 + "chalk": "^2.4.2",
358 + "filelist": "^1.0.1",
359 + "minimatch": "^3.0.4"
360 + },
361 + "bin": {
362 + "jake": "bin/cli.js"
363 + },
364 + "engines": {
365 + "node": "*"
366 + }
367 + },
263 "node_modules/media-typer": { 368 "node_modules/media-typer": {
264 "version": "0.3.0", 369 "version": "0.3.0",
265 "resolved": "https://registry.npmjs.org/media-typer/-/media-typer-0.3.0.tgz", 370 "resolved": "https://registry.npmjs.org/media-typer/-/media-typer-0.3.0.tgz",
...@@ -311,27 +416,15 @@ ...@@ -311,27 +416,15 @@
311 "node": ">= 0.6" 416 "node": ">= 0.6"
312 } 417 }
313 }, 418 },
314 - "node_modules/morgan": { 419 + "node_modules/minimatch": {
315 - "version": "1.10.0", 420 + "version": "3.0.4",
316 - "resolved": "https://registry.npmjs.org/morgan/-/morgan-1.10.0.tgz", 421 + "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.0.4.tgz",
317 - "integrity": "sha512-AbegBVI4sh6El+1gNwvD5YIck7nSA36weD7xvIxG4in80j/UoK8AEGaWnnz8v1GxonMCltmlNs5ZKbGvl9b1XQ==", 422 + "integrity": "sha512-yJHVQEhyqPLUTgt9B83PXu6W3rx4MvvHvSUvToogpwoGDOUQ+yDrR0HRot+yOCdCO7u4hX3pWft6kWBBcqh0UA==",
318 "dependencies": { 423 "dependencies": {
319 - "basic-auth": "~2.0.1", 424 + "brace-expansion": "^1.1.7"
320 - "debug": "2.6.9",
321 - "depd": "~2.0.0",
322 - "on-finished": "~2.3.0",
323 - "on-headers": "~1.0.2"
324 }, 425 },
325 "engines": { 426 "engines": {
326 - "node": ">= 0.8.0" 427 + "node": "*"
327 - }
328 - },
329 - "node_modules/morgan/node_modules/depd": {
330 - "version": "2.0.0",
331 - "resolved": "https://registry.npmjs.org/depd/-/depd-2.0.0.tgz",
332 - "integrity": "sha512-g7nH6P6dyDioJogAAGprGpCtVImJhpPk/roCzdb3fIh61/s/nPsfR6onyMwkCAR/OlC3yBC0lESvUoQEAssIrw==",
333 - "engines": {
334 - "node": ">= 0.8"
335 } 428 }
336 }, 429 },
337 "node_modules/ms": { 430 "node_modules/ms": {
...@@ -358,14 +451,6 @@ ...@@ -358,14 +451,6 @@
358 "node": ">= 0.8" 451 "node": ">= 0.8"
359 } 452 }
360 }, 453 },
361 - "node_modules/on-headers": {
362 - "version": "1.0.2",
363 - "resolved": "https://registry.npmjs.org/on-headers/-/on-headers-1.0.2.tgz",
364 - "integrity": "sha512-pZAE+FJLoyITytdqK0U5s+FIpjN0JP3OzFi/u8Rx+EV5/W+JTWGXG8xFzevE7AjBfDqHv/8vL8qQsIhHnqRkrA==",
365 - "engines": {
366 - "node": ">= 0.8"
367 - }
368 - },
369 "node_modules/parseurl": { 454 "node_modules/parseurl": {
370 "version": "1.3.3", 455 "version": "1.3.3",
371 "resolved": "https://registry.npmjs.org/parseurl/-/parseurl-1.3.3.tgz", 456 "resolved": "https://registry.npmjs.org/parseurl/-/parseurl-1.3.3.tgz",
...@@ -486,6 +571,17 @@ ...@@ -486,6 +571,17 @@
486 "node": ">= 0.6" 571 "node": ">= 0.6"
487 } 572 }
488 }, 573 },
574 + "node_modules/supports-color": {
575 + "version": "5.5.0",
576 + "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
577 + "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
578 + "dependencies": {
579 + "has-flag": "^3.0.0"
580 + },
581 + "engines": {
582 + "node": ">=4"
583 + }
584 + },
489 "node_modules/toidentifier": { 585 "node_modules/toidentifier": {
490 "version": "1.0.0", 586 "version": "1.0.0",
491 "resolved": "https://registry.npmjs.org/toidentifier/-/toidentifier-1.0.0.tgz", 587 "resolved": "https://registry.npmjs.org/toidentifier/-/toidentifier-1.0.0.tgz",
...@@ -541,18 +637,28 @@ ...@@ -541,18 +637,28 @@
541 "negotiator": "0.6.2" 637 "negotiator": "0.6.2"
542 } 638 }
543 }, 639 },
640 + "ansi-styles": {
641 + "version": "3.2.1",
642 + "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz",
643 + "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==",
644 + "requires": {
645 + "color-convert": "^1.9.0"
646 + }
647 + },
544 "array-flatten": { 648 "array-flatten": {
545 "version": "1.1.1", 649 "version": "1.1.1",
546 "resolved": "https://registry.npmjs.org/array-flatten/-/array-flatten-1.1.1.tgz", 650 "resolved": "https://registry.npmjs.org/array-flatten/-/array-flatten-1.1.1.tgz",
547 "integrity": "sha1-ml9pkFGx5wczKPKgCJaLZOopVdI=" 651 "integrity": "sha1-ml9pkFGx5wczKPKgCJaLZOopVdI="
548 }, 652 },
549 - "basic-auth": { 653 + "async": {
550 - "version": "2.0.1", 654 + "version": "0.9.2",
551 - "resolved": "https://registry.npmjs.org/basic-auth/-/basic-auth-2.0.1.tgz", 655 + "resolved": "https://registry.npmjs.org/async/-/async-0.9.2.tgz",
552 - "integrity": "sha512-NF+epuEdnUYVlGuhaxbbq+dvJttwLnGY+YixlXlME5KpQ5W3CnXA5cVTneY3SPbPDRkcjMbifrwmFYcClgOZeg==", 656 + "integrity": "sha1-rqdNXmHB+JlhO/ZL2mbUx48v0X0="
553 - "requires": { 657 + },
554 - "safe-buffer": "5.1.2" 658 + "balanced-match": {
555 - } 659 + "version": "1.0.0",
660 + "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.0.tgz",
661 + "integrity": "sha1-ibTRmasr7kneFk6gK4nORi1xt2c="
556 }, 662 },
557 "body-parser": { 663 "body-parser": {
558 "version": "1.19.0", 664 "version": "1.19.0",
...@@ -571,11 +677,48 @@ ...@@ -571,11 +677,48 @@
571 "type-is": "~1.6.17" 677 "type-is": "~1.6.17"
572 } 678 }
573 }, 679 },
680 + "brace-expansion": {
681 + "version": "1.1.11",
682 + "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
683 + "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==",
684 + "requires": {
685 + "balanced-match": "^1.0.0",
686 + "concat-map": "0.0.1"
687 + }
688 + },
574 "bytes": { 689 "bytes": {
575 "version": "3.1.0", 690 "version": "3.1.0",
576 "resolved": "https://registry.npmjs.org/bytes/-/bytes-3.1.0.tgz", 691 "resolved": "https://registry.npmjs.org/bytes/-/bytes-3.1.0.tgz",
577 "integrity": "sha512-zauLjrfCG+xvoyaqLoV8bLVXXNGC4JqlxFCutSDWA6fJrTo2ZuvLYTqZ7aHBLZSMOopbzwv8f+wZcVzfVTI2Dg==" 692 "integrity": "sha512-zauLjrfCG+xvoyaqLoV8bLVXXNGC4JqlxFCutSDWA6fJrTo2ZuvLYTqZ7aHBLZSMOopbzwv8f+wZcVzfVTI2Dg=="
578 }, 693 },
694 + "chalk": {
695 + "version": "2.4.2",
696 + "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
697 + "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==",
698 + "requires": {
699 + "ansi-styles": "^3.2.1",
700 + "escape-string-regexp": "^1.0.5",
701 + "supports-color": "^5.3.0"
702 + }
703 + },
704 + "color-convert": {
705 + "version": "1.9.3",
706 + "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
707 + "integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==",
708 + "requires": {
709 + "color-name": "1.1.3"
710 + }
711 + },
712 + "color-name": {
713 + "version": "1.1.3",
714 + "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz",
715 + "integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU="
716 + },
717 + "concat-map": {
718 + "version": "0.0.1",
719 + "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
720 + "integrity": "sha1-2Klr13/Wjfd5OnMDajug1UBdR3s="
721 + },
579 "content-disposition": { 722 "content-disposition": {
580 "version": "0.5.3", 723 "version": "0.5.3",
581 "resolved": "https://registry.npmjs.org/content-disposition/-/content-disposition-0.5.3.tgz", 724 "resolved": "https://registry.npmjs.org/content-disposition/-/content-disposition-0.5.3.tgz",
...@@ -622,6 +765,14 @@ ...@@ -622,6 +765,14 @@
622 "resolved": "https://registry.npmjs.org/ee-first/-/ee-first-1.1.1.tgz", 765 "resolved": "https://registry.npmjs.org/ee-first/-/ee-first-1.1.1.tgz",
623 "integrity": "sha1-WQxhFWsK4vTwJVcyoViyZrxWsh0=" 766 "integrity": "sha1-WQxhFWsK4vTwJVcyoViyZrxWsh0="
624 }, 767 },
768 + "ejs": {
769 + "version": "3.1.5",
770 + "resolved": "https://registry.npmjs.org/ejs/-/ejs-3.1.5.tgz",
771 + "integrity": "sha512-dldq3ZfFtgVTJMLjOe+/3sROTzALlL9E34V4/sDtUd/KlBSS0s6U1/+WPE1B4sj9CXHJpL1M6rhNJnc9Wbal9w==",
772 + "requires": {
773 + "jake": "^10.6.1"
774 + }
775 + },
625 "encodeurl": { 776 "encodeurl": {
626 "version": "1.0.2", 777 "version": "1.0.2",
627 "resolved": "https://registry.npmjs.org/encodeurl/-/encodeurl-1.0.2.tgz", 778 "resolved": "https://registry.npmjs.org/encodeurl/-/encodeurl-1.0.2.tgz",
...@@ -632,6 +783,11 @@ ...@@ -632,6 +783,11 @@
632 "resolved": "https://registry.npmjs.org/escape-html/-/escape-html-1.0.3.tgz", 783 "resolved": "https://registry.npmjs.org/escape-html/-/escape-html-1.0.3.tgz",
633 "integrity": "sha1-Aljq5NPQwJdN4cFpGI7wBR0dGYg=" 784 "integrity": "sha1-Aljq5NPQwJdN4cFpGI7wBR0dGYg="
634 }, 785 },
786 + "escape-string-regexp": {
787 + "version": "1.0.5",
788 + "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz",
789 + "integrity": "sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ="
790 + },
635 "etag": { 791 "etag": {
636 "version": "1.8.1", 792 "version": "1.8.1",
637 "resolved": "https://registry.npmjs.org/etag/-/etag-1.8.1.tgz", 793 "resolved": "https://registry.npmjs.org/etag/-/etag-1.8.1.tgz",
...@@ -674,6 +830,14 @@ ...@@ -674,6 +830,14 @@
674 "vary": "~1.1.2" 830 "vary": "~1.1.2"
675 } 831 }
676 }, 832 },
833 + "filelist": {
834 + "version": "1.0.1",
835 + "resolved": "https://registry.npmjs.org/filelist/-/filelist-1.0.1.tgz",
836 + "integrity": "sha512-8zSK6Nu0DQIC08mUC46sWGXi+q3GGpKydAG36k+JDba6VRpkevvOWUW5a/PhShij4+vHT9M+ghgG7eM+a9JDUQ==",
837 + "requires": {
838 + "minimatch": "^3.0.4"
839 + }
840 + },
677 "finalhandler": { 841 "finalhandler": {
678 "version": "1.1.2", 842 "version": "1.1.2",
679 "resolved": "https://registry.npmjs.org/finalhandler/-/finalhandler-1.1.2.tgz", 843 "resolved": "https://registry.npmjs.org/finalhandler/-/finalhandler-1.1.2.tgz",
...@@ -698,6 +862,11 @@ ...@@ -698,6 +862,11 @@
698 "resolved": "https://registry.npmjs.org/fresh/-/fresh-0.5.2.tgz", 862 "resolved": "https://registry.npmjs.org/fresh/-/fresh-0.5.2.tgz",
699 "integrity": "sha1-PYyt2Q2XZWn6g1qx+OSyOhBWBac=" 863 "integrity": "sha1-PYyt2Q2XZWn6g1qx+OSyOhBWBac="
700 }, 864 },
865 + "has-flag": {
866 + "version": "3.0.0",
867 + "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
868 + "integrity": "sha1-tdRU3CGZriJWmfNGfloH87lVuv0="
869 + },
701 "http-errors": { 870 "http-errors": {
702 "version": "1.7.2", 871 "version": "1.7.2",
703 "resolved": "https://registry.npmjs.org/http-errors/-/http-errors-1.7.2.tgz", 872 "resolved": "https://registry.npmjs.org/http-errors/-/http-errors-1.7.2.tgz",
...@@ -728,6 +897,17 @@ ...@@ -728,6 +897,17 @@
728 "resolved": "https://registry.npmjs.org/ipaddr.js/-/ipaddr.js-1.9.1.tgz", 897 "resolved": "https://registry.npmjs.org/ipaddr.js/-/ipaddr.js-1.9.1.tgz",
729 "integrity": "sha512-0KI/607xoxSToH7GjN1FfSbLoU0+btTicjsQSWQlh/hZykN8KpmMf7uYwPW3R+akZ6R/w18ZlXSHBYXiYUPO3g==" 898 "integrity": "sha512-0KI/607xoxSToH7GjN1FfSbLoU0+btTicjsQSWQlh/hZykN8KpmMf7uYwPW3R+akZ6R/w18ZlXSHBYXiYUPO3g=="
730 }, 899 },
900 + "jake": {
901 + "version": "10.8.2",
902 + "resolved": "https://registry.npmjs.org/jake/-/jake-10.8.2.tgz",
903 + "integrity": "sha512-eLpKyrfG3mzvGE2Du8VoPbeSkRry093+tyNjdYaBbJS9v17knImYGNXQCUV0gLxQtF82m3E8iRb/wdSQZLoq7A==",
904 + "requires": {
905 + "async": "0.9.x",
906 + "chalk": "^2.4.2",
907 + "filelist": "^1.0.1",
908 + "minimatch": "^3.0.4"
909 + }
910 + },
731 "media-typer": { 911 "media-typer": {
732 "version": "0.3.0", 912 "version": "0.3.0",
733 "resolved": "https://registry.npmjs.org/media-typer/-/media-typer-0.3.0.tgz", 913 "resolved": "https://registry.npmjs.org/media-typer/-/media-typer-0.3.0.tgz",
...@@ -761,23 +941,12 @@ ...@@ -761,23 +941,12 @@
761 "mime-db": "1.44.0" 941 "mime-db": "1.44.0"
762 } 942 }
763 }, 943 },
764 - "morgan": { 944 + "minimatch": {
765 - "version": "1.10.0", 945 + "version": "3.0.4",
766 - "resolved": "https://registry.npmjs.org/morgan/-/morgan-1.10.0.tgz", 946 + "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.0.4.tgz",
767 - "integrity": "sha512-AbegBVI4sh6El+1gNwvD5YIck7nSA36weD7xvIxG4in80j/UoK8AEGaWnnz8v1GxonMCltmlNs5ZKbGvl9b1XQ==", 947 + "integrity": "sha512-yJHVQEhyqPLUTgt9B83PXu6W3rx4MvvHvSUvToogpwoGDOUQ+yDrR0HRot+yOCdCO7u4hX3pWft6kWBBcqh0UA==",
768 "requires": { 948 "requires": {
769 - "basic-auth": "~2.0.1", 949 + "brace-expansion": "^1.1.7"
770 - "debug": "2.6.9",
771 - "depd": "~2.0.0",
772 - "on-finished": "~2.3.0",
773 - "on-headers": "~1.0.2"
774 - },
775 - "dependencies": {
776 - "depd": {
777 - "version": "2.0.0",
778 - "resolved": "https://registry.npmjs.org/depd/-/depd-2.0.0.tgz",
779 - "integrity": "sha512-g7nH6P6dyDioJogAAGprGpCtVImJhpPk/roCzdb3fIh61/s/nPsfR6onyMwkCAR/OlC3yBC0lESvUoQEAssIrw=="
780 - }
781 } 950 }
782 }, 951 },
783 "ms": { 952 "ms": {
...@@ -798,11 +967,6 @@ ...@@ -798,11 +967,6 @@
798 "ee-first": "1.1.1" 967 "ee-first": "1.1.1"
799 } 968 }
800 }, 969 },
801 - "on-headers": {
802 - "version": "1.0.2",
803 - "resolved": "https://registry.npmjs.org/on-headers/-/on-headers-1.0.2.tgz",
804 - "integrity": "sha512-pZAE+FJLoyITytdqK0U5s+FIpjN0JP3OzFi/u8Rx+EV5/W+JTWGXG8xFzevE7AjBfDqHv/8vL8qQsIhHnqRkrA=="
805 - },
806 "parseurl": { 970 "parseurl": {
807 "version": "1.3.3", 971 "version": "1.3.3",
808 "resolved": "https://registry.npmjs.org/parseurl/-/parseurl-1.3.3.tgz", 972 "resolved": "https://registry.npmjs.org/parseurl/-/parseurl-1.3.3.tgz",
...@@ -901,6 +1065,14 @@ ...@@ -901,6 +1065,14 @@
901 "resolved": "https://registry.npmjs.org/statuses/-/statuses-1.5.0.tgz", 1065 "resolved": "https://registry.npmjs.org/statuses/-/statuses-1.5.0.tgz",
902 "integrity": "sha1-Fhx9rBd2Wf2YEfQ3cfqZOBR4Yow=" 1066 "integrity": "sha1-Fhx9rBd2Wf2YEfQ3cfqZOBR4Yow="
903 }, 1067 },
1068 + "supports-color": {
1069 + "version": "5.5.0",
1070 + "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
1071 + "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
1072 + "requires": {
1073 + "has-flag": "^3.0.0"
1074 + }
1075 + },
904 "toidentifier": { 1076 "toidentifier": {
905 "version": "1.0.0", 1077 "version": "1.0.0",
906 "resolved": "https://registry.npmjs.org/toidentifier/-/toidentifier-1.0.0.tgz", 1078 "resolved": "https://registry.npmjs.org/toidentifier/-/toidentifier-1.0.0.tgz",
......
...@@ -14,7 +14,7 @@ ...@@ -14,7 +14,7 @@
14 "author": "Hyoseob Song", 14 "author": "Hyoseob Song",
15 "license": "MIT", 15 "license": "MIT",
16 "dependencies": { 16 "dependencies": {
17 - "express": "^4.17.1", 17 + "ejs": "^3.1.5",
18 - "morgan": "^1.10.0" 18 + "express": "^4.17.1"
19 } 19 }
20 } 20 }
......
1 <!DOCTYPE html> 1 <!DOCTYPE html>
2 -<html lang="ko"> 2 +<html lang="en">
3 3
4 <head> 4 <head>
5 <meta charset="UTF-8"> 5 <meta charset="UTF-8">
......
1 <!DOCTYPE html> 1 <!DOCTYPE html>
2 -<html lang="ko"> 2 +<html lang="en">
3 3
4 <head> 4 <head>
5 <meta charset="UTF-8"> 5 <meta charset="UTF-8">
...@@ -11,20 +11,12 @@ ...@@ -11,20 +11,12 @@
11 <strong> Culture Gallery</strong> 11 <strong> Culture Gallery</strong>
12 12
13 <h1> 13 <h1>
14 - 수정 기록 | 수정 날짜 : 2020-12-03 14 + 수정 기록 | 수정 날짜 : 2020-12-02
15 </h1> 15 </h1>
16 <div> 16 <div>
17 <h2> 17 <h2>
18 - 12/03
19 - nodejs 서버로 javascript 파일 및 webpage 이동 방법 구현하기
20 - router, content, public 으로 프로젝트 전체 구조 재분할
21 - main page design 구현 -> info, login 등으로 link 필요
22 - 카카오 API 응용 -> 위치 정보 및 공연 컨텐츠 받아서 지도에 마킹, 카카오톡으로 보내기
23 - 12/02
24 웹사이트 node에 연결 -> 디자인 구상 필요 18 웹사이트 node에 연결 -> 디자인 구상 필요
25 api database 구축 -> 카테고리별로 가공해서 받아오기 19 api database 구축 -> 카테고리별로 가공해서 받아오기
26 -
27 -
28 </h2> 20 </h2>
29 </div> 21 </div>
30 <div> 22 <div>
......
1 +*
2 +{
3 + margin: 0;
4 + padding: 0;
5 +}
6 +
7 +
8 +.nav-bar
9 +{
10 + background: #000;
11 + height: 80px;
12 +}
13 +
14 +.logo{
15 + background-color: #fff;
16 + margin: 10px 50px;
17 + height: 60px;
18 +}
19 +
20 +.menu{
21 + float: right;
22 + list-style: none;
23 + margin:20px;
24 +}
25 +
26 +.menu li{
27 + display: inline-block;
28 + margin: 10px 5px;
29 +}
30 +
31 +.menu li a{
32 + text-decoration: none;
33 + color: #fff;
34 + padding: 5px 10px;
35 + font-family: sans-serif;
36 + letter-spacing: 2px;
37 + border: 1px solid #fff;
38 +}
39 +
40 +.menu li a:hover{
41 + background: #fff;
42 + transition: .4s;
43 + color: #000;
44 +}
45 +
46 +.welcome{
47 + position:relative;
48 + text-align:center;
49 + font-family: sans-serif;
50 + color:#000;
51 + top: 300px;
52 +}
53 +
54 +.welcome h1{
55 + font-size: 42px;
56 + margin: 25px;
57 +}
58 +
1 +*
2 +{
3 + margin: 0;
4 + padding: 0;
5 +}
6 +
7 +header
8 +{
9 + background-image:linear-gradient(rgba(0,0,0,0.5),rgba(0,0,100,0.5)), url(/images/back1.jpg);
10 + height: 100vh;
11 + background-size: cover;
12 + background-position: center;
13 + background-repeat: no-repeat;
14 + transition: 5s;
15 +
16 + animation-name: animate;
17 + animation-direction: alternate-reverse;
18 + animation-duration: 30s;
19 + animation-fill-mode:forwards;
20 + animation-iteration-count: infinite;
21 + animation-play-state: running;
22 + animation-timing-function:ease-in-out;
23 +}
24 +@keyframes animate{
25 + 0%{
26 + background-image:linear-gradient(rgba(0,0,0,0.5),rgba(0,0,100,0.5)), url(/images/back1.jpg);
27 + }
28 + 33%{
29 + background-image:linear-gradient(rgba(0,0,0,0.5),rgba(0,0,100,0.5)), url(/images/back2.jpg);
30 +
31 + }
32 + 66%{
33 + background-image:linear-gradient(rgba(0,0,0,0.5),rgba(0,0,100,0.5)), url(/images/back3.jpg);
34 +
35 + }
36 +}
37 +.nav-bar
38 +{
39 + background: rgb(0,0,0,0.5);
40 + height: 80px;
41 +}
42 +
43 +.logo{
44 + background-color: #fff;
45 + margin: 10px 50px;
46 + height: 60px;
47 +}
48 +
49 +.menu{
50 + float: right;
51 + list-style: none;
52 + margin:20px;
53 +}
54 +
55 +.menu li{
56 + display: inline-block;
57 + margin: 10px 5px;
58 +}
59 +
60 +.menu li a{
61 + text-decoration: none;
62 + color: #fff;
63 + padding: 5px 10px;
64 + font-family: sans-serif;
65 + letter-spacing: 2px;
66 + border: 1px solid #fff;
67 +}
68 +
69 +.menu li a:hover{
70 + background: #fff;
71 + transition: .4s;
72 + color: #000;
73 +}
74 +
75 +.welcome{
76 + position:relative;
77 + text-align:center;
78 + font-family: sans-serif;
79 + color:#fff;
80 + top: 300px;
81 +}
82 +
83 +.welcome h1{
84 + font-size: 42px;
85 + margin: 25px;
86 +}
87 +
88 +.btn{
89 + font-size:18px;
90 + letter-spacing: 2px;
91 + margin:5px;
92 + padding:7px 10px;
93 + text-decoration: none;
94 + border: 1px solid #fff;
95 +}
96 +
97 +.btn{
98 + color:#fff;
99 +
100 +}
101 +.btn:hover{
102 + background: #fff;
103 + color: #000;
104 + transition: .4s;
105 +}
...\ No newline at end of file ...\ No newline at end of file
...@@ -2,8 +2,11 @@ var express = require('express'); ...@@ -2,8 +2,11 @@ var express = require('express');
2 var router = express.Router(); 2 var router = express.Router();
3 3
4 /* GET home page. */ 4 /* GET home page. */
5 -router.get('/', function(req, res, next) { 5 +router.get('/', function (req, res, next) {
6 - res.render('index', { title: 'Express' }); 6 + res.render('/public/html/main', { title: 'My Gallery' });
7 }); 7 });
8 8
9 +router.get('/login', function (req, res, next) {
10 + res.render('index', { title: 'Express' });
11 +})
9 module.exports = router; 12 module.exports = router;
......
1 +var express = require('express');
2 +var router = express.Router();
3 +var fs = require('fs');
4 +//로그인 페이지에서 실행됨 : title 할당하고 login.html 띄워줌.
5 +router.get('/login', function (req, res, next) {
6 + res.render('login.html', { title: 'Login2' });
7 + var url = request.url;
8 + if (url == '/') {
9 + url = 'send.html';
10 + }
11 + if (url == '/loginmainpage') {
12 + url = 'loginmainpage.html';
13 + }
14 + response.writeHead(200);
15 + response.end(fs.readFileSync(__dirname + url));
16 + console.log('로그인 페이지 접속 성공');
17 +});
18 +module.exports = router;
1 +var express = require('express');
2 +var router = express.Router();
3 +
4 +//루트 페이지 (메인페이지)에서 실행됨 : title 할당하고 main.html 띄워줌.
5 +router.get('/', function (req, res, next) {
6 + res.render('main.html', { title: 'Culture Gallery' });
7 + console.log('main 접속 성공');
8 +});
9 +
10 +/* GET home page. */
11 +router.get('/login', function (req, res, next) {
12 + res.render('login.html', { title: 'Login1' });
13 + console.log('로그인 페이지 접속 성공');
14 +});
15 +module.exports = router;
...\ No newline at end of file ...\ No newline at end of file
1 +function sendLink(){
2 + Kakao.init('0678e32dab56db1c52ac63ab4ccb7663')
3 + Kakao.Link.sendDefault({
4 + objectType: 'feed',
5 + content:{
6 + title: "관심있는 공연 정보",
7 + description: '주소-> http://naver.com',
8 + imageUrl:'http://k.kakaocdn.net/dn/Q2iNx/btqgeRgV54P/VLdBs9cvyn8BJXB3o7N8UK/kakaolink40_original.png',
9 + link:{
10 + mobileWebUrl: 'http://naver.com',
11 + webUrl: 'http://naver.com',
12 + },
13 + },
14 + buttons: [
15 + {
16 + title: '웹으로 보기',
17 + link: {
18 + mobileWebUrl: 'http://naver.com',
19 + webUrl: 'http://naver.com',
20 + },
21 + },
22 + {
23 + title: '웹으로 보기',
24 + link: {
25 + mobileWebUrl: 'http://naver.com',
26 + webUrl: 'http://naver.com',
27 + },
28 + },
29 + ],
30 + })
31 +};
...\ No newline at end of file ...\ No newline at end of file
1 +<html>
2 +
3 +<head>
4 + <title>로그인 페이지</title>
5 + <link rel="stylesheet" href='/stylesheets/login_style.css' type="text/css">
6 + <script src="https://developers.kakao.com/sdk/js/kakao.js"></script>
7 +
8 +</head>
9 +
10 +<body>
11 + <header>
12 + <div class="nav-bar">
13 + <img src="../images/camera.png" alt="" class="logo">
14 +
15 + <ul class="menu">
16 + <li><a href="/">Home</a></li>
17 + <li><a href="">Services</a></li>
18 + <li><a href="">Portfolio</a></li>
19 + <li><a href="">Testimonimal</a></li>
20 + <li><a href="">Career</a></li>
21 + <li><a href="">Contact</a></li>
22 + </ul>
23 +
24 + </div>
25 + <div class="welcome">
26 +
27 + <h1>로그인</h1>
28 + <a id="kakao-login-btn"></a>
29 +
30 + </div>
31 +
32 + </header>
33 +</body>
34 +<script>
35 + Kakao.init('0678e32dab56db1c52ac63ab4ccb7663');
36 +
37 + console.log(Kakao.isInitialized());
38 +
39 + Kakao.Auth.createLoginButton({
40 + container: '#kakao-login-btn',
41 + success: function (authObj) {
42 + console.log(JSON.stringify(authObj));
43 + alert(JSON.stringify(authObj));//authObj -> 토큰임.
44 + },
45 + fail: function (err) {
46 + alert(JSON.stringify(err));
47 + }
48 + })
49 +</script>
50 +
51 +</html>
...\ No newline at end of file ...\ No newline at end of file
1 +<!DOCTYPE html>
2 +<html>
3 + <head>
4 + <meta charset="utf-8"/>
5 + <title>login page title</title>
6 + <script src="https://developers.kakao.com/sdk/js/kakao.js"></script>
7 +
8 + </head>
9 +<body>
10 + <a id="kakao-login-btn"></a>
11 + <a href="http://developers.kakao.com/logout"></a>
12 + <script>
13 + Kakao.init('0678e32dab56db1c52ac63ab4ccb7663');
14 +
15 + console.log(Kakao.isInitialized());
16 +
17 + Kakao.Auth.createLoginButton({
18 + container: '#kakao-login-btn',
19 + success: function(authObj){
20 + console.log(JSON.stringify(authObj));
21 + alert(JSON.stringify(authObj));//authObj -> 토큰임.
22 + redirectUrl
23 + },
24 + fail: function(err){
25 + alert(JSON.stringify(err));
26 + }
27 + })
28 + console.log('hi');
29 + Kakao.Link.createDefaultButton({
30 + container: ".kakao-link",
31 + objectType: "feed",
32 + content:{
33 + title: "안녕하세요",
34 + description: "반갑습니다.",
35 + link:{
36 + webUrl: "https://www.naver.com/",
37 + mobileWebUrl: "https://www.naver.com/"
38 + },
39 + },
40 + })
41 + function kakaoLogout(){
42 + Kakao.Auth.logout(function(response){
43 + alert(response+'logout');
44 + Kakao.API.request({
45 + url: '/v1/user/unlink',
46 + success: function(response) {
47 + console.log(response);
48 + },
49 + fail: function(error) {
50 + console.log(error);
51 + console.log("error");
52 + },
53 + })
54 + })
55 + }
56 +</script>
57 +<script>
58 + console.log('hi');
59 + Kakao.Link.createDefaultButton({
60 + container: ".kakao-link",
61 + objectType: "feed",
62 + content:{
63 + title: "안녕하세요",
64 + description: "반갑습니다.",
65 + link:{
66 + webUrl: "https://www.naver.com/",
67 + mobileWebUrl: "https://www.naver.com/"
68 + },
69 + },
70 + })
71 +</script>
72 +
73 +<a onclick="kakaoLogout();">카카오 로그아웃</a>
74 +</body>
75 +</html>
1 +<!DOCTYPE html>
2 +<html>
3 + <head>
4 + <title>login main page title</title>
5 + </head>
6 +</html>
...\ No newline at end of file ...\ No newline at end of file
1 +<html>
2 +
3 +<head>
4 + <title>Webpage Design In HTML and CSS</title>
5 + <link rel="stylesheet" href='/stylesheets/main_style.css' type="text/css">
6 +</head>
7 +
8 +<body>
9 + <header>
10 + <div class="nav-bar">
11 + <img src="../images/camera.png" alt="" class="logo">
12 +
13 + <ul class="menu">
14 + <li><a href="">Home</a></li>
15 + <li><a href="">Services</a></li>
16 + <li><a href="">Portfolio</a></li>
17 + <li><a href="">Testimonimal</a></li>
18 + <li><a href="">Career</a></li>
19 + <li><a href="">Contact</a></li>
20 + </ul>
21 +
22 + </div>
23 + <div class="welcome">
24 +
25 + <h1>어떤 공연을 찾으시나요?</h1>
26 + <a href="#" class="btn btn1">나의 근처 공연</a>
27 + <a href="#" class="btn btn2">검색하기</a>
28 + <a href="login" class="btn btn3">로그인</a>
29 + </div>
30 +
31 + </header>
32 +</body>
33 +
34 +</html>
...\ No newline at end of file ...\ No newline at end of file
1 +<!DOCTYPE html>
2 +<html>
3 + <head>
4 + <meta charset="utf-8"/>
5 + <title>send page title</title>
6 + <script src="https://developers.kakao.com/sdk/js/kakao.js"></script>
7 + <script src="send.js"></script>
8 + </head>
9 + <body>
10 + <a onclick="sendLink()">보내기</a>
11 + </body>
12 +</html>
...\ No newline at end of file ...\ No newline at end of file