[01-01] 노마드코더 - 바닐라JS로 게임만들기 01

d0201d 2020. 10. 7. 20:57

깃허브에 셋팅

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles.css" />
    <title>PaintJS</title>
</head>
<body>
    <canvas id="jsCanvas" class="canvas"></canvas>
    <div class="controls">
        <div class="controls_range">
            <input type="range" name="" id="jsRange" min="0.1" max="5" value="2.5" step="0.1"/>
        </div>
        <div class="controls_btns">
            <button id="jsMode">Fill</button>
            <button id="jsSave">Save</button>
        </div>
        <div class="controls_colors" id="jsColors">
            <div class="controls_color" style="background-color: #2c2c2c;"></div>
            <div class="controls_color" style="background-color: #ffffff"></div>
            <div class="controls_color" style="background-color: #ff3b30"></div>
            <div class="controls_color" style="background-color:#ff9500"></div>
            <div class="controls_color" style="background-color: #ffcc00"></div>
            <div class="controls_color" style="background-color: #4cd963"></div>
            <div class="controls_color" style="background-color: #5ac8fa"></div>
            <div class="controls_color" style="background-color: #0579ff"></div>
            <div class="controls_color" style="background-color: #5856d6"></div>
        </div>
    </div>
    <script src="app.js" defer></script>
    
</body>
</html>

@import "reset.css";
body {
    background-color:#f6f9fc;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 50px;
    padding-bottom:50px
}
.canvas {
  width:700px;
  height: 700px;
  background-color: #fff;
  border-radius: 15px;
  box-shadow: 0 4px 6px rgba(50, 50, 93, 0.11), 0 1px 3px rgba(0, 0, 0, 0.08);
}

.controls  {
    margin-top:80px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.controls .controls_btns {
    margin-bottom:30px
}

.controls_btns button {
    all:unset;
    cursor: pointer;
    background-color:#fff;
    padding:5px 0px;
    width:80px;
    text-align: center;
    border-radius: 5px;
    box-shadow: 0 4px 6px rgba(50, 50, 93, 0.11), 0 1px 3px rgba(0, 0, 0, 0.08);
    border:2px solid rgba(0,0,0,0.2);
    color:rgba(0,0,0,0.8);
    text-transform: uppercase;
    font-weight: 800;
    font-size:12px;
}

.controls_btns button:active{
    transform: scale(0.98);
}

.controls .controls_colors {
    display: flex;
}

.controls_colors .controls_color {
    width:50px;
    height: 50px;
    box-shadow: 0 4px 6px rgba(50, 50, 93, 0.11), 0 1px 3px rgba(0, 0, 0, 0.08);
     border-radius:50% ;
     cursor: pointer;
}

.controls .controls_range {
    margin-bottom: 30px;
}

저작자표시 (새창열림)