Showing
24 changed files
with
1221 additions
and
4 deletions
... | @@ -10,7 +10,7 @@ h1 { | ... | @@ -10,7 +10,7 @@ h1 { |
10 | line-height: 150%; | 10 | line-height: 150%; |
11 | margin-bottom: 0.5em; | 11 | margin-bottom: 0.5em; |
12 | border-bottom: 2px solid #ccc; | 12 | border-bottom: 2px solid #ccc; |
13 | - font-weight: bold; | 13 | + font-weight: bold; |
14 | text-align: center; | 14 | text-align: center; |
15 | } | 15 | } |
16 | 16 | ... | ... |
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 | }); | ... | ... |
CSS/CSS_Pr.html
0 → 100644
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> |
CSS/CSS_Pr_01.html
0 → 100644
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 |
CSS/CSS_Pr_02.html
0 → 100644
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'>‹</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'>›</span></a> | ||
22 | + </div> | ||
23 | +</body> | ||
24 | +</html> |
CSS/CSS_Pr_03.html
0 → 100644
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'>‹</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'>›</span></a> | ||
98 | + </div> | ||
99 | +</body> | ||
100 | +</html> |
CSS/CSS_Quiz_2012104136.html
0 → 100644
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> |
CSS/CSS_Quiz_2012104136.zip
0 → 100644
No preview for this file type
CSS/CSS_Style_Sheet/CSS_Style_Pr01.css
0 → 100644
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 |
CSS/CSS_Style_Sheet/CSS_Style_Pr02.css
0 → 100644
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 | +} |
CSS/CSS_Style_Sheet/CSS_Style_Pr03.css
0 → 100644
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 |
CSS/CSS_Style_Sheet/CSS_Style_Quiz.css
0 → 100644
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 |
CSS/Table.html
0 → 100644
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 |
CSS/khu_image.PNG
0 → 100644
98.1 KB
HTML/web.config
0 → 100644
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 |
No preview for this file type
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> |
Responsive_Web_Design/khu_image.PNG
0 → 100644
98.1 KB
-
Please register or login to post a comment