프론트엔드 공부/싸이월드 실습

05일차 프론트엔드 공부 - 싸이월드 실습 3

프망생222 2024. 9. 4. 20:02

- 싸이월드 실습 3 -

 

<!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 GAME</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>사과</span></div>
            <div class="game_word">
                <input class="word" placeholder="단어를 입력하세요">
                <button class="search">검색</button>
            </div>
            <div class="reslut">결과!</div>
        </div>
        <div class="game_container">
            <img src="./images/lotto.png">
            <div class="game_title">Lotto</div>
            <div class="game_subtitle"><span>버튼을 누르세요.</span></div>
            <div class="lotto_num">
                <span class="num1">3</span>
                <span class="num2">9</span>
                <span class="num3">15</span>
                <span class="num4">25</span>
                <span class="num5">37</span>
                <span class="num6">55</span>
            </div>
            <button class="lotto_button">Button</button>
        </div>
    </div>
</body>
</html>
* {
    box-sizing: border-box;
    margin: 0;
}

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

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

.wrapper_header {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.header_title {
    display: flex;
    flex-direction: row;
    align-items: flex-end;
}

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

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

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

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

.game_title {
    font-size: 11px;
    font-weight: 700;
}

.game_subtitle{
    font-size: 10px;
    font-weight: 700;
    color: gray;
}

.game_word {
    width: 100%;
    height: 24px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.word {
    width: 136px;
    height: 100%;
    font-size: 11px;
    font-weight: 700;
    border: 1px solid black;
    border-radius: 5px;
}

.search {
    width: 38px;
    height: 100%;
    font-size: 11px;
    font-weight: 700;
    border: 1px solid black;
    border-radius: 5px;
}

.reslut {
    color: gray;
    font-size: 11px;
    font-weight: 700;
}

.lotto_num {
    width: 130px;
    height: 21px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    background-color: #ffe400;
    border: 1px solid black;
    border-radius: 8px;
    font-size: 10px;
    font-weight: 700;
    padding: 5px;
}

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

 

싸이월드 3일차

 

일단 싸이월드 내 게임 페이지를 만들어 보았다. 

싸이월드 실습 2에서 만들었던 index.html 파일 내

<iframe src="./home.html"></iframe>  이 부분을 

<iframe src="./game.html"></iframe> 으로 수정해 game.html 을 불러오도록 하였다.

아직은 게임 틀만 만들어져있고 아직 동작은 작동하지 않는다.

싸이월드 실습 4 때 동작이 하도록 하는 것이 목표다. 

 

'프론트엔드 공부 > 싸이월드 실습' 카테고리의 다른 글

07일차 프론트엔드 공부 - 싸이월드 실습 5  (2) 2024.09.04
06일차 프론트엔드 공부 - 싸이월드 실습 4  (7) 2024.09.04
05일차 프론트엔드 공부 - 싸이월드 실습 2  (0) 2024.09.04
03일차 프론트엔드 공부 - 싸이월드 실습1  (0) 2024.09.04

'프론트엔드 공부/싸이월드 실습'의 다른글

  • 현재글05일차 프론트엔드 공부 - 싸이월드 실습 3

관련글

티스토리툴바