반응형
<!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>
</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: white;
margin: 10px;
border-radius: 9px;
position: absolute;
}
★ 기본 뼈대는 다음 이미지 다운로드 하여 사용하였습니다. ★
반응형
'Web > 모각코' 카테고리의 다른 글
| [ Visual Studio Code ] 싸이월드 페이지 만들기 - ③ (0) | 2021.12.29 |
|---|---|
| [ Visual Studio Code ] 싸이월드 페이지 만들기 - ② (2) | 2021.12.28 |
| [ Visual Studio Code ] 웹 페이지 생성 (0) | 2021.12.24 |
| [ Visual Studio Code ] 위키백과 웹페이지 생성 (0) | 2021.12.22 |
| [ Visual Studio Code ] html 파일 만들기 - 모각코 1일차 (0) | 2021.12.21 |