⭐️ Reference 아래는 레퍼런스 코드입니다. 과제를 완료하기 전 미리 확인하지 마세요!
HTML
<!DOCTYPE html>
<html lang="ko">
<head>
<title>사이좋은 사람들, 싸이월드</title>
<link href="./styles/index.css" rel="stylesheet">
<link rel="stylesheet" href="<https://pro.fontawesome.com/releases/v5.10.0/css/all.css>" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous"/>
<script>
function menuHome(){
document.getElementById("contentFrame").setAttribute("src", "home.html")
document.getElementById("menuHome").style = "color: black; background-color: white;"
document.getElementById("menuGame").style = "color: white; background-color: #298EB5;"
document.getElementById("menuJukebox").style = "color: white; background-color: #298EB5;"
}
function menuGame(){
document.getElementById("contentFrame").setAttribute("src", "game.html")
document.getElementById("menuHome").style = "color: white; background-color: #298EB5;"
document.getElementById("menuGame").style = "color: black; background-color: white;"
document.getElementById("menuJukebox").style = "color: white; background-color: #298EB5;"
}
function menuJukebox(){
document.getElementById("contentFrame").setAttribute("src", "jukebox.html")
document.getElementById("menuGame").style = "color: white; background-color: #298EB5;"
document.getElementById("menuJukebox").style = "color: black; background-color: white;"
}
</script>
</head>
<body>
<div class="background">
<div class="outerbox">
<div class="wrapper">
<div class="wrapper__left">
<div class="wrapper__left__header">
<div class="today">
TODAY
<span class="zero">0</span> | TOTAL
<span class="count">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="profile__detail">
<i class="fas fa-file-signature"></i>
name
</div>
<div class="profile__detail">
<i class="fas fa-phone"></i>
phone
</div>
<div class="profile__detail">
<i class="fas fa-envelope-square"></i>
mail
</div>
<div class="profile__detail">
<i class="fas fa-images"></i>
instagram
</div>
</div>
<div class="body__footer">
<div class="wrapper__feel">
<div class="feel__title">오늘의 기분</div>
<select class="feel__select">
<option>기쁨 😃</option>
<option>슬픔 😥</option>
<option>화남 😡</option>
<option>분노 🤬</option>
</select>
</div>
</div>
</div>
</div>
<div class="wrapper__right">
<div class="wrapper__right__header">
<div class="right__header__title">사이좋은 사람들, 싸이월드</div>
<div class="right__header__setting">사생활보호설정 <i class="fas fa-caret-right arrow"></i></div>
</div>
<div class="wrapper__right__body">
<iframe id="contentFrame" src="home.html"></iframe>
</div>
</div>
<div class="navigation">
<div class="navigation__item" id="menuHome" onclick="menuHome()">홈</div>
<div class="navigation__item" id="menuGame" onclick="menuGame()">게임</div>
<div class="navigation__item" id="menuJukebox" onclick="menuJukebox()">쥬크박스</div>
</div>
</div>
</div>
</div>
</body>
</html>
CSS
* {
margin: 0px;
box-sizing: border-box;
}
.background {
background-image: url("../images/background.png");
width: 1024px;
height: 600px;
padding: 20px 0px 0px 20px;
}
.outerbox {
background-image: url("../images/outerbox.png");
width: 808px;
height: 544px;
}
.wrapper {
display: flex;
flex-direction: row;
padding: 32px 0px 0px 32px;
}
/* 왼쪽 영역 */
.wrapper__left {
width: 208px;
height: 472px;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
margin-left: 3px;
margin-right: 7px;
}
/* 왼쪽 영역 - 헤더(투데이 카운터) */
.wrapper__left__header {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
width: 100%;
height: 30px;
}
.today {
padding-top: 10px;
font-size: 9px;
}
.zero {
color: red;
font-size: 11px;
}
.count {
font-size: 11px;
}
/* 왼쪽 영역 - 바디(프로필) */
.wrapper__left__body {
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
height: 100%;
padding: 20px 30px 0px 30px;
border: 1px solid gray;
border-radius: 15px;
background-color: white;
}
.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 {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: flex-start;
}
.profile__detail {
color: #999999;
font-size: 10px;
margin-bottom: 10px;
display: flex;
flex-direction: row;
}
.fas {
color: black;
margin-right: 10px;
width: 5px;
height: 5px;
}
.body__footer {
width: 100%;
margin-bottom: 30px;
}
.wrapper__feel {
display: flex;
flex-direction: column;
justify-content: center;
width: 100%;
}
.feel__title {
font-size: 11px;
margin-bottom: 5px;
color: gray;
}
/* 오른쪽 영역 */
.wrapper__right {
width: 524px;
height: 472px;
display: flex;
flex-direction: column;
justify-content:flex-end;
padding-left: 5px;
}
.wrapper__right__header {
width: 510px;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: flex-end;
padding: 0px 14px;
}
.wrapper__right__body {
width: 510px;
height: 445px;
border: 1px solid gray;
border-radius: 15px;
background-color: white;
}
.right__header__title, .right__header__setting, .arrow {
color: #55B2E4;
font-size: 9px;
}
.right__header__title {
font-size: 16px;
}
iframe {
width: 100%;
height: 100%;
border: none;
}
.navigation {
width: 62px;
height: 100px;
display: flex;
flex-direction: column;
justify-content: space-between;
position: absolute;
left: 784px;
top: 110px;
}
.navigation__item {
width: 60px;
height: 30px;
line-height: 30px;
text-align: center;
color: white;
background-color: #298eb5;
border: 1px solid black;
border-radius: 0px 10px 10px 0px;
font-size: 10px;
cursor: pointer;
}