황진하 / 2017-1-WebServiceProgramming-2012104136

Go to a project
Toggle navigation Toggle navigation pinning
황진하
64ec87c6 1 parent 0977b72a

Java Script 기초

Inline Side-by-side
Showing 32 changed files with 647 additions and 38 deletions
...@@ -7,25 +7,31 @@ var http = require('http'), ...@@ -7,25 +7,31 @@ var http = require('http'),
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 } 13 }
14 +
15 + // FullPath는 Path의 Join, cwd 현재 워킹 디렉토리랑, 도큐먼트 루트, requirementPath를 Join
14 var fullPath = path.join(process.cwd(), DOCUMENT_ROOT, reqPath); 16 var fullPath = path.join(process.cwd(), DOCUMENT_ROOT, reqPath);
17 +
18 + // 이후 파일을 리딩함
15 fs.readFile(fullPath, "binary", function(err, file) { 19 fs.readFile(fullPath, "binary", function(err, file) {
16 - if(err) { 20 + if (err) {
21 + // 파일 없으면 에러
17 if (err.code == "ENOENT") { 22 if (err.code == "ENOENT") {
18 console.log("SEND 404 for " + req.url); 23 console.log("SEND 404 for " + req.url);
19 - res.writeHeader(404, {"Content-Type": "text/html"}); 24 + res.writeHeader(404, { "Content-Type": "text/html" });
20 res.write("<h1>Not found</h1>"); 25 res.write("<h1>Not found</h1>");
21 res.end(); 26 res.end();
22 } else { 27 } else {
23 console.error("Error", err); 28 console.error("Error", err);
24 - res.writeHeader(500, {"Content-Type": "text/plain"}); 29 + res.writeHeader(500, { "Content-Type": "text/plain" });
25 res.write(err + "\n"); 30 res.write(err + "\n");
26 res.end(); 31 res.end();
27 } 32 }
28 - } else{ 33 + } else {
34 + // 에러가 아닐경우 그대로 처리
29 console.log("SEND 200 for " + req.url); 35 console.log("SEND 200 for " + req.url);
30 res.writeHeader(200); 36 res.writeHeader(200);
31 res.write(file, "binary"); 37 res.write(file, "binary");
......
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
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
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
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
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
1 +var value = Math.PI;
2 +document.write("<p>"+value+"</p>");
3 +value = Math.sqrt(value);
4 +document.write("<p>"+value+"</p>");
5 +value = Math.round(value);
6 +document.write("<p>"+value+"</p>");
...\ No newline at end of file ...\ No newline at end of file
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
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
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;
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 +}
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 +}
1 +body
2 + padding: 50px
3 + font: 14px "Lucida Grande", Helvetica, Arial, sans-serif
4 +
5 +a
6 + color: #00B7FF
1 +var express = require('express');
2 +var router = express.Router();
3 +
4 +/* GET home page. */
5 +router.get('/', function(req, res, next) {
6 + res.render('index', { title: 'Express' });
7 +});
8 +
9 +module.exports = router;
1 +var express = require('express');
2 +var router = express.Router();
3 +
4 +/* GET users listing. */
5 +router.get('/', function(req, res, next) {
6 + res.send('respond with a resource');
7 +});
8 +
9 +module.exports = router;
1 +<h1><%= message %></h1>
2 +<h2><%= error.status %></h2>
3 +<pre><%= error.stack %></pre>
1 +<!DOCTYPE html>
2 +<html>
3 + <head>
4 + <title><%= title %></title>
5 + <link rel='stylesheet' href='/stylesheets/style.css' />
6 + </head>
7 + <body>
8 + <h1><%= title %></h1>
9 + <p>Welcome to <%= title %></p>
10 + </body>
11 +</html>
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
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;
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 +}
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 +}
1 +body {
2 + padding: 50px;
3 + font: 14px "Lucida Grande", Helvetica, Arial, sans-serif;
4 +}
5 +
6 +a {
7 + color: #00B7FF;
8 +}
1 +body
2 + padding: 50px
3 + font: 14px "Lucida Grande", Helvetica, Arial, sans-serif
4 +
5 +a
6 + color: #00B7FF
1 +var express = require('express');
2 +var router = express.Router();
3 +
4 +/* GET home page. */
5 +router.get('/', function(req, res, next) {
6 + res.render('index', { title: 'Express' });
7 +});
8 +
9 +module.exports = router;
1 +var express = require('express');
2 +var router = express.Router();
3 +
4 +/* GET users listing. */
5 +router.get('/', function(req, res, next) {
6 + res.send('respond with a resource');
7 +});
8 +
9 +module.exports = router;
1 +<h1><%= message %></h1>
2 +<h2><%= error.status %></h2>
3 +<pre><%= error.stack %></pre>
1 +extends layout
2 +
3 +block content
4 + h1= message
5 + h2= error.status
6 + pre #{error.stack}
1 +<!DOCTYPE html>
2 +<html>
3 + <head>
4 + <title><%= title %></title>
5 + <link rel='stylesheet' href='/stylesheets/style.css' />
6 + </head>
7 + <body>
8 + <h1><%= title %></h1>
9 + <p>Welcome to <%= title %></p>
10 + </body>
11 +</html>
1 +extends layout
2 +
3 +block content
4 + h1= title
5 + p Welcome to #{title}
1 +doctype html
2 +html
3 + head
4 + title= title
5 + link(rel='stylesheet', href='/stylesheets/style.css')
6 + body
7 + block content
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,24 +45,24 @@ table { ...@@ -45,24 +45,24 @@ 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{
59 width: 40%; 60 width: 40%;
60 display: inline-block; 61 display: inline-block;
61 vertical-align: top; 62 vertical-align: top;
62 padding-left: 1em; 63 padding-left: 1em;
63 box-sizing: border-box; 64 box-sizing: border-box;
64 } 65 }
65 -
66 div.description { 66 div.description {
67 width: 99%; 67 width: 99%;
68 display: inline-block; 68 display: inline-block;
...@@ -70,47 +70,40 @@ table, th, td { ...@@ -70,47 +70,40 @@ table, th, td {
70 padding-left: 1em; 70 padding-left: 1em;
71 box-sizing: border-box; 71 box-sizing: border-box;
72 } 72 }
73 - 73 + p.Screen_Text {
74 - p.Screen_Text{
75 color: red; 74 color: red;
76 -} 75 + }
77 -
78 div.description p { 76 div.description p {
79 margin-top: 0; 77 margin-top: 0;
80 } 78 }
81 - 79 + .member ul>li {
82 - .member ul > li {
83 width: 25%; 80 width: 25%;
84 } 81 }
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{
106 color: blue; 100 color: blue;
107 -} 101 + }
108 - 102 + div.member>h3.subtitle {
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 }
......
...@@ -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>
......