민재기 / web_service

Go to a project
Toggle navigation Toggle navigation pinning
민재기
d6c11883 1 parent 54f43f79

all file

Inline Side-by-side
Showing 36 changed files with 1022 additions and 21 deletions
No preview for this file type
div {
overflow-x:auto;
}
table, th, td {
border: 2px solid black;
}
th, td{
padding: 10px;
border-bottom: 1px solid #ddd;
}
table{
border-collapse: collapse;
}
th{
background-color: #EB2933;
color: white;
text-align: center;
}
td{
width: 300px;
}
td.picture{
text-align: center;
}
a:link, a:visited {
text-decoration: none;
color:#FF6600;
}
a:hover, a:active {
text-decoration: none;
color: #00ff99;
}
div {
overflow-x:auto;
}
table, th, td {
border: 2px solid black;
}
th, td{
padding: 10px;
border-bottom: 1px solid #ddd;
}
table{
border-collapse: collapse;
}
th{
background-color: #EB2933;
color: white;
text-align: center;
}
td{
width: 300px;
}
td.picture{
text-align: center;
}
a:link, a:visited {
text-decoration: none;
color:#FF6600;
}
a:hover, a:active {
text-decoration: none;
color: #00ff99;
}
.img{
width: 100%;
}
@media only screen and (max-device-width : 768px) {
.img{
width: 80%;
}
th{
background-color: #4641D9;
color: white;
text-align: center;
width: 70px;
}
td{
width: 230px;
}
}
@media (max-width : 768px) {
.img{
width: 80%;
}
th{
background-color: #4641D9;
color: white;
text-align: center;
width: 70px;
}
td{
width: 230px;
}
}
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<style>
.main{
width: 100%;
}
div {
float: left;
margin-right:2%;
}
.image{
width: 34%;
}
.images{
width: 110%;
}
.team{
width: 20%;
}
.content{
width: 40%;
}
</style>
</head>
<body>
<div class="main">
<div class="image">
<img class="images" src="https://image-proxy.namuwikiusercontent.com/r/http%3A%2F%2Fupload.wikimedia.org%2Fwikipedia%2Fen%2Fthumb%2F1%2F15%2FBundesliga_logo.svg%2F637px-Bundesliga_logo.svg.png">
</div>
<div class="team">
<ul>
<li>팀 구성
<ul>
<li>다름슈타트
</li>
<li>도르트문트
</li>
<li>라이프치히
</li>
<li>레버쿠젠
</li>
<li>마인츠
</li>
<li>묀헨글라트바흐
</li>
<li>바이에른
</li>
<li>볼프스부르크
</li>
<li>브레멘
</li>
<li>샬케 04
</li>
<li>아우크스부르크
</li>
<li>잉골슈타트
</li>
<li>쾰른
</li>
<li>프라이부르크
</li>
<li>프랑크푸르트
</li>
<li>함부르크
</li>
<li>헤르타 BSC
</li>
<li>호펜하임
</li>
</ul>
</li>
</ul>
</div>
<div class="content">
<ul>
<li>개요 : 세계에서 직관 평균 관중이 가장 많은 축구 리그 분데스리가는 본래 독일과 오스트리아의 스포츠 리그를 뜻하는 말이다. 핸드볼, 야구, 배구, 농구, 하키, 럭비 리그 등에도 분데스리가라는 이름을 쓰지만, 우리나라를 비롯하여 국제적으로도 분데스리가라고 하면 일반적으로 독일의 프로축구리그(푸스발-분데스리가 : Fußball-Bundesliga)를 뜻한다. 뜻은 Bundes(연방)와 Liga(리그)가 합쳐진 말이다.
</li>
<li>
공식 홈페이지 : <a href="http://www.bundesliga.com/" target="_blank">분데스리가 공식 홈페이지</a>
</li>
<li>
<a href="http://sports.news.naver.com/wfootball/record/index.nhn?category=bundesliga&tab=team" target="_blank">순위보기</a>
</li>
<li>
현재 순위 :
<ol>
<li>
<a href="https://fcbayern.com/de" target="_blank">FC 바이에른 뮌헨</a>
</li>
<li>
<a href="http://www.dierotenbullen.com/" target="_blank">RB 라이프치히</a>
</li>
<li>
<a href="http://www.bvb.de/" target="_blank">보루시아 도르트문트</a>
</li>
</ol>
</li>
</ul>
<p>cf. 2017년 3월 16일을 기준으로 1부 리그 구성만으로 작성하였습니다.</p>
<p><a href="https://namu.wiki/go/%EB%B6%84%EB%8D%B0%EC%8A%A4%EB%A6%AC%EA%B0%80" target="_blank">위키 항목 참조</a></p>
</div>
</div>
</body>
</html>
<html>
<head>
<script type="text/javascript">
document.write ("<h1>Hello World!</h1>");
function message(){
alert ("Bomb!");
}
</script>
</head>
<body onload="message()">
<script type="text/javascript" src="js/ex10_1.js"></script>
</body>
</html>
<html>
<body>
<p id="demo"></p>
<script type="text/javascript">
document.getElementById("demo").innerHTML = Date(); //현재시간 출력
</script>
<!-- 스크립트를 head에 넣게 되면 innerHTML 이 Date를 못받는 현상이 일어남 -->
</body>
</html>
<html>
<head>
</head>
<body>
<p id="demo"></p>
<script>
var value = Math.PI;
document.getElementById("demo").innerHTML = Math.round(Math.sqrt(value));
</script>
</body>
</html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<script type="text/javascript" src="js/ex10_4.js"></script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>구구단</title>
</head>
<body>
<h1>** 구구단 출력 **</h1>
<span>단 :
<select id="dan_num" onchange="gugu(document.getElementById('dan_num').value)">
<option value="2">2단</option>
<option value="3">3단</option>
<option value="4">4단</option>
<option value="5">5단</option>
<option value="6">6단</option>
<option value="7">7단</option>
<option value="8">8단</option>
<option value="9">9단</option>
</select>
<input type="button" name="deleteDan" value="삭제" onclick="deletePrint()">
</span>
<p id="demo"></p>
<script type="text/javascript" src="js/ex10_5.js"></script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
alert("list length : "
+ ($("li:last").index() + 1));
$("li").each(function(){
alert($(this).text())
});
});
});
</script>
</head>
<body>
<button>Alert the value of each list item</button>
<ul>
<li>Coffee</li>
<li>Milk</li>
<li>Soda</li>
<li>test</li>
</ul>
</body>
</html>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>jQuery Test</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js">
</script>
<style type="text/css">
.section {
padding:5px;
margin:5px;
border:1px solid #eeeeee;
}
div#result{
border:1px solid red;
background:#EEEEEE;
padding:10px;
margin:10px;
}
</style>
<script type="text/javascript">
$(function(){
$("#result").append($("#fruits").html() + "<p>");
$("#result").append($("#fruits").text() + "<p>");
$("#result").append($("#channel").val() + "<p>");
$("#result").append($("#a:last").css("margin-top") + "<p>");
$("a").each(function(idx){
$("#result").append("a" + idx + ":" + $(this).attr("href")+ "<br>");
});
$("#id").val("아이디");
$("#pwd").val("123");
$("input[type='checkbox']").filter("[value='soccer']").attr('checked', 'checked');
$("#fruits").find("li:first").text("사과");
});
</script>
</head>
<body>
<div class="section">
<ul id="fruits">
<li>Apple</li>
<li>Orange</li>
<li>Melon</li>
</ul>
</div>
<div class="section">
<a href="http://www.google.com">Google</a>
<a href="http://www.apple.com">Apple</a>
<a href="http://www.microsoft.com">Microsoft</a>
<a href="http://www.oracle.com">Oracle</a>
</div>
<div class="section">
<form id="test">
<input type="text" name="id" id="id"><br>
<input type="password" name="pwd" id="pwd"><br>
<select id="channel" name="channel">
<option value="kbs">KBS</option>
<option value="mbc">MBC</option>
<option value="sbs">SBS</option>
</select>
<p>
<input type="checkbox" name="hobby" value="baseball">야구
<input type="checkbox" name="hobby" value="baskeyball">농구
<input type="checkbox" name="hobby" value="soccer">축구
</p>
<p>
<input type="button" id="btn1" value="버튼1">
<input type="button" id="btn3" value="버튼2">
<input type="button" id="btn2" value="버튼3">
</p>
</form>
</div>
<div id="result">
<h3>RESULT</h3>
</div>
</body>
</html>
"use strict";
console.log("Hello, World"); // 콘솔창에 출력
document.write ("Hello, World"); // 화면에 출력
"use strict"
alert("test");
window.open ('','_self','width=200, height=100');
if (confirm ("확인을 누르시면 'history.back()'만 수행합니다.")){
history.back();
}else{
var name = prompt("Enter Name");
alert (navigator.userAgent);
location.assign("http://www.naver.com/");
//location.reload();
}
"use strict"
function gugu(x){
var dan = x;
var i;
var text="";
for (i = 1 ; i < 10 ; i++){
text = text + x + " * " + i + " = " + dan *i + "<br>";
}
document.getElementById("demo").innerHTML = text;
}
function deletePrint (){
document.getElementById("demo").innerHTML = "";
}
"use strict";
function Queue (){
this.arr = new Array();
this.leng = 0;
this.push = push;
this.pop = pop;
}
function push(x) {
this.arr[this.leng++] = x;
}
function pop (){
var ret;
ret = this.arr[0];
for (var i = 0 ; i < this.leng; i++){
this.arr[i] = this.arr[i+1];
}
this.leng--;
return ret;
}
var queue = new Queue();
queue.push(1);
queue.push(2);
queue.push(3);
queue.push(4);
queue.push(5);
console.log(queue.pop());
console.log(queue.pop());
console.log(queue.pop());
console.log(queue.pop());
console.log(queue.pop());
console.log(queue.pop());
"use strict";
function Stack (){
this.arr = new Array();
this.leng = 0;
this.push = push;
this.pop = pop;
}
function push(x) {
this.arr[this.leng++] = x;
}
function pop (){
return this.arr[this.leng--];
}
var stack = new Stack();
stack.push(1);
stack.push(2);
stack.push(3);
stack.push(4);
stack.push(5);
console.log(stack.pop());
console.log(stack.pop());
console.log(stack.pop());
console.log(stack.pop());
console.log(stack.pop());
console.log(stack.pop());
"use strcit"
var http = require('http'),
path = require('path'),
url = require('url'),
fs = require('fs');
var DOCUMENT_ROOT = "../";
var server = http.createServer(function(req,res){
var reqPath = url.parse(req.url).pathname;
if (reqPath == "/"){
reqPath = "quiz03.html";
}
var fullPath = path.join(process.cwd(), DOCUMENT_ROOT, reqPath);
fs.readFile(fullPath, "binary", function (err, file){
if (err){
if(err.code == "ENOENT"){
console.log ("SEND 404 for " + req.url);
res.writeHeader(404, {"Content-Type": "text/html"});
res.write ("<h1>Not found</h1>");
res.end();
} else{
console.error ("Error", err);
res.writeHeader(500, {"Content-Type": "text/plain"});
res.write(err + "\n");
res.end();
}
}
else{
console.log ("SEND 200 for " + req.url);
res.writeHeader(200);
res.write (file, "binary");
res.end();
}
});
});
server.listen(3000, function(){
console.log("Sever listeining on http://localhost:3000");
})
# Logs
logs
*.log
# Runtime data
pids
*.pid
*.seed
# Directory for instrumented libs generated by jscoverage/JSCover
lib-cov
# Coverage directory used by tools like istanbul
coverage
# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
.grunt
# node-waf configuration
.lock-wscript
# Compiled binary addons (http://nodejs.org/api/addons.html)
build/Release
# Dependency directory
# https://docs.npmjs.com/cli/shrinkwrap#caveats
node_modules
# Debug log from npm
npm-debug.log
var express = require('express');
var path = require('path');
var favicon = require('serve-favicon');
var logger = require('morgan');
var cookieParser = require('cookie-parser');
var bodyParser = require('body-parser');
var sassMiddleware = require('node-sass-middleware');
var index = require('./routes/index');
var users = require('./routes/users');
var app = express();
// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'ejs');
// uncomment after placing your favicon in /public
//app.use(favicon(path.join(__dirname, 'public', 'favicon.ico')));
app.use(logger('dev'));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(sassMiddleware({
src: path.join(__dirname, 'public'),
dest: path.join(__dirname, 'public'),
indentedSyntax: true, // true = .sass and false = .scss
sourceMap: true
}));
app.use(express.static(path.join(__dirname, 'public')));
app.use('/', index);
app.use('/users', users);
// catch 404 and forward to error handler
app.use(function(req, res, next) {
var err = new Error('Not Found');
err.status = 404;
next(err);
});
// error handler
app.use(function(err, req, res, next) {
// set locals, only providing error in development
res.locals.message = err.message;
res.locals.error = req.app.get('env') === 'development' ? err : {};
// render the error page
res.status(err.status || 500);
res.render('error');
});
module.exports = app;
#!/usr/bin/env node
/**
* Module dependencies.
*/
var app = require('../app');
var debug = require('debug')('ex08-3:server');
var http = require('http');
/**
* Get port from environment and store in Express.
*/
var port = normalizePort(process.env.PORT || '3000');
app.set('port', port);
/**
* Create HTTP server.
*/
var server = http.createServer(app);
/**
* Listen on provided port, on all network interfaces.
*/
server.listen(port);
server.on('error', onError);
server.on('listening', onListening);
/**
* Normalize a port into a number, string, or false.
*/
function normalizePort(val) {
var port = parseInt(val, 10);
if (isNaN(port)) {
// named pipe
return val;
}
if (port >= 0) {
// port number
return port;
}
return false;
}
/**
* Event listener for HTTP server "error" event.
*/
function onError(error) {
if (error.syscall !== 'listen') {
throw error;
}
var bind = typeof port === 'string'
? 'Pipe ' + port
: 'Port ' + port;
// handle specific listen errors with friendly messages
switch (error.code) {
case 'EACCES':
console.error(bind + ' requires elevated privileges');
process.exit(1);
break;
case 'EADDRINUSE':
console.error(bind + ' is already in use');
process.exit(1);
break;
default:
throw error;
}
}
/**
* Event listener for HTTP server "listening" event.
*/
function onListening() {
var addr = server.address();
var bind = typeof addr === 'string'
? 'pipe ' + addr
: 'port ' + addr.port;
debug('Listening on ' + bind);
}
{
"name": "ex08-3",
"version": "0.0.0",
"private": true,
"scripts": {
"start": "node ./bin/www"
},
"dependencies": {
"body-parser": "~1.17.1",
"cookie-parser": "~1.4.3",
"debug": "~2.6.3",
"ejs": "~2.5.6",
"express": "~4.15.2",
"morgan": "~1.8.1",
"node-sass-middleware": "0.9.8",
"serve-favicon": "~2.4.2"
}
}
body {
padding: 50px;
font: 14px "Lucida Grande", Helvetica, Arial, sans-serif; }
a {
color: #00B7FF; }
/*# sourceMappingURL=style.css.map */
\ No newline at end of file
{
"version": 3,
"file": "style.css",
"sources": [
"style.sass"
],
"mappings": "AAAA,AAAA,IAAI,CAAC;EACH,OAAO,EAAE,IAAK;EACd,IAAI,EAAE,kDAAmD,GAAG;;AAE9D,AAAA,CAAC,CAAC;EACA,KAAK,EAAE,OAAQ,GAAG",
"names": []
}
\ No newline at end of file
body
padding: 50px
font: 14px "Lucida Grande", Helvetica, Arial, sans-serif
a
color: #00B7FF
var express = require('express');
var router = express.Router();
/* GET home page. */
router.get('/', function(req, res, next) {
res.render('index', { title: 'Express' });
});
module.exports = router;
var express = require('express');
var router = express.Router();
/* GET users listing. */
router.get('/', function(req, res, next) {
res.send('respond with a resource');
});
module.exports = router;
<h1><%= message %></h1>
<h2><%= error.status %></h2>
<pre><%= error.stack %></pre>
<!DOCTYPE html>
<html>
<head>
<title><%= title %></title>
<link rel='stylesheet' href='/stylesheets/style.css' />
</head>
<body>
<div>
<image src="https://s3-us-west-2.amazonaws.com/devcode/media/blog/que-es-nodejs.png">
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
</head>
<body>
<script type="text/javascript" src="js/queue.js"></script>
</body>
</html>
......@@ -5,37 +5,26 @@
<title>[Quiz01]2012104083 민재기
</title>
<style>
th{
text-size: 2em;
}
</style>
</head>
<body>
<div>
<table border="1">
<tr>
<th>이름
</th>
<td>
민재기
</td>
<th>이름</th>
<td>민재기</td>
</tr>
<tr>
<th>생년월일
</th>
<td>
1993년 7월 2일
</td>
<th>생년월일</th>
<td>1993년 7월 2일</td>
</tr>
<tr>
<th>전화번호
</th>
<td>
010-5795-5605
<th>전화번호</th>
<td>010-5795-5605
</td>
</tr>
<tr>
<th>요즘 즐겨 하는것
</th>
<th>요즘 즐겨 하는것</th>
<td>
<ul>
<li>유튜브 게임 채널 보기
......@@ -56,12 +45,12 @@
</td>
</tr>
<tr>
<th>좋아하는 팀 사진
</th>
<th>좋아하는 팀 사진</th>
<td>
<image src="http://mblogthumb3.phinf.naver.net/20160903_162/yj120011_1472905432644QK9gz_PNG/1410521415_fc-barcelona-256.png?type=w2">
</td>
</tr>
</table>
</div>
</body>
</html>
......
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>[Quiz02]2012104083 민재기</title>
<link href="css/quiz02.css" rel="stylesheet" type="text/css">
</head>
<body>
<div>
<table>
<tr>
<th>이름</th>
<td>민재기</td>
</tr>
<tr>
<th>생년월일</th>
<td>1993년 7월 2일</td>
</tr>
<tr>
<th>전화번호</th>
<td>010-5795-5605
</td>
</tr>
<tr>
<th>요즘 즐겨 하는것</th>
<td>
<ul>
<li>유튜브 게임 채널 보기
<ul>
<li>
<a href="https://www.youtube.com/channel/UCHsK9gl5aU0F3umrU4Zn_sA" target="_blank">해당 채널 바로가기</a>
</li>
</ul>
</li>
<li>좋아하는 축구팀 하이라이트 보기
<ul>
<li>
<a href="http://sports.news.naver.com/wfootball/vod/index.nhn?uCategory=wfootball&category=primera&listType=team&teamCode=26300" target="_blank">하이라이트 바로가기</a>
</li>
</ul>
</li>
</ul>
</td>
</tr>
<tr>
<th>좋아하는 팀 사진</th>
<td class="picture">
<image src="http://mblogthumb3.phinf.naver.net/20160903_162/yj120011_1472905432644QK9gz_PNG/1410521415_fc-barcelona-256.png?type=w2">
</td>
</tr>
</table>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>[Quiz03]2012104083 민재기</title>
<link href="css/quiz03.css" rel="stylesheet" type="text/css">
</head>
<body>
<div>
<table>
<tr>
<th>이름</th>
<td>민재기</td>
</tr>
<tr>
<th>생년월일</th>
<td>1993년 7월 2일</td>
</tr>
<tr>
<th>전화번호</th>
<td>010-5795-5605
</td>
</tr>
<tr>
<th>요즘 즐겨 하는것</th>
<td>
<ul>
<li>유튜브 게임 채널 보기
<ul>
<li>
<a href="https://www.youtube.com/channel/UCHsK9gl5aU0F3umrU4Zn_sA" target="_blank">해당 채널 바로가기</a>
</li>
</ul>
</li>
<li>좋아하는 축구팀 하이라이트 보기
<ul>
<li>
<a href="http://sports.news.naver.com/wfootball/vod/index.nhn?uCategory=wfootball&category=primera&listType=team&teamCode=26300" target="_blank">하이라이트 바로가기</a>
</li>
</ul>
</li>
</ul>
</td>
</tr>
<tr>
<th>좋아하는 팀 사진</th>
<td class="picture">
<image src="http://mblogthumb3.phinf.naver.net/20160903_162/yj120011_1472905432644QK9gz_PNG/1410521415_fc-barcelona-256.png?type=w2" class="img">
</td>
</tr>
</table>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
</head>
<body>
<script type="text/javascript" src="js/quiz05.js"></script>
</body>
</html>
"use strict";
function Stack (){
this.arr = new Array();
this.leng = 0;
this.push = push;
this.pop = pop;
}
function push(x) {
this.arr[this.leng++] = x;
}
function pop (){
return this.arr[this.leng--];
}
var stack = new Stack();
stack.push(1);
stack.push(2);
stack.push(3);
stack.push(4);
stack.push(5);
console.log(stack.pop());
console.log(stack.pop());
console.log(stack.pop());
console.log(stack.pop());
console.log(stack.pop());
console.log(stack.pop());
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
<div>
<input type='text' id='a'>
<select id='op'>
<option>+</option>
<option>-</option>
<option>*</option>
<option>/</option>
</select>
<input type='text' id='b'>
=
<span id='result'></span>
</div>
<button id='exec'>계산</button>
<script>
$(document).ready(function(){
$("#exec").click(function(){
if (isNaN($("#b").val()) && isNaN($("#a").val())){
alert("Error");
}
else if ($("#op").val() == "+"){
$("#result").text(parseFloat($("#a").val())+parseFloat($("#b").val()));
} else if ($("#op").val() == "-"){
$("#result").text(parseFloat($("#a").val())-parseFloat($("#b").val()));
} else if ($("#op").val() == "*"){
$("#result").text(parseFloat($("#a").val())*parseFloat($("#b").val()));
} else if ($("#op").val() == "/"){
if ($("#b").val() == "0"){
alert("Do not divide 0!");
} else{
$("#result").text(parseFloat($("#a").val())/parseFloat($("#b").val()));
}
}
});
});
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<style>
</style>
</head>
<body>
</body>
</html>