https://ninefloor.github.io/web-practice/work/8/
https://ninefloor.github.io/web-practice/work/8/
수성아트피아 서버점검안내 죄송합니다. 현재 서버점검중으로 사이트에 접속하실 수 없습니다. 빠른 시일 내에 복구하여 정상적으로 이용하실 수 있도록 하겠습니다. 점검기간 : 10. 19(월) ~ 10. 2
ninefloor.github.io
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="./css/style.css">
</head>
<body>
<div id="wrap">
<div id="contents">
<div class="logo">
<img src="./images/logo.png" alt="logo">
</div>
<div class="title">
수성아트피아<br>
<span class="red">서버점검</span>안내
</div>
<div class="con1">
죄송합니다. <br>
현재 서버점검중으로 <br>사이트에 접속하실 수 없습니다.
</div>
<div class="con2">
빠른 시일 내에 복구하여<br>
정상적으로 이용하실 수 있도록 하겠습니다.
</div>
<div class="con3">
<span class="blue">점검기간</span> : 10. 19(월) ~ 10. 21(수)<br>
<span class="blue">문의사항</span> : 053-668-1800
</div>
<div class="img">
<img src="./images/repair.png" alt="repair">
</div>
</div>
<footer id="footer">
<div class="banner">
<a href="#">
<img src="./images/bnr_201015.png" alt="banner"></a>
</div>
<div class="copyright">
<span>COPYRIGHTⓒ SUSEONG ARTPIA. ALL RIGHTS RESERVED.</span>
</div>
</footer>
</div>
</body>
</html>HTML
/* 기본 속성 시작 */
*{
margin: 0;
padding: 0;
}
a{
text-decoration: none;
}
ul{
list-style-type: none;
}
@font-face{
src: url(../fonts/KoPubWorld\ Dotum\ Light.ttf);
font-family: "kopubdotum";
}
@font-face{
src: url(../fonts/Cafe24Ssurround.ttf);
font-family: "surround";
}
.red{
color: red;
}
.blue{
color: royalblue;
font-family: "surround";
}
/* 기본 속성 끝 */
#wrap{
width: auto;
height: auto;
}
#contents{
width: 1050px;
height: 630px;
margin: 0 auto;
position: relative;
}
#contents .logo{
width: 112px;
height: auto;
position: absolute;
left: 60px;
top: 80px;
}
#contents .title{
width: 300px;
height: auto;
font-size: 44px;
font-family: "surround";
font-weight: bolder;
position: absolute;
left: 50px;
top: 140px;
}
#contents .con1{
width: auto;
height: auto;
font-size: 20px;
font-family: "kopubdotum";
font-weight: bolder;
color: rgb(77, 77, 77);
position: absolute;
left: 50px;
top: 260px;
}
#contents .con2{
width: auto;
height: auto;
font-size: 20px;
font-family: "kopubdotum";
font-weight: bolder;
color: rgb(121, 121, 121);
position: absolute;
left: 50px;
top: 370px;
}
#contents .con3{
width: auto;
height: auto;
font-size: 25px;
font-family: "kopubdotum";
font-weight: bolder;
position: absolute;
left: 50px;
top: 450px;
}
#contents .img{
width: auto;
height: auto;
position: absolute;
left: 800px;
top: 250px;
}
#footer{
width: auto;
height: auto;
background-color: rgb(238, 238, 238);
padding-top: 10px;
box-sizing: border-box;
}
#footer .banner{
width: auto;
height: auto;
background-color: rgb(251, 212, 72);
margin-bottom: 10px;
text-align: center;
}
.banner a{
}
#footer .copyright{
width: 100%;
height: 125px;
background-color: rgb(51, 51, 51);
text-align: center;
padding-top: 50px;
box-sizing: border-box;
}
.copyright span{
color: white;
font-family: "kopubdotum";
font-weight: bold;
}CSS