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: 17px;
margin-bottom: none px;
flex: none;
}
.item1{
display:flex;
background-color: rgb(255, 255, 255);
flex: 2;
border: 1px solid rgb(181, 181, 181);
border-radius: 9px;
margin-bottom: 15px;
margin-left: 15px;
flex-direction:column;
}
.item1-1/**프로필**/{
flex:1;
background-image: url(킹유진프로필.png);
background-position: 50% 50%;
background-repeat: no-repeat;
background-size: contain;
margin-top: 30px;
margin-left: 30px;
margin-right: 30px;
}
.item1-2{
flex:2;
font-size: 10px;
}
.item1-3{
flex:0.3;
font-size: 10px;
text-align: center;
}
.컨테이너2{
display: flex;
flex: 1;
flex-direction:column
}
.헤더{
display: flex;
flex-direction:row;
margin-top: -4px;
}
.item2{
display:flex;
background-color: rgb(255, 255, 255);
flex: 1;
border: 1px solid rgb(181, 181, 181);
border-radius: 9px;
margin-bottom:15px;
margin-top: none;
margin-left: 15px;
flex-direction: column;
}
.아이템2상단{
font-size: 11px;
text-align:left;
margin-top: 20px;
margin-bottom: 1px;
flex: 1;
margin-left: 30px;
}
.아이템2-1상단{
font-size: 11px;
text-align:right;
margin-top: 20px;
margin-bottom: 1px;
margin-right:10px;
flex: 1;
}
.컨테이너3{
display : flex;
flex: 0.15;
border: 1px solid rgb(0, 0, 0);
margin-top: 15px;
margin-right: 15px;
margin-bottom: 15px;
}
.RED{ color: red;}
.HomeUP{
display :flex;
flex:100%;
flex-direction:column;
margin-left: 15px;
margin-right: 15px;
}
.Home1{
flex: none;
margin-top: 15px;
border-bottom: solid 1.5px gray;
text-align: left;
color: #3b87ab;
}
.Home2{
display : flex;
flex : none;
}
.Home2-1{
display: flex;
flex : 1;
flex-direction: column;
}
.Home2-2{
flex : 1;
}
.Home3{
flex: none;
margin-top: 15px;
border-bottom: solid 1.5px gray;
text-align: left;
color: #3b87ab;
}
.Home4{
flex : 4;
}
.new{
display: flex;
}
.new-category{
flex:0.5;
}
.title{
flex:2;
font-size: 12px;
margin: 1px;
margin-top: 4px;
margin-left: 3px;
border: 3px
}
.Home2-2{
display: flex;
flex-direction: column;
}
.R-category1{
display:flex;
flex:none;
border-bottom: dashed 1px rgb(91, 91, 91);
font-size: 12px;
margin-top: 6px;
}
.a{
flex:1;
}
.news-category-pic{
background-color: rgb(255, 107, 107);
border-radius: 3px;
color: white;
font-size: 11px;
margin: 1px;
border: 3px solid rgb(255, 107, 107);
}
.news-category-post{
background-color: rgb(133, 126, 255);
border-radius: 3px;
color: white;
font-size: 11px;
margin: 1px;
border: 3px solid rgb(133, 126, 255);
}
.a-1{
color: royalblue;
}
@import url('https://fonts.googleapis.com/css2?family=Nanum+Gothic:wght@800&display=swap');
.Home1{
font-family: 'Nanum Gothic', sans-serif;
}
.Home3{
font-family: 'Nanum Gothic', sans-serif;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>2021 MINI HOMEPAGE(기본레이아웃 8일차!)</title>
<link rel="stylesheet" href="./images/font.css" />
<link rel="stylesheet" href="./images/home.css" />
<link rel="stylesheet" href="./images/layout.css" />
</head>
<!--To Day Do it Tag dvi,span Tag and position property) 기본 레이아웃 적용-->
<body>
<!-- 7일차 추가내용
+flex 레이아웃에서 적용할 속성
+ 컨테이너에 적용하는 속성
+ 아이템에 적용하는 속성
+https://flexbox.tech/ -flex 레레이아웃 테스트 사이트
-->
<div class="bookcover">
<div class="점선">
<div class="페이지">
<div class= "컨테이너1">
<div class="아이템1상단">TODAY<span class="RED"> 10</span> | TOTAL 35425</div>
<dvi class="item1">
<span class="item1-1"></span>
<span class="item1-2">
<ul>
<li>Name(이름) : 이유진</li>
<li>Country(국적) : KOREA</li>
<li>AGE(나이) : 1993</li>
<li>Heihgt(키) : 172cm</li>
<li>Weight(체중) : 73-80kg</li>
<li>Category(종목) : Man's Physique</li>
</ul>
</span>
<span class="item1-3"> IFBB PRO 이유진 </span>
</dvi>
</div>
<div class= "컨테이너2">
<div class="헤더">
<div class="아이템2상단">BINI_NOTE</div>
<div class="아이템2-1상단">http://kingYouJin/Pan</div>
</div>
<dvi class="item2">
<dvi class="HomeUP">
<dvi class="Home1">Upload</dvi>
<dvi class="Home2">
<dvi class="Home2-1">
<div class= "new">
<dvi class="news-category-pic">사진첩</dvi>
<dvi class="title">RBW</dvi>
</div>
<div class= "new">
<dvi class="news-category-pic">사진첩</dvi>
<dvi class="title">네추럴</dvi>
</div>
<div class= "new">
<dvi class="news-category-post">게시판</dvi>
<dvi class="title">킹유진</dvi>
</div>
<div class= "new">
<dvi class="news-category-post">게시판</dvi>
<dvi class="title">킹승빈</dvi>
</div>
</dvi>
<dvi class="Home2-2">
<div class="R-category1">
<div class="a">다이어리 <spanc class="a-1">5/20</spanc></div>
<div class="a">사진첩 <spanc class="a-1">2/50</spanc></div>
</div>
<div class="R-category1">
<div class="a">게시판 <spanc class="a-1">3/40</span></div>
<div class="a">방명록 <spanc class="a-1">17/594</spanc></div>
</div>
</dvi>
</dvi>
<dvi class="Home3">ROOM</dvi>
<dvi class="Home4"></dvi>
</dvi>
</dvi>
</div>
<div class="컨테이너3">메뉴판</div>
</div>
</div>
</div>
</body>
</html>
