황진하 / 2017-1-WebServiceProgramming-2012104136

Go to a project
Toggle navigation Toggle navigation pinning
황진하
0977b72a 1 parent 531a0af8

Responsive_Design

Inline Side-by-side
Showing 24 changed files with 1220 additions and 3 deletions
1 "use strict" 1 "use strict"
2 2
3 -var http = require('http'); 3 +var http = require('http'); // http라는 이름의 변수를 선언. require는 이 함수를 쓰겠다 라고 요청을 함. 기존에 있던 http를 사용하겠다는 요청
4 var server = http.createServer(function(req, res) { 4 var server = http.createServer(function(req, res) {
5 - res.writeHeader(200, {"Content-Type": "text/plain"}); 5 + res.writeHeader(200, {"Content-Type": "text/HTML"}); // HTML 태그를 사용하고 싶으면, text HTML을 함
6 - res.write("Hello World"); 6 + res.write("<h1>Hello World</h1>");
7 res.end(); 7 res.end();
8 }); 8 });
9 9
10 +// 이 서버는 listen을 하는데 3000번 포트에서 listen 을 하고, 콘솔에 로그를 찍으라.)
10 server.listen(3000, function() { 11 server.listen(3000, function() {
11 console.log("Sever listeining on http://localhost:3000"); 12 console.log("Sever listeining on http://localhost:3000");
12 }); 13 });
......
1 +<!DOCTYPE html>
2 +<html lang="ko">
3 + <head>
4 + <meta charset="utf-8">
5 + </head>
6 + <body>
7 + <span style="color: darkblue"><h1>황진하_2012104136</h1></span>
8 + <br>
9 + <img src="./khu_image.PNG">
10 +
11 + <div>
12 + <h3>소개</h3>
13 + <ul>
14 + <li>본인을 소개하는 소개란 입니다..</li>
15 + </ul>
16 + </div>
17 + <hr>
18 + <div>
19 + <h3>학력</h3>
20 + <ul style="list-style-type: square">
21 + <li>등촌초등학교 졸업</li>
22 + <li>백석중학교 졸업</li>
23 + <li>대일고등학교 졸업</li>
24 + <li>경희대학교 컴퓨터 공학과 재학 중</li>
25 + </ul>
26 + </div>
27 + <hr>
28 + <div>
29 + <h3>프로젝트 Git Url</h3>
30 + <ul>
31 + <li><a href="http://khuhub.khu.ac.kr/2012104136/2017-1-WebServiceProgramming-2012104136", target_"_blank"> KHU hub </a></li>
32 + <li><a href="https://github.com/Phigaro/", target="_blank"> Github </a></li>
33 + </ul><br>
34 + </div>
35 + <hr>
36 + <div>
37 + <h3>이번학기 수강목록</h3>
38 + <table border="1">
39 + <thead>
40 + <tr>
41 + <th>2017-1</th>
42 + </tr>
43 + </thead>
44 + <tbody>
45 + <tr><td>공학과 윤리</td></tr>
46 + <tr><td>네트워크 분석 및 설계</td></tr>
47 + <tr><td>멀티미디어 시스템</td></tr>
48 + <tr><td>임베디드 소프트웨어</td></tr>
49 + <tr><td>창의적 종합 설계</td></tr>
50 + <tr><td>설계프로젝트C</td></tr>
51 + <tr><td>웹서비스 프로그래밍</td></tr>
52 + </tbody>
53 + </table>
54 + </div>
55 + </body>
56 +</html>
1 +<!DOCTYPE html>
2 +<html lang="ko">
3 +
4 +<head>
5 + <meta charset="utf-8">
6 + <link rel="stylesheet" type="text/css" href="./CSS_Style_Sheet/CSS_Style_Pr01.css" />
7 +</head>
8 +
9 +<body>
10 + <p>
11 + <h1><a class="main_title" href="https://en.wikipedia.org/wiki/AOA_(group)" , target="_blank">AOA</a></h1>
12 + </p>
13 + <img src="http://img.rsrs.co.kr/artist/images/500/801326/80132659.jpg">
14 + <h3>AOA</h3>
15 + <ul style="list-style-type: square">
16 + <li>지민</li>
17 + <li>초아</li>
18 + <li>설현</li>
19 + <li>유나</li>
20 + <li>혜정</li>
21 + <li>찬미</li>
22 + <li>민아</li>
23 + </ul>
24 + <hr>
25 + <p>
26 + <h3>설명</h3>
27 + <ul>
28 + <li>
29 + <div class="Document">AOA는 대한민국 7인조 걸 그룹으로, 소속사는 FNC 엔터테인먼트이다. 유닛 그룹으로는 지민, 초아, 유나, 민아로 구성된 밴드 유닛 AOA 블랙과 혜정, 설현, 찬미로 구성된 댄스 유닛
30 + AOA 화이트, 유나, 혜정, 찬미로 구성된 러블리 컨셉의 AOA 크림이 있다. 2016년 10월 15일 멤버 유경은 계약 해지로 인해 탈퇴 하게 되었다. 하지만 객원 멤버로 밴드
31 + 활동은 꾸준히 할 예정이다.</div>
32 + </li>
33 + </ul>
34 + </p>
35 + <br>
36 + <hr>
37 + <h3>소속사</h3>
38 + <ul>
39 + <li><a href="https://ko.wikipedia.org/wiki/FNC_%EC%97%94%ED%84%B0%ED%85%8C%EC%9D%B8%EB%A8%BC%ED%8A%B8" , target_
40 + "_blank"> FNC 엔터테인먼트 </a></li>
41 + </ul><br>
42 + <hr>
43 + <h3>앨범</h3>
44 + <ul>
45 + <li>단발머리</li>
46 + <li>사뿐사뿐</li>
47 + <li>Heart Attack</li>
48 + <li>Good Luck</li>
49 + </ul>
50 +
51 + <div>
52 + <a href="http://jigsaw.w3.org/css-validator/check/referer">
53 + <img style="border:0;width:88px;height:31px" src="http://jigsaw.w3.org/css-validator/images/vcss" alt="올바른 CSS입니다!" />
54 + <a href="http://jigsaw.w3.org/css-validator/check/referer">
55 + <img style="border:0;width:88px;height:31px" src="http://jigsaw.w3.org/css-validator/images/vcss-blue" alt="올바른 CSS입니다!"
56 + />
57 + </a>
58 + </a>
59 + </div>
60 +</body>
61 +
62 +</html>
...\ No newline at end of file ...\ No newline at end of file
1 +<!DOCTYPE html>
2 +<html lang="ko">
3 +<head>
4 +<meta charset="utf-8">
5 +<link rel="stylesheet" type="text/css" href="./CSS_Style_Sheet/CSS_Style_Pr02.css"/>
6 +</head>
7 +
8 +<body>
9 + <div class="pagination">
10 + <a href="#" class="direction"><span class='arrow'>&lsaquo;</span>이전</a>
11 + <a href="#">11</a>
12 + <a href="#">12</a>
13 + <a href="#">13</a>
14 + <a href="#">14</a>
15 + <a href="#" class="current">15</a>
16 + <a href="#">16</a>
17 + <a href="#">17</a>
18 + <a href="#">18</a>
19 + <a href="#">19</a>
20 + <a href="#">20</a>
21 + <a href="#" class="direction">다음 <span class='arrow'>&rsaquo;</span></a>
22 + </div>
23 +</body>
24 +</html>
1 +<!DOCTYPE html>
2 +<html lang="ko">
3 +<head>
4 +<meta charset="utf-8">
5 + <link rel="stylesheet" type="text/css" href="./CSS_Style_Sheet/CSS_Style_Pr03.css"/>
6 + <link rel="stylesheet" type="text/css" href="./CSS_Style_Sheet/CSS_Style_Pr02.css"/>
7 +</head>
8 +
9 +<body>
10 + <h1 class="title"> 게시판 </h1>
11 + <div id="board">
12 + <div id="header">
13 + <div class="row">
14 + <div class="col number">번호</div>
15 + <div class="col title">제목</div>
16 + <div class="col date">날짜</div>
17 + <div class="col name">작성자</div>
18 + </div>
19 + </div>
20 +
21 + <div id="content">
22 + <div class="row">
23 + <div class="col number">10</div>
24 + <div class="col title">10번째게시물</div>
25 + <div class="col date">2015-09-11</div>
26 + <div class="col name">리지</div>
27 + </div>
28 + <div class="row">
29 + <div class="col number">9</div>
30 + <div class="col title">9번째게시물</div>
31 + <div class="col date">2014-08-21</div>
32 + <div class="col name">권보아</div>
33 + </div>
34 + <div class="row">
35 + <div class="col number">8</div>
36 + <div class="col title">8번째게시물</div>
37 + <div class="col date">2014-05-27</div>
38 + <div class="col name">산다라</div>
39 + </div>
40 + <div class="row">
41 + <div class="col number">7</div>
42 + <div class="col title">7번째게시물</div>
43 + <div class="col date">2014-03-15</div>
44 + <div class="col name">설현</div>
45 + </div>
46 + <div class="row">
47 + <div class="col number">6</div>
48 + <div class="col title">6번째게시물</div>
49 + <div class="col date">2013-12-25</div>
50 + <div class="col name">수지</div>
51 + </div>
52 + <div class="row">
53 + <div class="col number">5</div>
54 + <div class="col title">5번째게시물</div>
55 + <div class="col date">2013-10-01</div>
56 + <div class="col name">수영</div>
57 + </div>
58 + <div class="row">
59 + <div class="col number">4</div>
60 + <div class="col title">4번째게시물</div>
61 + <div class="col date">2010-10-01</div>
62 + <div class="col name">한승연</div>
63 + </div>
64 + <div class="row">
65 + <div class="col number">3</div>
66 + <div class="col title">3번째게시물</div>
67 + <div class="col date">2012-10-01</div>
68 + <div class="col name">정니콜</div>
69 + </div>
70 + <div class="row">
71 + <div class="col number">2</div>
72 + <div class="col title">2번째게시물</div>
73 + <div class="col date">2011-10-01</div>
74 + <div class="col name">김태희</div>
75 + </div>
76 + <div class="row">
77 + <div class="col number">1</div>
78 + <div class="col title">1번째게시물</div>
79 + <div class="col date">2010-12-01</div>
80 + <div class="col name">이민정</div>
81 + </div>
82 + </div>
83 + </div>
84 +
85 + <div class="pagination">
86 + <a href="#" class="direction"><span class='arrow'>&lsaquo;</span>이전</a>
87 + <a href="#">11</a>
88 + <a href="#">12</a>
89 + <a href="#">13</a>
90 + <a href="#">14</a>
91 + <a href="#" class="current">15</a>
92 + <a href="#">16</a>
93 + <a href="#">17</a>
94 + <a href="#">18</a>
95 + <a href="#">19</a>
96 + <a href="#">20</a>
97 + <a href="#" class="direction">다음 <span class='arrow'>&rsaquo;</span></a>
98 + </div>
99 +</body>
100 +</html>
1 +<!DOCTYPE html>
2 +<html lang="ko">
3 + <head>
4 + <meta charset="utf-8">
5 + <link rel="stylesheet" type="text/css" href="./CSS_Style_Sheet/CSS_Style_Quiz.css"/>
6 + </head>
7 + <body>
8 + <span><h1 class="title">황진하_2012104136</h1></span>
9 + <br>
10 + <img class="mainimage" src="./khu_image.PNG">
11 +
12 + <div>
13 + <h3>소개</h3>
14 + <ul class="squre">
15 + <li>본인을 소개하는 소개란 입니다..</li>
16 + </ul>
17 + </div>
18 + <hr>
19 + <div>
20 + <h3>학력</h3>
21 + <ul class="squre">
22 + <li>등촌초등학교 졸업</li>
23 + <li>백석중학교 졸업</li>
24 + <li>대일고등학교 졸업</li>
25 + <li>경희대학교 컴퓨터 공학과 재학 중</li>
26 + </ul>
27 + </div>
28 + <hr>
29 + <div>
30 + <h3>프로젝트 Git Url</h3>
31 + <ul class="squre">
32 + <li><a href="http://khuhub.khu.ac.kr/2012104136/2017-1-WebServiceProgramming-2012104136", target_"_blank"> KHU hub </a></li>
33 + <li><a href="https://github.com/Phigaro/", target="_blank"> Github </a></li>
34 + </ul><br>
35 + </div>
36 + <hr>
37 + <div>
38 + <h3>이번학기 수강목록</h3>
39 + <table>
40 + <thead>
41 + <tr>
42 + <th>2017-1</th>
43 + </tr>
44 + </thead>
45 + <tbody>
46 + <tr><td>공학과 윤리</td></tr>
47 + <tr><td>네트워크 분석 및 설계</td></tr>
48 + <tr><td>멀티미디어 시스템</td></tr>
49 + <tr><td>임베디드 소프트웨어</td></tr>
50 + <tr><td>창의적 종합 설계</td></tr>
51 + <tr><td>설계프로젝트C</td></tr>
52 + <tr><td>웹서비스 프로그래밍</td></tr>
53 + </tbody>
54 + </table>
55 + </div>
56 + </body>
57 +</html>
No preview for this file type
1 +a.main_title {
2 + text-decoration: none;
3 +}
4 +
5 +a.sub_link{
6 + text-decoration: none;
7 +}
8 +
9 +h1 {
10 + font-size: 3em;
11 + text-align: center;
12 + width: 90%;
13 + border-radius: 10px;
14 + margin: 30px auto;
15 + background-color: lightblue;
16 + text-align: center;
17 +}
18 +
19 +h3 {
20 + background-color:lightgoldenrodyellow;
21 + text-align: center;
22 + border-radius: 10px;
23 + width: 15%;
24 + margin: 30px;
25 +}
26 +
27 +img {
28 + display: block;
29 + margin: auto;
30 + width: 40%;
31 +}
32 +
33 +ul{
34 +
35 +}
36 +
37 +li{
38 +
39 +}
40 +
41 +div.Document{
42 + font-size: 12px;
43 +}
44 +
45 +link:hover{
46 + background-color: red;
47 +}
...\ No newline at end of file ...\ No newline at end of file
1 +/*
2 +html{
3 + color: #000;
4 + background: #fff;
5 + padding: 20px 0;
6 + font: 14px/28px "맑은 고딕", "Malgun Gothic", "굴림", "Gulim", Verdan, Arial, Tahoma;
7 +}
8 +*/
9 +
10 +.pagination {
11 + margin-top: 30px;
12 + width: 50%;
13 + text-align: center;
14 +}
15 +
16 +.pagination span.arrow{
17 + color: #246d9c;
18 + text-decoration: none;
19 + margin: 0.2em;
20 +}
21 +
22 +.pagination a{
23 + color: #246d9c;
24 + text-decoration: none;
25 + font-weight: bold;
26 + font-size: 14px;
27 + padding: 0.5em;
28 + margin: 0 1px 0 0;
29 + border-radius: 20%;
30 +}
31 +
32 +.pagination a.current {
33 + color: #8a1c5e;
34 +}
35 +
36 +.pagination a.direction{
37 + color: #246d9c;
38 +}
39 +
40 +.pagination a:hover,
41 +.pagination a.current:hover {
42 + background: gold;
43 + text-decoration: none;
44 + font-weight: bold;
45 +}
1 +html{
2 + color:#000;
3 + background:#fff;
4 + padding:20px 0;
5 + font: 14px/20px "맑은 고딕", "Malgun Gothic", "굴림", "Gulim", Verdan, Arial, Tahoma;
6 +}
7 +
8 +h1.title{
9 + text-align: center;
10 + font-weight: bold;
11 + width:50%;
12 + border-radius: 10px;
13 + margin: 30 20;
14 + padding-top: 20px;
15 + padding-bottom: 20px;
16 + background-color: lightgreen;
17 +}
18 +
19 +#board {
20 + width:50%;
21 + border-color:#888;
22 + border-width:2px;
23 + border-top-style:solid;
24 + border-bottom-style:solid;
25 + margin:0;
26 + padding:0;
27 +}
28 +
29 +#header{
30 + background-color: lightblue;
31 + color: darkred;
32 + font-weight: bold;
33 +}
34 +
35 +#header div.title {
36 + text-align: center;
37 + color: darkred;
38 +}
39 +
40 +div.col {
41 + text-align: center;
42 + margin: 1em;
43 + float: left;
44 +}
45 +
46 +div.row{
47 + border-color:#ccc;
48 + border-width:1px;
49 + border-top-style:solid;
50 + border-bottom-style:solid;
51 + overflow:auto;
52 +}
53 +
54 +div.number{
55 + width:50px;
56 +}
57 +
58 +div.title{
59 + text-align: left;
60 + color:cornflowerblue;
61 + width:570px;
62 +}
63 +
64 +div.date{
65 + width: 100px;
66 + float: right;
67 +}
68 +
69 +div.name{
70 + width: 100px;
71 + float: right;
72 +}
...\ No newline at end of file ...\ No newline at end of file
1 +/*
2 +
3 +id -> #name (문서 내 유일)
4 +class -> .name (동일 한 속성을 지닐 요소들을 정의)
5 +tag -> name (특정 태그)
6 +
7 +selector의 조합
8 +p.box (p 태그 중에 class가 box인것)
9 +p#summary (p 태그 중에 id가 summary 인것)
10 +
11 +Grouping
12 +h1, h2, h3 color : red;} (모두 지정함)
13 +
14 +Nesting
15 +p span : (p 태그 안에있는 span 태그 )
16 +p > span : (p 태그 안에있는 sapn 태그 )
17 +
18 +*/
19 +
20 +html{
21 + background-color: white;
22 + color: black;
23 + padding: 20px 0;
24 + font: 14px/28px "맑은 고딕", "Malgun Gothic", "굴림", "Gulim", Verdan, Arial, Tahoma;
25 +}
26 +
27 +img.mainimage{
28 + width: 20%;
29 + display: block;
30 + margin-left: auto;
31 + margin-right: auto;
32 +}
33 +
34 +h1.title {
35 + font-size: 3em;
36 + text-align: center;
37 + width: 90%;
38 + border-radius: 10px;
39 + padding: 20px 30px;
40 + margin: 30px auto;
41 + background-color: lightblue;
42 + text-align: center;
43 + color: green;
44 +}
45 +
46 +h3{
47 + background-color:lightgoldenrodyellow;
48 + text-align: center;
49 + border-radius: 10px;
50 + width: 15%;
51 + margin: 20px;
52 +}
53 +
54 +ul.squre{
55 + list-style-type: square;
56 +}
57 +
58 +table {
59 + border-collapse: collapse;
60 + margin: 40px;
61 +}
62 +
63 +table, th, td {
64 + border: 1px solid black;
65 +}
...\ No newline at end of file ...\ No newline at end of file
1 +<!DOCTYPE html>
2 +<html lang="ko">
3 +
4 +<head>
5 + <meta charset="utf-8">
6 + <style>
7 + table {
8 + border-collapse: collapse;
9 + }
10 +
11 + th,
12 + td {
13 + text-align: left;
14 + padding: 8px;
15 + }
16 +
17 + tr:nth-child(odd) {
18 + background-color: #f2f2f2
19 + }
20 +
21 + th {
22 + background-color: #4CAF50;
23 + color: white;
24 + column-span: all;
25 + }
26 + </style>
27 +</head>
28 +
29 +<body>
30 + <div style="overflow-x:auto;">
31 + <table border="1">
32 + <thead>
33 + <tr>
34 + <th>
35 + Quiz 1
36 + </th>
37 + </tr>
38 + <tr>
39 + <th>
40 + 학번
41 + </th>
42 + <td>
43 + 2010104019
44 + </td>
45 + <td>
46 + 2014110448
47 + </td>
48 + <td>
49 + 2012104136
50 + </td>
51 + </tr>
52 + <tr>
53 + <th>
54 + 점수
55 + </th>
56 + <td>40</td>
57 + <td>50</td>
58 + <td>
59 + 50
60 + </td>
61 + </tr>
62 + </thead>
63 + </table>
64 + </div>
65 +</body>
66 +
67 +</html>
...\ No newline at end of file ...\ No newline at end of file
1 +<?xml version="1.0" encoding="UTF-8"?>
2 +<configuration>
3 + <system.webServer>
4 + <directoryBrowse enabled="true" />
5 + </system.webServer>
6 +</configuration>
1 +div.title{
2 +
3 +}
4 +
5 +div.img{
6 +}
7 +
8 +div.description{
9 +}
10 +
11 +h1 {
12 + font-size: 3em;
13 + text-align: center;
14 + width: 90%;
15 + border-radius: 10px;
16 + margin: 30px auto;
17 + background-color: lightblue;
18 + text-align: center;
19 + margin: 3 2;
20 +}
21 +
22 +h3.subtitle {
23 + background-color:lightgoldenrodyellow;
24 + text-align: center;
25 + border-radius: 10px;
26 + width: 20%;
27 +}
28 +
29 +img {
30 + display: block;
31 + margin: auto;
32 + width: 90%;
33 +}
34 +
35 +div.Document{
36 + font-size: 12px;
37 +}
38 +
39 +link:hover{
40 + background-color: red;
41 +}
42 +
43 +
44 +
45 +@media only screen and (min-device-width : 768px) {
46 + div.img {
47 + width: 50%;
48 + display: inline-block;
49 + vertical-align: top;
50 + }
51 +
52 + div.member{
53 + width: 40%;
54 + display: inline-block;
55 + vertical-align: top;
56 + padding-left: 1em;
57 + box-sizing: border-box;
58 + }
59 +
60 + div.description {
61 + width: 99%;
62 + display: inline-block;
63 + vertical-align: top;
64 + padding-left: 1em;
65 + box-sizing: border-box;
66 + }
67 + div.description p {
68 + margin-top: 0;
69 + }
70 + .member ul > li {
71 + width: 25%;
72 + }
73 +}
74 +
75 +@media only screen and (min-device-width : 1025px) {
76 + div.img {
77 + width: 30%;
78 + }
79 + div.description {
80 + width: 50%;
81 + padding-right: 1em;
82 + }
83 + div.member {
84 + width: 19%;
85 + float: right;
86 + box-sizing: border-box;
87 + display: inline-block;
88 + vertical-align: top;
89 + }
90 + div.member > h3.subtitle{
91 + font-size: 20pt;
92 + width:70%;
93 + }
94 + .member ul > li {
95 + font-size: 14pt;
96 + width: 100%;
97 + }
98 + h3 {
99 + margin-top: 0;
100 + }
101 +}
1 +/*
2 +html{
3 + color: #000;
4 + background: #fff;
5 + padding: 20px 0;
6 + font: 14px/28px "맑은 고딕", "Malgun Gothic", "굴림", "Gulim", Verdan, Arial, Tahoma;
7 +}
8 +*/
9 +
10 +.pagination {
11 + margin-top: 30px;
12 + width: 50%;
13 + text-align: center;
14 +}
15 +
16 +.pagination span.arrow{
17 + color: #246d9c;
18 + text-decoration: none;
19 + margin: 0.2em;
20 +}
21 +
22 +.pagination a{
23 + color: #246d9c;
24 + text-decoration: none;
25 + font-weight: bold;
26 + font-size: 14px;
27 + padding: 0.5em;
28 + margin: 0 1px 0 0;
29 + border-radius: 20%;
30 +}
31 +
32 +.pagination a.current {
33 + color: #8a1c5e;
34 +}
35 +
36 +.pagination a.direction{
37 + color: #246d9c;
38 +}
39 +
40 +.pagination a:hover,
41 +.pagination a.current:hover {
42 + background: gold;
43 + text-decoration: none;
44 + font-weight: bold;
45 +}
1 +html{
2 + color:#000;
3 + background:#fff;
4 + padding:20px 0;
5 + font: 14px/20px "맑은 고딕", "Malgun Gothic", "굴림", "Gulim", Verdan, Arial, Tahoma;
6 +}
7 +
8 +h1.title{
9 + text-align: center;
10 + font-weight: bold;
11 + width:50%;
12 + border-radius: 10px;
13 + margin: 30 20;
14 + padding-top: 20px;
15 + padding-bottom: 20px;
16 + background-color: lightgreen;
17 +}
18 +
19 +#board {
20 + width:50%;
21 + border-color:#888;
22 + border-width:2px;
23 + border-top-style:solid;
24 + border-bottom-style:solid;
25 + margin:0;
26 + padding:0;
27 +}
28 +
29 +#header{
30 + background-color: lightblue;
31 + color: darkred;
32 + font-weight: bold;
33 +}
34 +
35 +#header div.title {
36 + text-align: center;
37 + color: darkred;
38 +}
39 +
40 +div.col {
41 + text-align: center;
42 + margin: 1em;
43 + float: left;
44 +}
45 +
46 +div.row{
47 + border-color:#ccc;
48 + border-width:1px;
49 + border-top-style:solid;
50 + border-bottom-style:solid;
51 + overflow:auto;
52 +}
53 +
54 +div.number{
55 + width:50px;
56 +}
57 +
58 +div.title{
59 + text-align: left;
60 + color:cornflowerblue;
61 + width:570px;
62 +}
63 +
64 +div.date{
65 + width: 100px;
66 + float: right;
67 +}
68 +
69 +div.name{
70 + width: 100px;
71 + float: right;
72 +}
...\ No newline at end of file ...\ No newline at end of file
1 +html{
2 + background-color: white;
3 + color: black;
4 + padding: 20px 0;
5 + font: 14px/28px "맑은 고딕", "Malgun Gothic", "굴림", "Gulim", Verdan, Arial, Tahoma;
6 +}
7 +
8 +p.Screen_Text{
9 + color: green;
10 +}
11 +
12 +h1.title {
13 + font-size: 3em;
14 + text-align: center;
15 + width: 90%;
16 + border-radius: 10px;
17 + padding: 20px 30px;
18 + margin: 30px auto;
19 + background-color: lightblue;
20 + text-align: center;
21 + color: black;
22 +}
23 +
24 +h3.subtitle{
25 + font-size: 1.5em;
26 + white-space:nowrap;
27 + background-color:lightgoldenrodyellow;
28 + text-align: center;
29 + border-radius: 20px;
30 + width: 99%;
31 +}
32 +
33 +img.mainimage{
34 + display: block;
35 + margin: auto;
36 + width: 40%;
37 +}
38 +
39 +ul.squre{
40 + list-style-type: square;
41 +}
42 +
43 +table {
44 + border-collapse: collapse;
45 + margin: 15px;
46 +}
47 +
48 +table, th, td {
49 + border: 1px solid black;
50 +}
51 +
52 +@media only screen and (min-width : 768px) {
53 + div.image {
54 + display: inline-block;
55 + vertical-align: top;
56 + }
57 +
58 + div.academic{
59 + width: 40%;
60 + display: inline-block;
61 + vertical-align: top;
62 + padding-left: 1em;
63 + box-sizing: border-box;
64 + }
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 +}
86 +
87 +@media only screen and (min-width : 1025px) {
88 + div.image {
89 + width: 30%;
90 + }
91 +
92 + div.description {
93 + width: 50%;
94 + padding-right: 1em;
95 + }
96 +
97 + div.academic {
98 + width: 19%;
99 + float:right;
100 + box-sizing: border-box;
101 + display: inline-block;
102 + vertical-align: top;
103 + }
104 +
105 + p.Screen_Text{
106 + color: blue;
107 +}
108 +
109 + div.member > h3.subtitle{
110 + font-size: 20pt;
111 + width:70%;
112 + }
113 + .member ul > li {
114 + font-size: 14pt;
115 + width: 100%;
116 + }
117 + h3 {
118 + margin-top: 0;
119 + }
120 +}
1 +<!DOCTYPE html>
2 +<html lang="ko">
3 +
4 +<head>
5 + <meta charset="utf-8">
6 + <meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' name='viewport' />
7 + <link rel="stylesheet" type="text/css" href="./CSS_Style_Sheet/CSS_Style_Pr01.css" />
8 +</head>
9 +
10 +<body>
11 + <div class="title">
12 + <p>
13 + <h1>AOA</h1>
14 + </p>
15 + </div>
16 +
17 + <div class="img">
18 + <img src="http://img.rsrs.co.kr/artist/images/500/801326/80132659.jpg">
19 + </div>
20 +
21 + <div class="member">
22 + <h3 class="subtitle">AOA</h3>
23 + <ul>
24 + <li>지민</li>
25 + <li>초아</li>
26 + <li>설현</li>
27 + <li>유나</li>
28 + <li>혜정</li>
29 + <li>찬미</li>
30 + <li>민아</li>
31 + </ul>
32 + </div>
33 + <div class="description">
34 + <hr>
35 + <h3 class="subtitle">설명</h3>
36 + <ul>
37 + <li>
38 + <p>AOA는 대한민국 7인조 걸 그룹으로, 소속사는 FNC 엔터테인먼트이다. 유닛 그룹으로는 지민, 초아, 유나, 민아로 구성된 밴드 유닛 AOA 블랙과 혜정 , 설현, 찬미로 구성된 댄스 유닛
39 + AOA 화이트, 유나, 혜정 , 찬미로 구성된 러블리 컨셉의 AOA 크림이 있다. 2016년 10 월 15일 멤버 유경은 계약 해지로 인해 탈퇴 하게 되었다. 하지 만 객원 멤버로
40 + 밴드 활동은 꾸준히 할 예정이다.</p>
41 + </li>
42 + </ul>
43 + <br>
44 + <hr>
45 + <h3 class="subtitle">소속사</h3>
46 + <ul>
47 + <li><a href="https://ko.wikipedia.org/wiki/FNC_%EC%97%94%ED%84%B0%ED%85%8C%EC%9D%B8%EB%A8%BC%ED%8A%B8" , target_
48 + "_blank"> FNC 엔터테인먼트 </a></li>
49 + </ul><br>
50 + <hr>
51 + <h3 class="subtitle">앨범</h3>
52 + <ul>
53 + <li>단발머리</li>
54 + <li>사뿐사뿐</li>
55 + <li>Heart Attack</li>
56 + <li>Good Luck</li>
57 + </ul>
58 + </div>
59 +</body>
60 +
61 +</html>
...\ No newline at end of file ...\ No newline at end of file
1 +<!DOCTYPE html>
2 +<html lang="ko">
3 +
4 +<head>
5 + <meta charset="utf-8">
6 + <link rel="stylesheet" type="text/css" href="./CSS_Style_Sheet/CSS_Style_Quiz.css" />
7 +</head>
8 +
9 +<body>
10 + <div class="title">
11 + <p>
12 + <h1 class="title">황진하 2012104136</h1>
13 + </p>
14 + <br>
15 + </div>
16 +
17 + <div class="image">
18 + <img class="mainimage" src="./khu_image.PNG">
19 + </div>
20 +
21 + <div class="academic">
22 + <h3 class="subtitle">학력</h3>
23 + <ul class="squre">
24 + <li>신정유치원 졸업</li>
25 + <li>등촌초등학교 졸업</li>
26 + <li>백석중학교 졸업</li>
27 + <li>대일고등학교 졸업</li>
28 + <li>경희대학교 컴퓨터 공학과 재학 중</li>
29 + </ul>
30 + <br>
31 + </div>
32 + <div class="description">
33 + <div class="introduce">
34 + <h3 class="subtitle">소개</h3>
35 + <ul class="squre">
36 + <li>
37 + <p> 본인을 소개하는 소개란 입니다. 아래는 소개용 텍스트 예시입니다. 텍스트 예시 텍스트 예시 텍스트 예시 텍스트 예시 텍스트 예시 텍스트 예시 텍스트 예시 텍스트 예시 텍스트 예시 텍스트
38 + 예시 텍스트 예시 텍스트 예시 텍스트 예시 텍스트 예시 텍스트 예시 텍스트 예시 텍스트 예시 텍스트 예시 텍스트 예시 텍스트 예시 텍스트 예시 텍스트 예시 텍스트 예시 텍스트
39 + 예시 텍스트 예시 텍스트 예시 텍스트 예시 텍스트 예시 텍스트 예시 텍스트 예시 텍스트 예시</p>
40 + </li>
41 + <li>
42 + <p class="Screen_Text"> Witdh가 768px 이하 일시 모바일 화면이며, 해당 글씨가 초록색으로 표시됩니다.</p>
43 + </li>
44 + <li>
45 + <p class="Screen_Text"> Witdh가 768px 초과 일시 태블릿 화면이며, 해당 글씨가 붉은색으로 표시됩니다.</p>
46 + </li>
47 + <li>
48 + <p class="Screen_Text"> Witdh가 1025px 이하 일시 데스크탑 화면이며, 해당 글씨가 파란색으로 표시됩니다.</p>
49 + </li>
50 + <li>
51 + <p> 디바이스의 Witdh를 변경하기 위해 Chrome 브라우저 기준 F12후 Ctrl + Shift + M 을 눌러주세요. </p>
52 + </li>
53 + </ul>
54 + </div>
55 + <br>
56 +
57 + <div class="project">
58 + <h3 class="subtitle">프로젝트 Git Url</h3>
59 + <ul class="squre">
60 + <li><a href="http://khuhub.khu.ac.kr/2012104136/2017-1-WebServiceProgramming-2012104136" , target_ "_blank"> KHU hub </a></li>
61 + <li><a href="https://github.com/Phigaro/" , target="_blank"> Github </a></li>
62 + </ul><br>
63 + </div>
64 + <div class="class_list">
65 + <h3 class="subtitle">이번학기 수강목록</h3>
66 + <table>
67 + <thead>
68 + <tr>
69 + <th>2017-1</th>
70 + </tr>
71 + </thead>
72 + <tbody>
73 + <tr>
74 + <td>공학과 윤리</td>
75 + </tr>
76 + <tr>
77 + <td>네트워크 분석 및 설계</td>
78 + </tr>
79 + <tr>
80 + <td>멀티미디어 시스템</td>
81 + </tr>
82 + <tr>
83 + <td>임베디드 소프트웨어</td>
84 + </tr>
85 + <tr>
86 + <td>창의적 종합 설계</td>
87 + </tr>
88 + <tr>
89 + <td>설계프로젝트C</td>
90 + </tr>
91 + <tr>
92 + <td>웹서비스 프로그래밍</td>
93 + </tr>
94 + </tbody>
95 + </table>
96 + </div>
97 + </div>
98 +</body>
99 +
100 +</html>
...\ No newline at end of file ...\ No newline at end of file
1 +<!DOCTYPE html>
2 +<html>
3 +<head>
4 +<meta name="viewport" content="width=device-width, initial-scale=1.0">
5 +<style>
6 +* {
7 + box-sizing: border-box;
8 +}
9 +.row::after {
10 + content: "";
11 + clear: both;
12 + display: table;
13 +}
14 +[class*="col-"] {
15 + float: left;
16 + padding: 15px;
17 +}
18 +html {
19 + font-family: "Lucida Sans", sans-serif;
20 +}
21 +.header {
22 + background-color: #9933cc;
23 + color: #ffffff;
24 + padding: 15px;
25 +}
26 +.menu ul {
27 + list-style-type: none;
28 + margin: 0;
29 + padding: 0;
30 +}
31 +.menu li {
32 + padding: 8px;
33 + margin-bottom: 7px;
34 + background-color: #33b5e5;
35 + color: #ffffff;
36 + box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
37 +}
38 +.menu li:hover {
39 + background-color: #0099cc;
40 +}
41 +.aside {
42 + background-color: #33b5e5;
43 + padding: 15px;
44 + color: #ffffff;
45 + text-align: center;
46 + font-size: 14px;
47 + box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
48 +}
49 +.footer {
50 + background-color: #0099cc;
51 + color: #ffffff;
52 + text-align: center;
53 + font-size: 12px;
54 + padding: 15px;
55 +}
56 +/* For mobile phones: */
57 +[class*="col-"] {
58 + width: 100%;
59 +}
60 +@media only screen and (min-width: 768px) {
61 + /* For desktop: */
62 + .col-1 {width: 8.33%;}
63 + .col-2 {width: 16.66%;}
64 + .col-3 {width: 25%;}
65 + .col-4 {width: 33.33%;}
66 + .col-5 {width: 41.66%;}
67 + .col-6 {width: 50%;}
68 + .col-7 {width: 58.33%;}
69 + .col-8 {width: 66.66%;}
70 + .col-9 {width: 75%;}
71 + .col-10 {width: 83.33%;}
72 + .col-11 {width: 91.66%;}
73 + .col-12 {width: 100%;}
74 +}
75 +</style>
76 +</head>
77 +<body>
78 +<div class="header">
79 + <h1>Chania</h1>
80 +</div>
81 +
82 +<div class="row">
83 +
84 +<div class="col-3 menu">
85 + <ul>
86 + <li>The Flight</li>
87 + <li>The City</li>
88 + <li>The Island</li>
89 + <li>The Food</li>
90 + </ul>
91 +</div>
92 +
93 +<div class="col-6">
94 + <h1>The City</h1>
95 + <p>Chania is the capital of the Chania region on the island of Crete. The city can be divided in two parts, the old town and the modern city.</p>
96 +</div>
97 +
98 +<div class="col-3 right">
99 + <div class="aside">
100 + <h2>What?</h2>
101 + <p>Chania is a city on the island of Crete.</p>
102 + <h2>Where?</h2>
103 + <p>Crete is a Greek island in the Mediterranean Sea.</p>
104 + <h2>How?</h2>
105 + <p>You can reach Chania airport from all over Europe.</p>
106 + </div>
107 +</div>
108 +
109 +</div>
110 +
111 +<div class="footer">
112 + <p>Resize the browser window to see how the content respond to the resizing.</p>
113 +</div>
114 +
115 +</body>
116 +</html>