결과물
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>'Programing > study' 카테고리의 다른 글
| 8일차_Css 파일 나누기 (0) | 2021.09.19 |
|---|---|
| 7일차_CssFlex로 기본레이아웃 만들기 (0) | 2021.09.17 |
| 5일차_미니홈피 기본 레이아웃 만들기 (0) | 2021.09.14 |
| 4일차_복습! (0) | 2021.09.14 |
| 3일차_폰트 적용 (0) | 2021.09.10 |