250x250
반응형
Notice
Recent Posts
Recent Comments
Link
개발세발
[HTML/CSS][모각코][09] 미니홈피 홈화면 레이아웃 완성하기 본문
728x90
반응형
SMALL
[제출본]
https://codemate.kr/@yuuulya/day09-미니홈피-홈화면-레이아웃-완성하기
[day09] 미니홈피 홈화면 레이아웃 완성하기 by yuuulya | 코드메이트
[코드] [html] <!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8" /> <title>2021 MINI HOMEPAGE</title> <link rel="stylesheet"
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">
<br>
오늘도 <br>
코딩을 부수기 위해<br>
열심히 노력했지만<br>
<br>
언제나 부셔지는건
<br>
나였다.....
</div>
<div class="profilebottom">
<p class="coding">
개발세발 (♀)
</p>
<div class="dropdown">
<button class="dropbt">
<span>파도타기</span>
<span> ▼</span>
</button>
<ul class="dropdown-content" >
<li><a href="https://bluepinetree.tistory.com/" target='_blank'>Tistroy</a></li>
<li><a href="https://cafe.naver.com/codeuniv?iframe_url=/MyCafeIntro.nhn%3Fclubid=30026525" target='_blank'>코뮤니티</a></li>
</ul>
</div>
</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>다이어리 </span><sapn style="font-size:12px; color:#367ab5">8/25 </sapn>
<span>사진첩 </span><sapn style="font-size:12px; color:#367ab5">8/25 </sapn>
</div>
<div class="sec1">
<span>게시판 </span><sapn style="font-size:12px; color:#367ab5">8/25 </sapn>
<span>방명록 </span><sapn style="font-size:12px; color:#367ab5">8/25 </sapn>
</div>
</div>
</div>
</div>
</div>
<div class="bottommain">
<div class="mini">
Miniroom
<hr class="bar">
</div>
<div class="full"></div>
</div>
</div>
</div>
<div class="menubar">
<div id="home"><a href="#">홈</a></div>
<div id="diary"><a href="#">다이어리</a></div>
<div id="photobook"><a href="#">사진첩</a></div>
<div id="guestbook"><a href="#">방명록</a></div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
@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 .coding {
font-family: 'Dongle', sans-serif;
font-size:24px;
text-align:center;
}
.update{
color: #3794b0;
font-weight: 900;
line-height: 10px;
}
.coding{
color:#144b8f;
font-weight: bold;
font-size: 25px;
}
.center {
flex:0.8;
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;
}
body { /*패턴바탕*/
background-color: #a3a3a3;
background-image: url(../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: 30px;
margin-bottom: 20px;
}
.profilemention{
flex:0.4;
align-items: flex-start;
margin-bottom: 5px;
}
.profilebottom{
flex:0.3;
}
.coding{
margin-top: 10px;
color:#144b8f;
margin-bottom: 5px;
}
.my {
flex:0.8;
padding-left:10px;
}
.address{
flex:0.8;
padding-left:150px;
}
.bar {
width:550px align="center";
}
.full{
background-image: url("../images/giphy.gif");
width: 555px;
height: 280px;;
}
.menubar #home{
flex:0.07;
margin-top:65px;
margin-bottom: 10px;
padding-left: 10px;
width:70px;
height:30px;
border: 1px solid black;
border-left-style:hidden;
border-top-right-radius: 7px;
border-bottom-right-radius: 7px;
background-color: #3794b0;
}
.menubar #diary, #photobook, #guestbook{
flex:0.07;
margin-top:10px;
margin-bottom: 10px;
padding-left: 10px;
width:70px;
height:30px;
border: 1px solid black;
border-left-style:hidden;
border-top-right-radius: 7px;
border-bottom-right-radius: 7px;
background-color: #3794b0;
}
.menubar{
flex:0.1;
display:flex;
flex-direction:column;
}
a{
text-decoration: none;
color:#fffffF;
font-weight:bold;
font-size: 15px;
}
.menubar #home:hover,#diary:hover, #photobook:hover, #guestbook:hover {
background-color: #7d70b3;
}
.dropbt {
font-size: 13px;
cursor: pointer;
width: 110px;
background-color: #ffffff;
border: 0.5px solid;
text-align: left;
padding-left: 13px;
}
.dropdown{
position: relative;
display: inline-block;
zoom:1;
}
ul, li {
list-style: none;
width: 110px;
height: 20px;
padding-top: 0;
padding-right: 1;
}
.dropdown-content{
display: none;
left: 2px;
background-color: rgb(185, 177, 177)
color: black;
min-width: 100px
height:100px;
text-align: center;
padding-left: 2px;
margin: 5px;
padding-bottom:10px;
text-align: center;
}
.dropdown-content a{
color: rgb(27, 25, 25);
font-size: 15px;
text-decoration: none;
display: black;
}
.dropdown-content li{
margin-top: 10px;
}
.dropdown-content li:hover {
background-color: #e0e4e4;
}
.dropdown:hover .dropdown-content {
display: block;
}
📝[REVEIW]
뭐랄까
아직 클린코드가 뭔지 정확하게는 모른다
하지만 그건 안다
지금 나의 코드는 더럽다 ...
꾸역꾸역 만드는게 생각보다 더 걸려서 코드를 좀 정리하고 싶은데 그럴 마음의 여유가 없다. ㅎ ㅏ... 🤗
728x90
반응형
'인터넷 배움 > 코뮤니티- 모각코(HTMLㆍCSS 심화편)' 카테고리의 다른 글
| [HTML/CSS][모각코][11] 미니홈피 다이어리 만들기 (0) | 2022.02.21 |
|---|---|
| [HTML/CSS][모각코][10] 미니홈피 사진첩 만들기 (0) | 2022.02.18 |
| [HTML/CSS][모각코][08] 미니홈피 프로젝트 css 파일 분리하기 (0) | 2022.02.16 |
| [HTML/CSS][모각코][07] 미니홈피 홈화면 레이아웃 만들기 (0) | 2022.02.16 |
| [HTML/CSS][모각코][06] 미니홈피 홈화면 레이아웃 만들기 (0) | 2022.02.16 |