반응형
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<title>2021 MINI HOMEPAGE</title>
<link rel="stylesheet" href="./static/style.css" />
</head>
<body>
<div class="bookcover">
<div class="bookdot">
<div class="page">
<div class="container1">
<div class="item1 box">TODAY <sapn style="color:red">28</sapn> | TOTAL 123456</div>
<div class="item2"></div>
</div>
<div class="container2">
<div class="item3">수지니의 추억상ㅈr..(*ˊᵕˋo💐o<span class="tab">https://cafe.naver.com/codeuniv</span></div>
<div class="item4"></div>
</div>
<div class="container3">
</div>
</div>
</div>
</div>
</body>
</html>
body {
background-color: #a3a3a3;
/** body에 배경이미지 적용 */
background-image: url("../static/images/pattern.png");
/** 고정된 사이즈로 설정 */
background-size: 100px;
/** 기본 body 사이즈를 화면 크기로 고정 */
position: fixed;
left: 0;
top: 0;
right: 0;
bottom: 0;
}
.bookcover {
/** 배경 색깔 지정 */
background-color: #b4d1da;
/** 모서리 둥글게 */
border-radius: 9px;
/** 윤곽선 */
border: 1px solid #738186;
/** 기본 너비, 높이 지정 (반응형 X) */
width: 960px;
height: 660px;
/** 좌우 마진을 auto(중앙에 배치), 상하 마진을 100px로 지정 */
margin: 100px auto;
/** .bookdot 요소에서 absolute 속성값을 이용하기 위해 position: relative 로 설정 */
position: relative;
}
.bookdot {
border: 2px dashed white;
border-radius: 9px;
left: 15px;
top: 15px;
right: 15px;
bottom: 15px;
position: absolute;
}
.page{
width: 905px;
height: 605px;
background-color: #d4d4d4;
margin: 10px;
border-radius: 9px;
position: absolute;
display: flex;
}
.container1{
flex:0.4;
display: flex;
flex-direction: column;
margin-left: 15px;
margin-right: 5px;
margin-top: 15px;
margin-bottom: 15px;
}
.item1{
flex: 0.1;
border: none;
padding: 5px;
}
.item2{
flex:2;
border: 2px solid #d4d4d4;
border-radius: 9px;
background-color: white;
}
.container2{
flex:1;
display: flex;
flex-direction: column;
margin-left: 10px;
margin-top: 15px;
margin-bottom: 15px;
}
.item3{
flex:0.1;
border: none;
padding: 5px;
}
.item4{
flex:2;
border: 2px solid #d4d4d4;
border-radius: 9px;
background-color: white;
}
.container3{
flex: 0.1;
border: 1px solid grey;
margin-right: 15px;
margin-top: 15px;
margin-bottom: 15px;
}
.box{
display: inline-block;
text-align: center;
font-size: 14px;
}
.tab{
display: inline-block;
margin-left: 70px;
}
반응형
'Web > 모각코' 카테고리의 다른 글
| [ Visual Studio Code ] 싸이월드 페이지 만들기 - ④ (0) | 2021.12.29 |
|---|---|
| [ Visual Studio Code ] 싸이월드 페이지 만들기 - ③ (0) | 2021.12.29 |
| [ Visual Studio Code ] 싸이월드 페이지 만들기 - ① (0) | 2021.12.26 |
| [ Visual Studio Code ] 웹 페이지 생성 (0) | 2021.12.24 |
| [ Visual Studio Code ] 위키백과 웹페이지 생성 (0) | 2021.12.22 |