Showing
32 changed files
with
709 additions
and
100 deletions
1 | "use strict" | 1 | "use strict" |
2 | 2 | ||
3 | -var http = require('http'), | 3 | +var http = require('http'), |
4 | path = require('path'), | 4 | path = require('path'), |
5 | url = require('url'), | 5 | url = require('url'), |
6 | fs = require('fs'); | 6 | fs = require('fs'); |
7 | 7 | ||
8 | var DOCUMENT_ROOT = "../../05_CSS/"; | 8 | var DOCUMENT_ROOT = "../../05_CSS/"; |
9 | var server = http.createServer(function(req, res) { | 9 | var server = http.createServer(function(req, res) { |
10 | - var reqPath = url.parse(req.url).pathname; | 10 | + var reqPath = url.parse(req.url).pathname; // 패스를 파싱함 |
11 | - if (reqPath == "/") { | 11 | + if (reqPath == "/") { // / 면 path에 해당 파일을 할당을 하라. |
12 | - reqPath = "ex01.html"; | 12 | + reqPath = "ex01.html"; |
13 | - } | ||
14 | - var fullPath = path.join(process.cwd(), DOCUMENT_ROOT, reqPath); | ||
15 | - fs.readFile(fullPath, "binary", function(err, file) { | ||
16 | - if(err) { | ||
17 | - if (err.code == "ENOENT") { | ||
18 | - console.log("SEND 404 for " + req.url); | ||
19 | - res.writeHeader(404, {"Content-Type": "text/html"}); | ||
20 | - res.write("<h1>Not found</h1>"); | ||
21 | - res.end(); | ||
22 | - } else { | ||
23 | - console.error("Error", err); | ||
24 | - res.writeHeader(500, {"Content-Type": "text/plain"}); | ||
25 | - res.write(err + "\n"); | ||
26 | - res.end(); | ||
27 | - } | ||
28 | - } else{ | ||
29 | - console.log("SEND 200 for " + req.url); | ||
30 | - res.writeHeader(200); | ||
31 | - res.write(file, "binary"); | ||
32 | - res.end(); | ||
33 | } | 13 | } |
34 | - }); | 14 | + |
15 | + // FullPath는 Path의 Join, cwd 현재 워킹 디렉토리랑, 도큐먼트 루트, requirementPath를 Join | ||
16 | + var fullPath = path.join(process.cwd(), DOCUMENT_ROOT, reqPath); | ||
17 | + | ||
18 | + // 이후 파일을 리딩함 | ||
19 | + fs.readFile(fullPath, "binary", function(err, file) { | ||
20 | + if (err) { | ||
21 | + // 파일 없으면 에러 | ||
22 | + if (err.code == "ENOENT") { | ||
23 | + console.log("SEND 404 for " + req.url); | ||
24 | + res.writeHeader(404, { "Content-Type": "text/html" }); | ||
25 | + res.write("<h1>Not found</h1>"); | ||
26 | + res.end(); | ||
27 | + } else { | ||
28 | + console.error("Error", err); | ||
29 | + res.writeHeader(500, { "Content-Type": "text/plain" }); | ||
30 | + res.write(err + "\n"); | ||
31 | + res.end(); | ||
32 | + } | ||
33 | + } else { | ||
34 | + // 에러가 아닐경우 그대로 처리 | ||
35 | + console.log("SEND 200 for " + req.url); | ||
36 | + res.writeHeader(200); | ||
37 | + res.write(file, "binary"); | ||
38 | + res.end(); | ||
39 | + } | ||
40 | + }); | ||
35 | }); | 41 | }); |
36 | 42 | ||
37 | server.listen(3000, function() { | 43 | server.listen(3000, function() { |
38 | - console.log("Sever listeining on http://localhost:3000"); | 44 | + console.log("Sever listeining on http://localhost:3000"); |
39 | }); | 45 | }); |
... | \ No newline at end of file | ... | \ No newline at end of file | ... | ... |
JS/01_hello.html
0 → 100644
1 | +<!DOCTYPE html> | ||
2 | +<html> | ||
3 | + | ||
4 | +<head> | ||
5 | + <script type="text/javascript" src="./01_hello.js"> | ||
6 | + </script> | ||
7 | +</head> | ||
8 | + | ||
9 | +<body> | ||
10 | + <p id="demo"></p> | ||
11 | + <script> | ||
12 | + document.getElementById("demo").innerHTML = Date(); | ||
13 | + </script> | ||
14 | +</body> | ||
15 | + | ||
16 | +</html> | ||
... | \ No newline at end of file | ... | \ No newline at end of file |
JS/01_hello.js
0 → 100644
1 | +document.write("<h1>Hello, World</h1>"); | ||
2 | + | ||
3 | +console.log("hello, world!!!"); | ||
4 | + | ||
5 | +function message() { | ||
6 | + alert("Alert Message!!"); | ||
7 | +} | ||
8 | + | ||
9 | +// 이거 잘 기억하기. | ||
10 | +function test() { | ||
11 | + document.getElementById('demo').innerHTML="message"; | ||
12 | +} | ||
13 | +window.onload = test; | ||
14 | + | ||
15 | +new Date(); | ||
16 | + | ||
17 | +document.write(Date()+"<br>"); | ||
18 | +var cur_time = new Date(); | ||
19 | +document.write(cur_time); | ||
... | \ No newline at end of file | ... | \ No newline at end of file |
JS/02_Browser.html
0 → 100644
1 | +<!DOCTYPE html> | ||
2 | +<html> | ||
3 | + | ||
4 | +<head> | ||
5 | + <script type="text/javascript" src="./02_Browser.js"> | ||
6 | + </script> | ||
7 | +</head> | ||
8 | + | ||
9 | +<body> | ||
10 | + <p id="demo"></p> | ||
11 | + <script> | ||
12 | + document.getElementById("demo").innerHTML = Date(); | ||
13 | + </script> | ||
14 | +</body> | ||
15 | + | ||
16 | +</html> | ||
... | \ No newline at end of file | ... | \ No newline at end of file |
JS/02_Browser.js
0 → 100644
1 | +alert("test"); // 메시지창띄움 | ||
2 | +var mywindow = window.open('','','width=200,height=100'); // 새창띄우기 | ||
3 | +if (confirm("Are you sure?")) {// Yes/No를묻는다이얼로그창띄움. Yes일때만true | ||
4 | + console.log("Yes~"); | ||
5 | +}else{ | ||
6 | + console.log("No~"); | ||
7 | +} | ||
8 | + | ||
9 | +varname = prompt("Enter name"); // 사용자의입력받는창띄움 | ||
10 | +console.log(varname); | ||
11 | +mywindow.close(); | ||
12 | + | ||
13 | +history.back(); | ||
14 | + | ||
15 | +console.log(window.location.hostname); | ||
16 | + | ||
17 | +//location.assign("http://www.naver.com"); | ||
18 | +//location.reload(); | ||
... | \ No newline at end of file | ... | \ No newline at end of file |
JS/Pr01_Math.html
0 → 100644
1 | +<!DOCTYPE html> | ||
2 | +<html> | ||
3 | + | ||
4 | +<head> | ||
5 | + <script type="text/javascript" src="./Pr01_Math.js"> | ||
6 | + </script> | ||
7 | +</head> | ||
8 | + | ||
9 | +<body> | ||
10 | + <p id="demo"></p> | ||
11 | + <script> | ||
12 | + document.getElementById("demo").innerHTML = Date(); | ||
13 | + </script> | ||
14 | +</body> | ||
15 | + | ||
16 | +</html> | ||
... | \ No newline at end of file | ... | \ No newline at end of file |
JS/Pr01_Math.js
0 → 100644
Node.js/app01.js
0 → 100644
1 | +"use strict" | ||
2 | + | ||
3 | +var http = require('http'); | ||
4 | +var path = require('path'); | ||
5 | +var url = require('url'); | ||
6 | +var fs = require('fs'); | ||
7 | + | ||
8 | +var DOCUMENT_ROOT = "../Responsive_Web_Design/"; // 상대경로로 루트를 설정함. | ||
9 | + | ||
10 | +// 서버를 생성함 | ||
11 | +var server = http.createServer(function(req, res) { | ||
12 | + var reqPath = url.parse(req.url).pathname; | ||
13 | + if (reqPath == "/") { | ||
14 | + reqPath = "Responsive_Design_Quiz_2012104136.html"; | ||
15 | + } | ||
16 | + | ||
17 | + var fullPath = path.join(process.cwd(), DOCUMENT_ROOT, reqPath); | ||
18 | + | ||
19 | + fs.readFile(fullPath, "binary", function(err, file) { | ||
20 | + if (err) { | ||
21 | + // 파일 없으면 에러 | ||
22 | + if (err.code == "ENOENT") { | ||
23 | + console.log("SEND 404 for " + req.url); | ||
24 | + res.writeHeader(404, { "Content-Type": "text/html" }); | ||
25 | + res.write("<h1>Not found</h1>"); | ||
26 | + res.end(); | ||
27 | + } else { | ||
28 | + console.error("Error", err); | ||
29 | + res.writeHeader(500, { "Content-Type": "text/plain" }); | ||
30 | + res.write(err + "\n"); | ||
31 | + res.end(); | ||
32 | + } | ||
33 | + } else { | ||
34 | + console.log("SEND 200 for " + req.url); | ||
35 | + res.writeHeader(200); | ||
36 | + res.write(file, "binary"); | ||
37 | + res.end(); | ||
38 | + } | ||
39 | + }) | ||
40 | +}); | ||
41 | + | ||
42 | +server.listen(3000, function() { | ||
43 | + console.log("Server listening on http://localhost:3000"); | ||
44 | +}); | ||
... | \ No newline at end of file | ... | \ No newline at end of file |
Node.js/app02/.gitignore
0 → 100644
1 | +# Logs | ||
2 | +logs | ||
3 | +*.log | ||
4 | + | ||
5 | +# Runtime data | ||
6 | +pids | ||
7 | +*.pid | ||
8 | +*.seed | ||
9 | + | ||
10 | +# Directory for instrumented libs generated by jscoverage/JSCover | ||
11 | +lib-cov | ||
12 | + | ||
13 | +# Coverage directory used by tools like istanbul | ||
14 | +coverage | ||
15 | + | ||
16 | +# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) | ||
17 | +.grunt | ||
18 | + | ||
19 | +# node-waf configuration | ||
20 | +.lock-wscript | ||
21 | + | ||
22 | +# Compiled binary addons (http://nodejs.org/api/addons.html) | ||
23 | +build/Release | ||
24 | + | ||
25 | +# Dependency directory | ||
26 | +# https://docs.npmjs.com/cli/shrinkwrap#caveats | ||
27 | +node_modules | ||
28 | + | ||
29 | +# Debug log from npm | ||
30 | +npm-debug.log |
Node.js/app02/app.js
0 → 100644
1 | +var express = require('express'); | ||
2 | +var path = require('path'); | ||
3 | +var favicon = require('serve-favicon'); | ||
4 | +var logger = require('morgan'); | ||
5 | +var cookieParser = require('cookie-parser'); | ||
6 | +var bodyParser = require('body-parser'); | ||
7 | +var sassMiddleware = require('node-sass-middleware'); | ||
8 | + | ||
9 | +var index = require('./routes/index'); | ||
10 | +var users = require('./routes/users'); | ||
11 | + | ||
12 | +var app = express(); | ||
13 | + | ||
14 | +// view engine setup | ||
15 | +app.set('views', path.join(__dirname, 'views')); | ||
16 | +app.set('view engine', 'ejs'); | ||
17 | + | ||
18 | +// uncomment after placing your favicon in /public | ||
19 | +//app.use(favicon(path.join(__dirname, 'public', 'favicon.ico'))); | ||
20 | +app.use(logger('dev')); | ||
21 | +app.use(bodyParser.json()); | ||
22 | +app.use(bodyParser.urlencoded({ extended: false })); | ||
23 | +app.use(cookieParser()); | ||
24 | +app.use(sassMiddleware({ | ||
25 | + src: path.join(__dirname, 'public'), | ||
26 | + dest: path.join(__dirname, 'public'), | ||
27 | + indentedSyntax: true, // true = .sass and false = .scss | ||
28 | + sourceMap: true | ||
29 | +})); | ||
30 | +app.use(express.static(path.join(__dirname, 'public'))); | ||
31 | + | ||
32 | +app.use('/', index); | ||
33 | +app.use('/users', users); | ||
34 | + | ||
35 | +// catch 404 and forward to error handler | ||
36 | +app.use(function(req, res, next) { | ||
37 | + var err = new Error('Not Found'); | ||
38 | + err.status = 404; | ||
39 | + next(err); | ||
40 | +}); | ||
41 | + | ||
42 | +// error handler | ||
43 | +app.use(function(err, req, res, next) { | ||
44 | + // set locals, only providing error in development | ||
45 | + res.locals.message = err.message; | ||
46 | + res.locals.error = req.app.get('env') === 'development' ? err : {}; | ||
47 | + | ||
48 | + // render the error page | ||
49 | + res.status(err.status || 500); | ||
50 | + res.render('error'); | ||
51 | +}); | ||
52 | + | ||
53 | +module.exports = app; |
Node.js/app02/bin/www
0 → 100644
1 | +#!/usr/bin/env node | ||
2 | + | ||
3 | +/** | ||
4 | + * Module dependencies. | ||
5 | + */ | ||
6 | + | ||
7 | +var app = require('../app'); | ||
8 | +var debug = require('debug')('app02:server'); | ||
9 | +var http = require('http'); | ||
10 | + | ||
11 | +/** | ||
12 | + * Get port from environment and store in Express. | ||
13 | + */ | ||
14 | + | ||
15 | +var port = normalizePort(process.env.PORT || '3000'); | ||
16 | +app.set('port', port); | ||
17 | + | ||
18 | +/** | ||
19 | + * Create HTTP server. | ||
20 | + */ | ||
21 | + | ||
22 | +var server = http.createServer(app); | ||
23 | + | ||
24 | +/** | ||
25 | + * Listen on provided port, on all network interfaces. | ||
26 | + */ | ||
27 | + | ||
28 | +server.listen(port); | ||
29 | +server.on('error', onError); | ||
30 | +server.on('listening', onListening); | ||
31 | + | ||
32 | +/** | ||
33 | + * Normalize a port into a number, string, or false. | ||
34 | + */ | ||
35 | + | ||
36 | +function normalizePort(val) { | ||
37 | + var port = parseInt(val, 10); | ||
38 | + | ||
39 | + if (isNaN(port)) { | ||
40 | + // named pipe | ||
41 | + return val; | ||
42 | + } | ||
43 | + | ||
44 | + if (port >= 0) { | ||
45 | + // port number | ||
46 | + return port; | ||
47 | + } | ||
48 | + | ||
49 | + return false; | ||
50 | +} | ||
51 | + | ||
52 | +/** | ||
53 | + * Event listener for HTTP server "error" event. | ||
54 | + */ | ||
55 | + | ||
56 | +function onError(error) { | ||
57 | + if (error.syscall !== 'listen') { | ||
58 | + throw error; | ||
59 | + } | ||
60 | + | ||
61 | + var bind = typeof port === 'string' | ||
62 | + ? 'Pipe ' + port | ||
63 | + : 'Port ' + port; | ||
64 | + | ||
65 | + // handle specific listen errors with friendly messages | ||
66 | + switch (error.code) { | ||
67 | + case 'EACCES': | ||
68 | + console.error(bind + ' requires elevated privileges'); | ||
69 | + process.exit(1); | ||
70 | + break; | ||
71 | + case 'EADDRINUSE': | ||
72 | + console.error(bind + ' is already in use'); | ||
73 | + process.exit(1); | ||
74 | + break; | ||
75 | + default: | ||
76 | + throw error; | ||
77 | + } | ||
78 | +} | ||
79 | + | ||
80 | +/** | ||
81 | + * Event listener for HTTP server "listening" event. | ||
82 | + */ | ||
83 | + | ||
84 | +function onListening() { | ||
85 | + var addr = server.address(); | ||
86 | + var bind = typeof addr === 'string' | ||
87 | + ? 'pipe ' + addr | ||
88 | + : 'port ' + addr.port; | ||
89 | + debug('Listening on ' + bind); | ||
90 | +} |
Node.js/app02/package.json
0 → 100644
1 | +{ | ||
2 | + "name": "app02", | ||
3 | + "version": "0.0.0", | ||
4 | + "private": true, | ||
5 | + "scripts": { | ||
6 | + "start": "node ./bin/www" | ||
7 | + }, | ||
8 | + "dependencies": { | ||
9 | + "body-parser": "~1.17.1", | ||
10 | + "cookie-parser": "~1.4.3", | ||
11 | + "debug": "~2.6.3", | ||
12 | + "ejs": "~2.5.6", | ||
13 | + "express": "~4.15.2", | ||
14 | + "morgan": "~1.8.1", | ||
15 | + "node-sass-middleware": "0.9.8", | ||
16 | + "serve-favicon": "~2.4.2" | ||
17 | + } | ||
18 | +} |
Node.js/app02/public/stylesheets/style.sass
0 → 100644
Node.js/app02/routes/index.js
0 → 100644
Node.js/app02/routes/users.js
0 → 100644
Node.js/app02/views/error.ejs
0 → 100644
Node.js/app02/views/index.ejs
0 → 100644
Node.js/app03/.gitignore
0 → 100644
1 | +# Logs | ||
2 | +logs | ||
3 | +*.log | ||
4 | + | ||
5 | +# Runtime data | ||
6 | +pids | ||
7 | +*.pid | ||
8 | +*.seed | ||
9 | + | ||
10 | +# Directory for instrumented libs generated by jscoverage/JSCover | ||
11 | +lib-cov | ||
12 | + | ||
13 | +# Coverage directory used by tools like istanbul | ||
14 | +coverage | ||
15 | + | ||
16 | +# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) | ||
17 | +.grunt | ||
18 | + | ||
19 | +# node-waf configuration | ||
20 | +.lock-wscript | ||
21 | + | ||
22 | +# Compiled binary addons (http://nodejs.org/api/addons.html) | ||
23 | +build/Release | ||
24 | + | ||
25 | +# Dependency directory | ||
26 | +# https://docs.npmjs.com/cli/shrinkwrap#caveats | ||
27 | +node_modules | ||
28 | + | ||
29 | +# Debug log from npm | ||
30 | +npm-debug.log |
Node.js/app03/app.js
0 → 100644
1 | +var express = require('express'); | ||
2 | +var path = require('path'); | ||
3 | +var favicon = require('serve-favicon'); | ||
4 | +var logger = require('morgan'); | ||
5 | +var cookieParser = require('cookie-parser'); | ||
6 | +var bodyParser = require('body-parser'); | ||
7 | + | ||
8 | +var index = require('./routes/index'); | ||
9 | +var users = require('./routes/users'); | ||
10 | + | ||
11 | +var app = express(); | ||
12 | + | ||
13 | +// view engine setup | ||
14 | +app.set('views', path.join(__dirname, 'views')); | ||
15 | +app.set('view engine', 'jade'); | ||
16 | + | ||
17 | +// uncomment after placing your favicon in /public | ||
18 | +//app.use(favicon(path.join(__dirname, 'public', 'favicon.ico'))); | ||
19 | +app.use(logger('dev')); | ||
20 | +app.use(bodyParser.json()); | ||
21 | +app.use(bodyParser.urlencoded({ extended: false })); | ||
22 | +app.use(cookieParser()); | ||
23 | +app.use(express.static(path.join(__dirname, 'public'))); | ||
24 | + | ||
25 | +app.use('/', index); | ||
26 | +app.use('/users', users); | ||
27 | + | ||
28 | +// catch 404 and forward to error handler | ||
29 | +app.use(function(req, res, next) { | ||
30 | + var err = new Error('Not Found'); | ||
31 | + err.status = 404; | ||
32 | + next(err); | ||
33 | +}); | ||
34 | + | ||
35 | +// error handler | ||
36 | +app.use(function(err, req, res, next) { | ||
37 | + // set locals, only providing error in development | ||
38 | + res.locals.message = err.message; | ||
39 | + res.locals.error = req.app.get('env') === 'development' ? err : {}; | ||
40 | + | ||
41 | + // render the error page | ||
42 | + res.status(err.status || 500); | ||
43 | + res.render('error'); | ||
44 | +}); | ||
45 | + | ||
46 | +module.exports = app; |
Node.js/app03/bin/www
0 → 100644
1 | +#!/usr/bin/env node | ||
2 | + | ||
3 | +/** | ||
4 | + * Module dependencies. | ||
5 | + */ | ||
6 | + | ||
7 | +var app = require('../app'); | ||
8 | +var debug = require('debug')('app03:server'); | ||
9 | +var http = require('http'); | ||
10 | + | ||
11 | +/** | ||
12 | + * Get port from environment and store in Express. | ||
13 | + */ | ||
14 | + | ||
15 | +var port = normalizePort(process.env.PORT || '3000'); | ||
16 | +app.set('port', port); | ||
17 | + | ||
18 | +/** | ||
19 | + * Create HTTP server. | ||
20 | + */ | ||
21 | + | ||
22 | +var server = http.createServer(app); | ||
23 | + | ||
24 | +/** | ||
25 | + * Listen on provided port, on all network interfaces. | ||
26 | + */ | ||
27 | + | ||
28 | +server.listen(port); | ||
29 | +server.on('error', onError); | ||
30 | +server.on('listening', onListening); | ||
31 | + | ||
32 | +/** | ||
33 | + * Normalize a port into a number, string, or false. | ||
34 | + */ | ||
35 | + | ||
36 | +function normalizePort(val) { | ||
37 | + var port = parseInt(val, 10); | ||
38 | + | ||
39 | + if (isNaN(port)) { | ||
40 | + // named pipe | ||
41 | + return val; | ||
42 | + } | ||
43 | + | ||
44 | + if (port >= 0) { | ||
45 | + // port number | ||
46 | + return port; | ||
47 | + } | ||
48 | + | ||
49 | + return false; | ||
50 | +} | ||
51 | + | ||
52 | +/** | ||
53 | + * Event listener for HTTP server "error" event. | ||
54 | + */ | ||
55 | + | ||
56 | +function onError(error) { | ||
57 | + if (error.syscall !== 'listen') { | ||
58 | + throw error; | ||
59 | + } | ||
60 | + | ||
61 | + var bind = typeof port === 'string' | ||
62 | + ? 'Pipe ' + port | ||
63 | + : 'Port ' + port; | ||
64 | + | ||
65 | + // handle specific listen errors with friendly messages | ||
66 | + switch (error.code) { | ||
67 | + case 'EACCES': | ||
68 | + console.error(bind + ' requires elevated privileges'); | ||
69 | + process.exit(1); | ||
70 | + break; | ||
71 | + case 'EADDRINUSE': | ||
72 | + console.error(bind + ' is already in use'); | ||
73 | + process.exit(1); | ||
74 | + break; | ||
75 | + default: | ||
76 | + throw error; | ||
77 | + } | ||
78 | +} | ||
79 | + | ||
80 | +/** | ||
81 | + * Event listener for HTTP server "listening" event. | ||
82 | + */ | ||
83 | + | ||
84 | +function onListening() { | ||
85 | + var addr = server.address(); | ||
86 | + var bind = typeof addr === 'string' | ||
87 | + ? 'pipe ' + addr | ||
88 | + : 'port ' + addr.port; | ||
89 | + debug('Listening on ' + bind); | ||
90 | +} |
Node.js/app03/package.json
0 → 100644
1 | +{ | ||
2 | + "name": "app03", | ||
3 | + "version": "0.0.0", | ||
4 | + "private": true, | ||
5 | + "scripts": { | ||
6 | + "start": "node ./bin/www" | ||
7 | + }, | ||
8 | + "dependencies": { | ||
9 | + "body-parser": "~1.17.1", | ||
10 | + "cookie-parser": "~1.4.3", | ||
11 | + "debug": "~2.6.3", | ||
12 | + "express": "~4.15.2", | ||
13 | + "jade": "~1.11.0", | ||
14 | + "morgan": "~1.8.1", | ||
15 | + "serve-favicon": "~2.4.2" | ||
16 | + } | ||
17 | +} |
Node.js/app03/public/stylesheets/style.css
0 → 100644
Node.js/app03/public/stylesheets/style.sass
0 → 100644
Node.js/app03/routes/index.js
0 → 100644
Node.js/app03/routes/users.js
0 → 100644
Node.js/app03/views/error.ejs
0 → 100644
Node.js/app03/views/error.jade
0 → 100644
Node.js/app03/views/index.ejs
0 → 100644
Node.js/app03/views/index.jade
0 → 100644
Node.js/app03/views/layout.jade
0 → 100644
1 | -html{ | 1 | +html { |
2 | background-color: white; | 2 | background-color: white; |
3 | color: black; | 3 | color: black; |
4 | padding: 20px 0; | 4 | padding: 20px 0; |
5 | - font: 14px/28px "맑은 고딕", "Malgun Gothic", "굴림", "Gulim", Verdan, Arial, Tahoma; | 5 | + font: 14px/28px "맑은 고딕", "Malgun Gothic", "굴림", "Gulim", Verdan, Arial, Tahoma; |
6 | } | 6 | } |
7 | 7 | ||
8 | -p.Screen_Text{ | 8 | +p.Screen_Text { |
9 | color: green; | 9 | color: green; |
10 | } | 10 | } |
11 | 11 | ||
... | @@ -21,22 +21,22 @@ h1.title { | ... | @@ -21,22 +21,22 @@ h1.title { |
21 | color: black; | 21 | color: black; |
22 | } | 22 | } |
23 | 23 | ||
24 | -h3.subtitle{ | 24 | +h3.subtitle { |
25 | font-size: 1.5em; | 25 | font-size: 1.5em; |
26 | - white-space:nowrap; | 26 | + white-space: nowrap; |
27 | - background-color:lightgoldenrodyellow; | 27 | + background-color: lightgoldenrodyellow; |
28 | text-align: center; | 28 | text-align: center; |
29 | border-radius: 20px; | 29 | border-radius: 20px; |
30 | width: 99%; | 30 | width: 99%; |
31 | } | 31 | } |
32 | 32 | ||
33 | -img.mainimage{ | 33 | +img.mainimage { |
34 | display: block; | 34 | display: block; |
35 | margin: auto; | 35 | margin: auto; |
36 | width: 40%; | 36 | width: 40%; |
37 | } | 37 | } |
38 | 38 | ||
39 | -ul.squre{ | 39 | +ul.squre { |
40 | list-style-type: square; | 40 | list-style-type: square; |
41 | } | 41 | } |
42 | 42 | ||
... | @@ -45,76 +45,69 @@ table { | ... | @@ -45,76 +45,69 @@ table { |
45 | margin: 15px; | 45 | margin: 15px; |
46 | } | 46 | } |
47 | 47 | ||
48 | -table, th, td { | 48 | +table, |
49 | +th, | ||
50 | +td { | ||
49 | border: 1px solid black; | 51 | border: 1px solid black; |
50 | } | 52 | } |
51 | 53 | ||
52 | -@media only screen and (min-width : 768px) { | 54 | +@media only screen and (min-width: 768px) { |
53 | - div.image { | 55 | + div.image { |
54 | - display: inline-block; | 56 | + display: inline-block; |
55 | - vertical-align: top; | 57 | + vertical-align: top; |
56 | - } | 58 | + } |
57 | - | 59 | + div.academic { |
58 | - div.academic{ | 60 | + width: 40%; |
59 | - width: 40%; | 61 | + display: inline-block; |
60 | - display: inline-block; | 62 | + vertical-align: top; |
61 | - vertical-align: top; | 63 | + padding-left: 1em; |
62 | - padding-left: 1em; | 64 | + box-sizing: border-box; |
63 | - box-sizing: border-box; | 65 | + } |
66 | + div.description { | ||
67 | + width: 99%; | ||
68 | + display: inline-block; | ||
69 | + vertical-align: top; | ||
70 | + padding-left: 1em; | ||
71 | + box-sizing: border-box; | ||
72 | + } | ||
73 | + p.Screen_Text { | ||
74 | + color: red; | ||
75 | + } | ||
76 | + div.description p { | ||
77 | + margin-top: 0; | ||
78 | + } | ||
79 | + .member ul>li { | ||
80 | + width: 25%; | ||
64 | } | 81 | } |
65 | - | ||
66 | - div.description { | ||
67 | - width: 99%; | ||
68 | - display: inline-block; | ||
69 | - vertical-align: top; | ||
70 | - padding-left: 1em; | ||
71 | - box-sizing: border-box; | ||
72 | - } | ||
73 | - | ||
74 | - p.Screen_Text{ | ||
75 | - color: red; | ||
76 | -} | ||
77 | - | ||
78 | - div.description p { | ||
79 | - margin-top: 0; | ||
80 | - } | ||
81 | - | ||
82 | - .member ul > li { | ||
83 | - width: 25%; | ||
84 | - } | ||
85 | } | 82 | } |
86 | 83 | ||
87 | -@media only screen and (min-width : 1025px) { | 84 | +@media only screen and (min-width: 1025px) { |
88 | - div.image { | 85 | + div.image { |
89 | - width: 30%; | 86 | + width: 30%; |
90 | - } | 87 | + } |
91 | - | ||
92 | div.description { | 88 | div.description { |
93 | - width: 50%; | 89 | + width: 50%; |
94 | - padding-right: 1em; | 90 | + padding-right: 1em; |
95 | - } | 91 | + } |
96 | - | ||
97 | div.academic { | 92 | div.academic { |
98 | - width: 19%; | 93 | + width: 19%; |
99 | - float:right; | 94 | + float: right; |
100 | - box-sizing: border-box; | 95 | + box-sizing: border-box; |
101 | - display: inline-block; | 96 | + display: inline-block; |
102 | - vertical-align: top; | 97 | + vertical-align: top; |
103 | - } | 98 | + } |
104 | - | 99 | + p.Screen_Text { |
105 | - p.Screen_Text{ | 100 | + color: blue; |
106 | - color: blue; | 101 | + } |
107 | -} | 102 | + div.member>h3.subtitle { |
108 | - | ||
109 | - div.member > h3.subtitle{ | ||
110 | font-size: 20pt; | 103 | font-size: 20pt; |
111 | - width:70%; | 104 | + width: 70%; |
112 | } | 105 | } |
113 | - .member ul > li { | 106 | + .member ul>li { |
114 | font-size: 14pt; | 107 | font-size: 14pt; |
115 | - width: 100%; | 108 | + width: 100%; |
116 | - } | 109 | + } |
117 | - h3 { | 110 | + h3 { |
118 | - margin-top: 0; | 111 | + margin-top: 0; |
119 | - } | 112 | + } |
120 | -} | 113 | +} |
... | \ No newline at end of file | ... | \ No newline at end of file | ... | ... |
... | @@ -34,9 +34,8 @@ | ... | @@ -34,9 +34,8 @@ |
34 | <h3 class="subtitle">소개</h3> | 34 | <h3 class="subtitle">소개</h3> |
35 | <ul class="squre"> | 35 | <ul class="squre"> |
36 | <li> | 36 | <li> |
37 | - <p> 본인을 소개하는 소개란 입니다. 아래는 소개용 텍스트 예시입니다. 텍스트 예시 텍스트 예시 텍스트 예시 텍스트 예시 텍스트 예시 텍스트 예시 텍스트 예시 텍스트 예시 텍스트 예시 텍스트 | 37 | + <p> 본인을 소개하는 소개란 입니다. 아래는 소개용 텍스트 예시입니다. 텍스트 예시 텍스트 예시 텍스트 예시 텍스트 예시 텍스트 예시 텍스트 예시 텍스트 예시 텍스트 예시 텍스트 예시 텍스트 예시 텍스트 예시 텍스트 예시 텍스트 예시 텍스트 예시 텍스트 예시 텍스트 예시 텍스트 예시 텍스트 예시 텍스트 예시 텍스트 예시 텍스트 예시 텍스트 예시 텍스트 예시 텍스트 예시 텍스트 예시 텍스트 예시 텍스트 예시 텍스트 예시 |
38 | - 예시 텍스트 예시 텍스트 예시 텍스트 예시 텍스트 예시 텍스트 예시 텍스트 예시 텍스트 예시 텍스트 예시 텍스트 예시 텍스트 예시 텍스트 예시 텍스트 예시 텍스트 예시 텍스트 | 38 | + 텍스트 예시 텍스트 예시 텍스트 예시</p> |
39 | - 예시 텍스트 예시 텍스트 예시 텍스트 예시 텍스트 예시 텍스트 예시 텍스트 예시 텍스트 예시</p> | ||
40 | </li> | 39 | </li> |
41 | <li> | 40 | <li> |
42 | <p class="Screen_Text"> Witdh가 768px 이하 일시 모바일 화면이며, 해당 글씨가 초록색으로 표시됩니다.</p> | 41 | <p class="Screen_Text"> Witdh가 768px 이하 일시 모바일 화면이며, 해당 글씨가 초록색으로 표시됩니다.</p> |
... | @@ -48,7 +47,7 @@ | ... | @@ -48,7 +47,7 @@ |
48 | <p class="Screen_Text"> Witdh가 1025px 이하 일시 데스크탑 화면이며, 해당 글씨가 파란색으로 표시됩니다.</p> | 47 | <p class="Screen_Text"> Witdh가 1025px 이하 일시 데스크탑 화면이며, 해당 글씨가 파란색으로 표시됩니다.</p> |
49 | </li> | 48 | </li> |
50 | <li> | 49 | <li> |
51 | - <p> 디바이스의 Witdh를 변경하기 위해 Chrome 브라우저 기준 F12후 Ctrl + Shift + M 을 눌러주세요. </p> | 50 | + <p> 디바이스의 Witdh를 변경하기 위해 Chrome 브라우저 기준 F12후 Ctrl + Shift + M 을 눌러주세요. </p> |
52 | </li> | 51 | </li> |
53 | </ul> | 52 | </ul> |
54 | </div> | 53 | </div> | ... | ... |
-
Please register or login to post a comment