body{
background-color:rgb(152, 151, 151);
background-image: url(뼈대패턴.png);
background-size: 100px;
position: fixed;
left: 0;
top: 0;
right: 0;
bottom: 0;
}
/**position 속성값 static(포지션 기본값), relative, absolute, fixed 순으로 상대적으로 레이아웃박스의 위치를 잡을 수있는거같다. **/
.bookcover{
background-color:rgb(112, 172, 166);
border-radius: 9px;
border: 1px solid gray;
width: 960px;
height: 660px;
margin: 100px auto;
position:relative;
}
.점선{
border: 1px dashed honeydew;
width: 930px;
height: 630px;
margin: 15px ;
border-radius: 9px;
position: absolute;
right:0px; bottom:0px;
}
.페이지{
background-color: honeydew;
border-radius: 9px;
width: 910px;
height: 610px;
margin: 10px;
position: fixed;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>2021 MINI HOMEPAGE(기본레이아웃 5일차!)</title>
<link rel="stylesheet" href="./images/style.css"/>
</head>
<!--To Day Do it Tag dvi,span Tag and position property) 기본 레이아웃 적용-->
<body>
<!--
왜 이건 적용이안될까...
<dvi class="bookcover"></dvi>
<dvi class="bookdot"></dvi>
<dvt class="page"></dvt>
-->
<div class="bookcover">
<div class="점선">
<div class="페이지"></div>
</div>
</div>
</body>
</html>'Programing > study' 카테고리의 다른 글
| 7일차_CssFlex로 기본레이아웃 만들기 (0) | 2021.09.17 |
|---|---|
| 6일차!_Css-Flex 속성을 이용하여 미니홈피 기본레이아웃 만들기 (0) | 2021.09.15 |
| 4일차_복습! (0) | 2021.09.14 |
| 3일차_폰트 적용 (0) | 2021.09.10 |
| 모각코 스터디2일차 (0) | 2021.09.10 |