싸이월드 만들기 2탄

⭐️ Reference 아래는 레퍼런스 코드입니다. 과제를 완료하기 전 미리 확인하지 마세요!

index

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"/>
</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 src="home.html"></iframe>
                    </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;
}

home

HTML

<!DOCTYPE html>
<html lang="ko">
<head>
    <title>Home</title>
    <link href="./styles/home.css" rel="stylesheet">
</head>
<body>
    <div class="wrapper">
        <div class="wrapper__header">
            <div class="contents__title">
                <div class="title">Updated news</div>
                <div class="subtitle">TODAY STORY</div>
            </div>
            <div class="divideLine"></div>
            <div class="contents__body">오늘의 기분 너무 좋음</div>
        </div>
        <div class="wrapper__body">
            <div class="contents__title">
                <div class="title">My Video</div>
                <div class="subtitle">INTRODUCE YOURSELF</div>
            </div>
            <div class="video"></div>
        </div>
    </div>
</body>
</html>

CSS

* {
    margin: 0px;
    box-sizing: border-box;
}

html, body {
    width: 100%;
    height: 100%;
}

.wrapper {
    width: 100%;
    height: 100%;
    padding: 20px 30px 30px 30px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.wrapper__header {
    width: 100%;
    height: 48px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.contents__title {
    display: flex;
    flex-direction: row;
    align-items: center;
}

.title {
    color: #55b2d4;
    font-size: 13px;
    font-weight: 700;
}

.subtitle {
    padding-left: 5px;
    font-size: 8px;
}

.divideLine {
    width: 100%;
    border-top: 1px solid gray;
}

.contents__body {
    font-size: 11px;
    color: #999999;
}

.wrapper__body {
    width: 100%;
    height: 270px;
}
.video {
    margin-top: 15px;
    width: 100%;
    height: 240px;
    background-color: #c4c4c4;
}