개발세발

[HTML/CSS][모각코][08] 미니홈피 프로젝트 css 파일 분리하기 본문

인터넷 배움/코뮤니티- 모각코(HTMLㆍCSS 심화편)

[HTML/CSS][모각코][08] 미니홈피 프로젝트 css 파일 분리하기

뉼👩🏻‍💻 2022. 2. 16. 13:58
728x90
반응형
SMALL

 

[제출본]

https://codemate.kr/@yuuulya/day08-미니홈피-프로젝트-css-파일-분리하기

 

[day08] 미니홈피 프로젝트 css 파일 분리하기 by yuuulya | 코드메이트

[코드] <!DOCTYPE html> <html lang="ko">   <head>     <meta charset="UTF-8" />     <title>2021 MINI HOMEPAGE</title>     <link rel="stylesheet" href="..

codemate.kr

 

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <title>2021 MINI HOMEPAGE</title>
    <link rel="stylesheet" href="../static/images/font.css" />
    <link rel="stylesheet" href="../static/images/home.css" />
    <link rel="stylesheet" href="../static/images/layout.css" />
  </head>
  <body>
    <div class="bookcover">
      <div class="bookdot">
        <div class="page">
         <div class="container">
            <div class="left">
              <div class="first">
                <span class="lefttop">
                TODAY 
                <font color="#f74545">25</font>
                | TOTAL 248956
                </span>
              </div>
              <div class="profile">
                <div class="profileimg"></div>
                <div class="profilemention">
                 <p>
                 <br>
                 오늘도 <br>
                 코딩을 부수기 위해<br>
                 열심히 노력했지만<br>
                 <br>
                 언제나 부셔지는건 
                 <br>
                 나였다.....
                </p>
                </div>
                <div class="profilebottom">
                <p>
                개발세발 열코딩 중
                </p>
                </div>
              </div>
            </div>
            <div class="center">
              <div class="title">
                <div class="my">나만થ 공간 나થ 싸ગ월⊑</div>
                <div class="address"> https://url주소/나중에입력</div>
              </div>
              <div class="main">
              	<div class="topmain">
              		<div class="update">
              		<br>
              		<span class="recent">Updated News</span>
              		<hr class="bar">
              		</div>
              		<div class="cate">
              			<div class="cate1">
              				<div class="cate1left">
              					<div class="photo">사진첩</div>
              					<div class="post">게시판</div>
              					<div class="post">게시판</div>
              					<div class="photo">사진첩</div>
              				</div>
							 <div class="cate1right">
							 	<div class="posttitle">바닷바람 쐬러간 날</div>
							 	<div class="posttitle">이게 무슨 소릴까</div>
							 	<div class="posttitle">나도 잘 몰라</div>
							 	<div class="posttitle">빵투어 기록</div>
							 </div>
              			</div>
              			<div class="cate2">
              			  <div class="section">
              			  <div class="sec1">
              			  <span>다이어리 &nbsp;</span><sapn style="font-size:12px; color:#367ab5">8/25&nbsp; &nbsp;</sapn>
              			  <span>사진첩 &nbsp;</span><sapn style="font-size:12px; color:#367ab5">8/25&nbsp; &nbsp;</sapn>
              			  </div>
              			  <div class="sec1">
              			  <span>게시판 &nbsp;</span><sapn style="font-size:12px; color:#367ab5">8/25&nbsp;&nbsp; &nbsp; &nbsp;</sapn>
              			  <span>방명록 &nbsp;</span><sapn style="font-size:12px; color:#367ab5">8/25&nbsp; &nbsp;</sapn>
              			  </div>
              			 </div>
              			</div>
              		</div>
              	</div>
              	<div class="bottommain">
              	 <div class="mini">
              	  Miniroom
              		<hr class="bar">
              	 </div>
              	</div>
              </div>
          </div>
            <div class="menubar">
               </div>
            </div>
		 </div>
		</div>
      </div>
    </div>
  </body>
</html>

 

/*font.css*/

@import url('https://fonts.googleapis.com/css2?family=Cute+Font&family=Dongle&family=Nanum+Pen+Script&family=Single+Day&display=swap');


.lefttop{
	font-size: 12px;]
}


.profilemention{
	font-family: 'Nanum Pen Script', cursive;
	font-size:24px;
}


.cate1left{
	line-height:1.5;	
	text-align: center;
	color:#ffffff;
	font-weight: 900;
}


.mini {
	color: #3794b0; 
	font-weight: 900;
	line-height: 10px;
}


.profilebottom{
	font-family: 'Dongle', sans-serif;
	font-size:24px;
	text-align:center;
	
}

.update{
	color: #3794b0; 
	font-weight: 900;
	line-height: 10px;	
}
/*home.css*/ 

.center {
	flex:0.66;
	
	display: flex;
	flex-direction:column;
}


.title {
	flex:0.05;
	display:flex;
}

