1. 결과물
2. html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./css/test04.css">
<title>수성아트피아</title>
</head>
<body>
<div id="header">
<ul class="logo">
<li>
<img src="./images/logo.png">
</li>
</ul>
</div>
<div id="contents">
<div class="info">
<ul>
<li class="text1">
<p style= "color:rgb(101, 101, 101)">수성아트피아</p>
<p style= "color:red; float: left;">서버점검</p>
<p style="color:rgb(101, 101, 101)">안내</p>
</li>
<li class="text2">
<p>죄송합니다.<br>
현재 서버점검중으로<br>
사이트에 접속하실 수 없습니다.<br>
</p>
</li>
<li class="text3">
<p>빠른 시일내에복구하여<br>
정상적으로 이용하실 수 있도록 하겠습니다.<br>
</p>
</li>
<li class="text4">
<span style="color: rgb(38, 116, 182); font-family: hsquare">
점검기간 :
</span>
<span style="font-family: simplehae; color: rgb(101, 101, 101);">
10. 19(월) ~ 10. 21(수)
</span>
</li>
<li class="text5">
<span style="color: rgb(38, 116, 182); font-family: hsquare">
문의사항 :
</span>
<span style="font-family: simplehae; color: rgb(101, 101, 101);">
053-668-1800
</span>
</li>
</ul>
</div>
<div class="repair">
<img src="./images/repair.png" >
</div>
</div>
<div id="footer">
<div class="bnr">
<img src="./images/bnr.png">
</div>
<div class="copyright">
<li>
COPYRIGHT@SUSEONG ARTPIA. ALL RIGHTS RESERVED.
</li>
</div>
</div>
</body>
</html>3. css
*{
margin: 0;
padding: 0;
}
@font-face{
src: url(../fonts/Cafe24Ohsquare.ttf);
font-family: "hsquare";
}
@font-face{
src: url(../fonts/Cafe24Simplehae.ttf);
font-family: "simplehae";
}
ul,li{
list-style: none;
}
#header{
width: 1700px;
height: 150px;
}
#header>.logo{
padding-top: 100px;
padding-left: 400px;
box-sizing: border-box;
}
#contents{
width: 1700px;
height: 500px;
}
#contents>.info>ul{
width: 700px;
height: 450px;
float: left;
margin-left: 400px;
box-sizing: border-box;
}
#contents>.info>ul>.text1{
font-family: "hsquare";
font-size: 40px;
margin-top: 20px;
}
#contents>.info>ul>.text2{
font-weight: bold;
margin-top: 40px;
color: rgb(147,147,147);
}
#contents>.info>ul>.text3{
font-weight: bold;
margin-top: 30px;
color: rgb(166,166,166);
}
#contents>.info>ul>.text4{
margin-top: 30px;
font-size: 25px;
}
#contents>.info>ul>.text5{
font-size: 25px;
}
#contents>.repair{
width: 300px;
height: 310px;
float: left;
margin-top: 120px;
}
#footer{
width: 1700px;
height: 300px;
background: rgb(238,238,238);
position: relative;
}
#footer>.bnr{
width: 1700px;
height: 140px;
background: rgb(251,212,72);
position: absolute;
top: 10px;
}
#footer>.bnr>img{
height: 140px;
padding-left: 400px;
}
#footer>.copyright{
width: 1700px;
height: 100px;
background: rgb(51,51,51);
position: absolute;
top: 160px;
color: rgb(212, 212, 212);
font-weight: 500;
text-align: center;
padding-top: 35px;
box-sizing: border-box;
}
'HTML & CSS' 카테고리의 다른 글
| [HTML][CSS] :first-child, :first-of-type,:nth-child 선택자 (0) | 2020.12.22 |
|---|---|
| [HTML][CSS] display 속성 - block, inline, inline-block (0) | 2020.12.21 |
| [HTML][CSS] 리트리버 소개 과제 - float: left; (0) | 2020.12.18 |
| [HTML] 절대경로, 상대경로 - 이미지 경로 표기법 (0) | 2020.12.17 |
| [html][css] 관람등급 만들기 - div,span,table,display (0) | 2020.12.16 |