Rock-Paper-Scissors 만들기) 1. HTML, CSS 완성하기

HTML & CSS & JAVASCRIPT

Rock-Paper-Scissors 만들기) 1. HTML, CSS 완성하기

dodop 2021. 1. 24. 16:17

두번째 간단한 javascript 프로젝트는 가위바위보 만들기

https://www.youtube.com/watch?v=jaVNP3nIAv0&list=PLFD11aY4Ji8zbIVKINO1NsNCsM_YUhc_N&index=24

사진은 폴더에 images파일에 따로 저장해놓았다.

아이콘 파일이 따로 첨부되어 있지 않아서 댓글을 보니 어떤 사람이 아이콘 받을 수 있는 사이트를 첨부해 주었다. 👍

https://icons8.com

Download 158k Free Icons + Illustrations, Photos, and Music

Download design elements for free: icons, photos, vector illustrations, and music for your videos. All the assets made by designers → consistent quality ⚡️

icons8.com

1. index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Rock  Paper Scissors Game</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <header>
        <h1>Rock Paper Scissors</h1>
    </header>

    <div class="score-board">
        <div id = "user-label" class="badge">user</div>
        <div id = "computer-label" class="badge">comp</div>
        <span id = "user-score">0</span>
        <span id = "computer-score">0</span>
    </div>

    <div class="result">
        <p>Paper covers rock. You win!</p>
    </div>

    <div class="choices">
        <div class="choice" id = "r">
            <img src="images/rock.png" alt="">
        </div>
        <div class="choice" id = "p">
            <img src="images/paper.png" alt="">
        </div>
        <div class="choice" id = "s">
            <img src="images/scissors.png" alt="">
        </div>
    </div>

    <p id="action-message">Make your move.</p>
</body>
</html>

2. styles.css

@import url('https://fonts.googleapis.com/css2?family=Asap:wght@500;700&display=swap');

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

body {
    background-color: #003049;

}
header {
    background: white;
    padding: 20px;

    
}

header > h1 {
    color: #003049;
    text-align: center;
    font-family: Asap, sans-serif;
}

.score-board {
    margin: 20px auto;/*위아래 20px, 양옆 center*/
    border: 3px solid white;
    border-radius: 4px;
    text-align: center;
    width: 200px;
    color: white;
    font-size: 46px;
    padding: 15px 20px;/*박스 안에서 패딩주기*/
    font-family: Asap, sans-serif;
    position: relative; /*user-labe,computer-label 이후 남은 영역 상대적으로 사용*/

}

.badge {
    background: #e63946;
    color: white;
    font-size: 14px;
    padding: 2px 10px;
    font-family: Asap, sans-serif;
}

#user-label {
    position : absolute;
    top: 30px;
    left: -25px;
}

#computer-label {
    position : absolute;
    top: 30px;
    right: -30px;
}

.result {
    font-size: 40px;
    color: white;
    font-weight: bold;
    font-family: Asap,sans-serif;
    
}

.result > p{
    text-align: center;
}

.choices {
    margin-top: 50px;
    text-align: center;
}
.choice {
    border : 4px solid white;
    border-radius: 50%;
    margin: 0 20px;/*아이콘 끼리 사이에 공간 주기*/
    padding: 10px; /*동그라미안에 아이콘 테두리 사이에 주기*/
    display: inline-block; /*horiaontal 배치*/
    transition: all 0.3s ease;/*마우스 가져자 댔을때 변하는 속도 느리게 */
    
}

.choice:hover {
    cursor: pointer;
    background: #2a9d8f;

}

#action-message {
    text-align: center;
    color: white;
    font-family: Asap, sans-serif;
    font-weight: bold;
    font-size: 20px;
    margin-top: 20px;
}

사진으로 보면,