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