6일차!_Css-Flex 속성을 이용하여 미니홈피 기본레이아웃 만들기

Programing/study

6일차!_Css-Flex 속성을 이용하여 미니홈피 기본레이아웃 만들기

KingBini 2021. 9. 15. 19:08

결과물

css 속성 Flex를 사용하여 미니홈피의안의 기본 레이아웃을 잡았다. HTML 에서 div클래스로 flex를 적용시킬 클래스를 상속을시켜 css에서 Flex를 만들어 contaicer의 안에 tem을 가로와 세로로 배열하기위해 Flax 속성인 row와 column 을 이용하였다.

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;
 display: flex;
 flex-direction: row;
}
/**Flex를 이용한 컨테이너안 아이템으로 홈페이지 레이아웃을 만들었다.**/
 .컨테이너1{
    display: flex;
    flex-direction: column;
    flex: 0.4;
 }
 .아이템1상단{
     font-size: 11px;
     text-align:center;
     margin-top: 20px;
     margin-bottom: 10px;
    flex: none; 
 }
 .item1{
    background-color: rgb(255, 255, 255);
    flex: 2;
    border: 1px solid rgb(181, 181, 181);
    border-radius: 9px;
    margin-bottom: 15px;
    margin-left: 15px;
}


 .컨테이너2{
    display: flex;
    flex: 1;
    flex-direction:column
 }
 .아이템2상단{
    font-size: 11px;
    text-align:center;
    margin-top: 20px;
    margin-bottom: 10px;
   flex: none; 
   
}
.item2{
    background-color: rgb(255, 255, 255);
    flex: 1;
    border: 1px solid rgb(181, 181, 181);
    border-radius: 9px;
    margin-bottom: 15px;
    margin-left: 15px;
}
 .컨테이너3{ 
   
    display : flex;
    flex: 0.15;
    border: 1px solid rgb(0, 0, 0);
    margin-top: 15px;
    margin-right: 15px;
    margin-bottom: 15px;
   
 }

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>2021 MINI HOMEPAGE(기본레이아웃 6일차!)</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 class= "컨테이너1">
                  <div class="아이템1상단">TODAY00|TOTAL0000</div> 
                  <dvi class="item1"></dvi>
                </div>

              
                <div class= "컨테이너2">
                    <div class="아이템2상단">BINI_NOTE     http://url주소/나중에입력</div> 
                    <dvi class="item2"></dvi>
                </div>
                     
              
                 <div class="컨테이너3">메뉴판</div>
            
            </div>

            
        </div>
      </div>

  
       
</body>
</html>