5일차_미니홈피 기본 레이아웃 만들기

Programing/study

5일차_미니홈피 기본 레이아웃 만들기

KingBini 2021. 9. 14. 19:22

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>