html 코드
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>미니홈피::사이좋은 사람들, 싸이월드</title>
<link rel="stylesheet" href="index.css" />
<script
src="https://kit.fontawesome.com/a32916f00e.js"
crossorigin="anonymous"
></script>
</head>
<body>
<div class="background">
<div class="outerbox">
<div class="wrapper">
<div class="wrapper__left">
<div class="wrapper__left__header">
<div class="today">
<span>TODAY</span
><!--나중에 자바 스크립트 때문에!-->
<span>0</span>
<span>| TOTAL</span>
<span>12345</span>
</div>
</div>
<div class="wrapper__left__body">
<div class="left__body__header">
<div class="left__body__header__gray"></div>
<div class="left__body__header__line"></div>
</div>
<div class="left__body__profile">
<div class="ele"><i class="fa-solid fa-user"> NAME</i></div>
<br />
<div class="ele"><i class="fa-solid fa-phone"> phone</i></div>
<br />
<div class="ele">
<i class="fa-solid fa-envelope"> E-mail</i>
</div>
<br />
<div class="ele">
<i class="fa-solid fa-star"> instagram</i>
</div>
</div>
<br /><br /><br /><br />
<div class="left__body__footer">
<div class="feeling">오늘의 기분</div>
<div class="feeling2">
<form action="#">
<select name="feeling" id="">
<option value="기쁨">기쁨😀</option>
<option value="화남">화남😤</option>
<option value="슬픔">슬픔🥲</option>
<option value="졸림">졸림😴</option>
</select>
</form>
</div>
</div>
</div>
</div>
<div class="wrapper__right">
<div class="wrapper__right__header">사이좋은 사람들, 싸이월드</div>
<div class="wrapper__right__body">
<div class="wrapper__right__body__0">
<div class="wrapper__right__body__bgm">추억의 bgm</div>
<div class="wrapper__right__body__line"></div>
<br />
<div class="right__body__img">
<div class="wrapper__right__body__img">
<img
src="data:image/jpeg;base64,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"
width="150"
height="150"
alt="My Image"
/>
</div>
<div class="wrapper__right__body__img">
<img
src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSSsmGCwuI-8o9ct_O4tiDi3v4Tp1xfvHPkgA&usqp=CAU"
width="150"
height="150"
alt=""
/>
</div>
<div class="wrapper__right__body__img">
<img
src="data:image/jpeg;base64,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"
width="150"
height="150"
alt=""
/>
</div>
</div>
<div class="bgm_name">
<div class="name">총맞은것처럼</div>
<div class="name">눈의꽃</div>
<div class="name">Y</div>
</div>
<div class="bgm_name2">
<div class="name2">백지영</div>
<div class="name2">박효신</div>
<div class="name2">프리스타일</div>
</div>
</div>
</div>
<div class="wrapper__right__footer">
<br>
<div class="wrapper__right__body__bgm"><i class="fa-solid fa-music"></i>신곡 CHART<i class="fa-solid fa-music"></i></div>
<br><br>
<div class = "footer__chart">
<div class="line"></div>
<div class = "chart-1">
</div>
<div class="line"></div>
<div class = "chart-1">
<div class="rec"><i class="fa-regular fa-square"></i> </div>
<div class="num">1</div>
<div class="song">OOO</div>
<div class = "artist">OOO</div>
</div>
<div class="line"></div>
<div class = "chart-1">
<div class="rec"><i class="fa-regular fa-square"></i></div>
<div class="num">2</div>
<div class="song">OOO</div>
<div class = "artist">OOO</div>
</div>
<div class="line"></div>
<div class = "chart-1">
<div class="rec"><i class="fa-regular fa-square"></i></div>
<div class="num">3</div>
<div class="song">OOO</div>
<div class = "artist">OOO</div>
</div>
<div class="line"></div>
<div class = "chart-1">
<div class="rec"><i class="fa-regular fa-square"></i></div>
<div class="num">4</div>
<div class="song">OOO</div>
<div class = "artist">OOO</div>
</div>
<div class="line"></div>
<div class = "chart-1">
<div class="rec"><i class="fa-regular fa-square"></i></div>
<div class="num">5</div>
<div class="song">OOO</div>
<div class = "artist">OOO</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
CSS코드
* {
box-sizing: border-box;
margin: 0px;
}
.background {
width: 1024px;
height: 600px;
background-image: url("../img/background.png");
padding: 20px 0px 0px 20px;
}
.outerbox {
width: 808px;
height: 544px;
background-image: url("../img/outerbox.png");
}
.wrapper {
display: flex;
flex-direction: row;
padding: 32px 0px 0px 32px;
padding-top: 45px;
}
.wrapper__left {
width: 208px;
height: 472px;
background-color: white;
display: flex;
flex-direction: column;
border-radius: 15px;
}
.wrapper__left__header {
width: 100%; /*208px*/
height: 30px;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
.today {
font-size: 9px;
}
.wrapper__left__body {
width: 100%; /*208px*/
height: 100%; /*472px에서 30px을 뺀 나머지의 100%를 채우게 된다.*/
border: 1px solid gray;
border-radius: 15px;
background-color: white;
display: flex;
flex-direction: column;
align-items: center;
padding: 20px 30px;
}
.left__body__header {
width: 100%;
display: flex;
flex-direction: column;
}
.left__body__header__gray {
width: 148px;
height: 133px;
background-color: gray;
}
.left__body__header__line {
border-top: 1px dotted black;
margin: 12px 0px;
}
.left__body__profile {
display: flex;
flex-direction: column;
align-items: start;
justify-content: start;
}
.ele {
font-size: 9px;
display: flex;
flex-direction: row;
justify-content: start;
align-items: start;
}
.left__body__footer {
display: flex;
flex-direction: column;
}
.feeling {
font-size: 12px;
}
.feeling2 {
display: flex;
flex-direction: row;
}
.wrapper__right {
width: 524px;
height: 472px;
background-color: white;
border-radius: 15px;
margin-left: 7px;
}
.wrapper__right__header {
display: flex;
flex-direction: row;
justify-content: start;
color: #55b2d4;
font-family: Malgun Gothic;
font-size: 16px;
font-style: normal;
font-weight: 700;
line-height: normal;
padding-left: 60px;
}
.wrapper__right__body {
display: flex;
flex-direction: column;
}
.wrapper__right__body__0 {
display: flex;
flex-direction: column;
}
.wrapper__right__body__img {
width: 150px;
height: 150px;
background-color: bisque;
}
.wrapper__right__body__bgm {
margin-top: 10px;
margin-left: 20px;
color: #55b2d4;
font-family: Malgun Gothic;
font-size: 13px;
font-style: normal;
font-weight: 700;
line-height: normal;
}
.wrapper__right__body__line {
margin-left: 20px;
width: 500px;
height: 1px;
background: #999;
}
.right__body__img {
display: flex;
flex-direction: row;
justify-content: space-evenly;
}
.bgm_name {
display: flex;
flex-direction: row;
justify-content: space-around;
}
.name {
width: 120px;
color: #0f465e;
text-align: center;
font-family: Malgun Gothic;
font-size: 11px;
font-style: normal;
font-weight: 700;
line-height: normal;
}
.bgm_name2 {
display: flex;
flex-direction: row;
justify-content: space-around;
}
.name2 {
color: #999;
text-align: center;
font-family: Malgun Gothic;
font-size: 10px;
font-style: normal;
font-weight: 700;
line-height: normal;
}
.wrapper__right__footer {
display: flex;
flex-direction: column;
}
.footer__chart {
display: flex;
flex-direction: column;
}
.chart-1 {
margin-left: 20px;
display: flex;
flex-direction: row;
justify-content: space-evenly;
}
.line {
margin-left: 20px;
width: 500px;
height: 1px;
background: #999;
}
Halo!