싸이월드 만들기 3탄

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

game

HTML

<!DOCTYPE html>
<html lang="ko">
<head>
    <title>Game</title>
    <link href="./styles/game.css" rel="stylesheet">
</head>
<body>
    <div class="wrapper">
        <div class="wrapper__header">
            <div class="header__title">
                <div class="title">GAME</div>
                <div class="subtitle">TODAY CHOICE</div>
            </div>
            <div class="divideLine"></div>
        </div>
        <div class="game__container">
            <img src="./images/word.png">
            <div class="game__title">끝말잇기</div>
            <div class="game__subtitle">제시어 : <span id="word">코드캠프</span></div>
            <div class="word__text">
                <input id="myword" class="textbox" type="text" placeholder="단어를 입력하세요">
                <button class="search" onclick="">입력</button>
            </div>
            <div id="result" class="word__result">결과!</div>
        </div>
        <div class="game__container">
            <img src="./images/lotto.png">
            <div class="game__title">LOTTO</div>
            <div class="game__subtitle">버튼을 누르세요</div>
            <div class="game__lotto__number">
                <span>3</span>
                <span>5</span>
                <span>10</span>
                <span>24</span>
                <span>30</span>
                <span>34</span>
            </div>
            <button class="wrapper__lotto__btn">Button</button>
        </div>
    </div>
</body>
</html>

CSS

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

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

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

.wrapper__header {
    width: 100%;
    display: flex;
    flex-direction: column;
}

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

.game__container {
    border: 1px solid gray;
    border-radius: 15px;
    width: 222px;
    height: 168px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    padding: 20px 15px 20px 15px;
    background-color: #f6f6f6;
}

.game__title {
    font-size: 15px;
    font-weight: 900;
}

.game__subtitle {
    font-size: 11px;
}

#word__result {
    font-size: 11px;
    font-weight: 700;
}

.word__text {
    width: 100%;
    display: flex;
    justify-content: space-between;
}

.textbox {
    width: 140px;
    height: 24px;
    border-radius: 5px;
    padding: 4px 8px;
}

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

.search {
    font-size: 11px;
    font-weight: 700;
    width: 38px;
    height: 24px;
}

.game__lotto__number {
    width: 130px;
    height: 21px;
    background-color: #ffe400;
    border-radius: 8px;
    border: 1px solid black;
    font-size: 10px;
    font-weight: 700;
    display: flex;
    justify-content: space-between;
    padding: 5px 8px;
    margin-bottom: 11px;
    margin-top: 10px;
}

.wrapper__lotto__btn {
    
    border: 1px solid black;
	border-radius: 5px;
	font-weight: 700;
	font-size: 11px;
	width: 62px;
	height: 24px;
	background-color: white;
}