개발세발

[HTML/CSS][모각코][06] 미니홈피 홈화면 레이아웃 만들기 본문

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

[HTML/CSS][모각코][06] 미니홈피 홈화면 레이아웃 만들기

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

 

[제출본]

https://codemate.kr/@yuuulya/day06-미니홈피-홈화면-레이아웃-만들기

 

[day06] 미니홈피 홈화면 레이아웃 만들기 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/style.css?after" />
  </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"></div>
                <div class="profilebottom"></div>
              </div>
            </div>
            <div class="center">
              <div class="title">
                <div class="my">나만થ 공간 나થ 싸ગ월⊑</div>
                <div class="address"> https://url주소/나중에입력</div>
              </div>
              <div class="main"></div>
            </div>
            <div class="menubar">
            </div>
		 </div>
		</div>
      </div>
    </div>
  </body>
</html>

 

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; 
}

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

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

.profileimg{
	flex:0.5;
}
.profilemention{
	flex:0.5;
}

.profilebottom{
	flex:0.2;
}

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

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

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

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

.main{
	flex:0.95;
	background-color:#ffffff;
}

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

 

어우 헷갈려

 

728x90
반응형

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

[HTML/CSS][모각코][08] 미니홈피 프로젝트 css 파일 분리하기  (0) 2022.02.16
[HTML/CSS][모각코][07] 미니홈피 홈화면 레이아웃 만들기  (0) 2022.02.16
[HTML/CSS][모각코][05] 미니홈피 기본 레이아웃 만들기  (0) 2022.02.11
[HTML/CSS][모각코][04] HTML, CSS 개념 복습하기!  (0) 2022.02.09
[HTML/CSS][모각코][03] CSS 업그레이드  (0) 2022.02.08
'인터넷 배움/코뮤니티- 모각코(HTMLㆍCSS 심화편)' Related Articles more