<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>실습 계산기 만들기</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <div class="calculator">
            <div class="button__row">
                <div class="screen">0</div>
            </div>
            <div calss="calcultor-buttons">
                <div class="clear-equal">
                    <button class="clear">c</button>
                    <button class="equal">=</button>
                </div>
                <div class="button__row">
                    <button class="number">7</button>
                    <button class="number">8</button>
                    <button class="number">9</button>
                    <button class="operator">+</button>
                </div>
                <div class="button__row">
                    <button class="number">4</button>
                    <button class="number">5</button>
                    <button class="number">6</button>
                    <button class="operator">-</button>
                </div>
                <div class="button__row">
                    <button class="number">1</button>
                    <button class="number">2</button>
                    <button class="number">3</button>
                    <button class="operator">*</button>
                </div>
                <div class="button__row">
                    <button class="point">.</button>
                    <button class="number-double">0</button>
                    <button class="operator">/</button>
                </div>
            </div>
            
        </div>
    </div>
    
</body>
</html>
body {
    padding: 16px;
    background: #f7f7f7;
    box-sizing: border-box;
}

.container {
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

.calculator {
    width: 350px;
    height: 500px;
    padding: 5px;
    border: 1px solid rgb(232, 232, 247);
    border-radius: 5px;
    background-color: rgb(1, 1, 1);
}

.claculator-screen {
    height: 110px;
    width: 346px;
    border: 1px solid rgb(277, 277, 277);
    background-color: rgb(0, 0, 0);
}

.screen {
    display: flex;
    font-size: 400%;
    justify-content: flex-end;
    align-items: center;
    color: #f7f7f7;
}


.clear {
    width: 168px;
    height: 70px;
    margin:4px 2px;
    padding: 5px;
    font-size: 200%;
    background-color: rgb(203, 231, 255);
    border: 3px solid rgb(255, 255, 255);
    transition-duration: 0.4s;
    cursor: pointer;
}

.equal {
    width: 168px;
    height: 70px;
    margin:4px 2px;
    padding: 5px;
    font-size: 200%;
    background-color: rgb(203, 231, 255);
    border: 3px solid rgb(255, 255, 255);
    transition-duration: 0.4s;
    cursor: pointer;
}

.number {
    width: 79px;
    height: 70px;
    margin:4px 2px;
    padding: 5px;
    font-size: 200%;
    background-color: blanchedalmond;
    border: 3px solid rgb(255, 255, 255);
    transition-duration: 0.4s;
    cursor: pointer;
}


.operator {
    width: 79px;
    height: 70px;
    margin:4px 2px;
    padding: 5px;
    font-size: 200%;
    background-color: rgb(255, 215, 215);
    border: 3px solid rgb(255, 255, 255);
    transition-duration: 0.4s;
    cursor: pointer;
}

.number-double {
    width: 168px;
    height: 70px;
    margin:4px 2px;
    padding: 5px;
    font-size: 200%;
    background-color: blanchedalmond;
    border: 3px solid rgb(255, 255, 255);
    transition-duration: 0.4s;
    cursor: pointer;
}

.point {
    width: 79px;
    height: 70px;
    margin:4px 2px;
    padding: 5px;
    font-size: 200%;
    background-color: rgb(203, 231, 255);
    border: 3px solid rgb(255, 255, 255);
    transition-duration: 0.4s;
    cursor: pointer;
}
    
.clear:hover {
    background-color: cadetblue;
}

.equal:hover {
    background-color: cadetblue;
}

.number:hover {
    background-color: cadetblue;
}
.operator:hover {
    background-color: cadetblue;
}
.number-double:hover {
    background-color: cadetblue;
}
.point:hover {
    background-color: cadetblue;
}

.clear:active {
    box-shadow: 1px 1px 0 rgb(0,0,0,0.5);
    position: relative;
    top:2px;
}
.equal:active {
    box-shadow: 1px 1px 0 rgb(0,0,0,0.5);
    position: relative;
    top:2px;
}
.number:active {
    box-shadow: 1px 1px 0 rgb(0,0,0,0.5);
    position: relative;
    top:2px;
}
.operator:active {
    box-shadow: 1px 1px 0 rgb(0,0,0,0.5);
    position: relative;
    top:2px;
}
.point:active {
    box-shadow: 1px 1px 0 rgb(0,0,0,0.5);
    position: relative;
    top:2px;
}
.number-double:active {
    box-shadow: 1px 1px 0 rgb(0,0,0,0.5);
    position: relative;
    top:2px;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.