.main{
	flex:0.95;
	background-color:#ffffff;
	
	display:flex;
	flex-direction:column;
	border: 1px solid #e6e3e3;
	border-radius: 11px;
}


.topmain{
	flex: 0.3;
	
	display:flex;
	flex-direction: column;
	padding-bottom:30px;
	margin-left:10px;
	margin-right:10px;
}

.update{
	flex:0.3;
	margin-top:20px;
}

.cate{
	flex:1;
	display: flex;
	line-height: 150%;
}

.cate1{
	flex:0.5;
	
	display:flex;
}


.cate1left{
	flex:0.25;
	
	display: flex;
	flex-direction:column;
	margin-right:5px;
	padding:2px;
}


.photo{
	flex:0.4;
	border-radius: 6px;
	background-color: #ff6666;
	margin-bottom:2px;
}
.post{
	flex:0.4;
	border-radius: 6px;
	background-color:#2d7ec4;
	
	margin-bottom:2px;
}


.cate1right{
	flex:0.6;
	padding:2px;
	line-height:1.5;	
}


.posttitle{
	margin-bottom:2px;
}


.cate2{
	flex:0.5;
	
	display:flex;
	flex-direction:row;
	margin-bottom:2px;
}


.section{
	flex:1;
	display:flex;
	flex-direction:column;
	line-height:1.5;
}


.sec1{
	flex:0.23;
	border-bottom: 1.5px dotted;
	border-color:#367ab5;
}	


.sec2{
	flex:0.23;
}


.bottommain{
	flex: 0.6;

	margin-left:10px;
	margin-right:10px;
}


.mini {
	flex:0.3;
	margin-top:20px;
}

 

/*layout.css*/ 

body { /*패턴바탕*/
	background-color: #a3a3a3;
	background-image: url(../static/images/pattern.png);
	background-size: 100px;
	
	position : pixed;
	top: 0; 
	bottom: 0;
	left: 0;
	right: 0;
}


.bookcover { /*파란바탕*/
  background-color: #b4d1da;
  border-radius: 9px;
  border: 1px solid #738186;
  
  width : 960px;
  height : 660px;
  
  margin: 100px auto;
  
  position: relative;
}

.bookdot { /*점선*/
	border: 2px dashed #f5f5f5;
	border-radius: 9px;

	position: absolute;	
	top: 15px;
    left: 15px;
    width: 930px;
    height: 630px;
}


.page {/*제일 안쪽 바탕*/
	background-color: #f5f5f5;
	border-radius: 9px;
	
	position: absolute;	
	top: 10px;
    left: 10px;
    width: 910px;
    height: 610px;	
}

.container{
	position: absolute;
	top: 20px;
	left: 20px;
	right:20px;
	bottom:20px;
	
	display: flex;
	
	width: 870px;
	height: 570px;
}


.left {
	flex:0.25;
	
	display:flex;
	flex-direction: column;
	padding-right: 25px;	
}


.first{
	padding :1px;
	flex:0.05;
	padding-left: 30px; 
}

.profile {
	flex:0.95;
	background-color:#ffffff;
	border: 1px solid #e6e3e3;
	border-radius: 11px;
	
	padding-left: 25px;
	padding-right: 25px;
	
	display: flex;
	flex-direction:column;
}

.profileimg{
	flex:0.3;
	
	background-image: url("../images/profile.PNG");
	background-repeat: no-repeat;
	background-size: cover;

	margin-top: 20px;
	margin-bottom: 20px;

}
.profilemention{
	flex:0.5;
	align-items: flex-start:
}

.profilebottom{
	flex:0.2;
}

.my {
	flex:0.8;
	padding-left:10px;
}

.address{
	flex:0.8;
	padding-left:150px;
}

.bar {
	width="550px" align="center"
}

.menubar{
	flex:0.1;
	border: 2px solid #c2c2c2;
}

 

 

📝[REVEIW]

코드가 너무 더러운데 구분하기가 어려워서 정렬도 어렵다 ... 어으 .. 

 

728x90
반응형

'인터넷 배움 > 코뮤니티- 모각코(HTMLㆍCSS 심화편)' 카테고리의 다른 글

[HTML/CSS][모각코][10] 미니홈피 사진첩 만들기  (0) 2022.02.18
[HTML/CSS][모각코][09] 미니홈피 홈화면 레이아웃 완성하기  (0) 2022.02.17
[HTML/CSS][모각코][07] 미니홈피 홈화면 레이아웃 만들기  (0) 2022.02.16
[HTML/CSS][모각코][06] 미니홈피 홈화면 레이아웃 만들기  (0) 2022.02.16
[HTML/CSS][모각코][05] 미니홈피 기본 레이아웃 만들기  (0) 2022.02.11
'인터넷 배움/코뮤니티- 모각코(HTMLㆍCSS 심화편)' Related Articles more