<!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="result">0</div>
        <div clss="calculator">
            <div class="calculator_number-operator">
                <button class="number">7</button>
                <button class="number">8</button>
                <button class="number">9</button>
                <button class="operator">+</button>
            </div>
            <div class="calculator_number-operator">    
                <button class="number">4</button>
                <button class="number">5</button>
                <button class="number">6</button>
                <button class="operator">-</button>
            </div>
            <div class="calculator_number-operator">
                <button class="number">1</button>
                <button class="number">2</button>
                <button class="number">3</button>
                <button class="operator">*</button>
            </div>
            <div class="calculator_number-operator-clear-equal">
                <button class="clear">c</button>
                <button class="number">0</button>
                <button class="equal">=</button>
                <button class="operator">/</button>
            </div>
        </div>
    </div>

</body>
</html>
.result {
    width: 423px;
    height: 100px;
    margin: 1px;
    text-align: right;
    border-radius: 5px;
    background-color: rgb(216, 216, 216);
    font-size: 300%;
    display: flex;
    justify-content: flex-end;
    align-items: center;

}

body {
    padding: 16px;
    background: #f7f7f7;
}

.container {
    width: 425px;
    margin: 64px auto 0;
    padding: 16px;
    display: flex;
    flex-direction: column;
    border-radius: 5px;
    border: 5px solid #d7e668;
    background-color: rgb(69, 66, 96);
}

.number {
    width: 100px;
    height: 100px;
    margin: 1px;
    font-size: 300%;
    background-color: rgb(177, 225, 245);
    border-radius: 5px;
    border-color: rgb(177, 225, 245);

}

.operator{
    width: 100px;
    height: 100px;
    margin: 1px;
    font-size: 300%;
    background-color: rgb(239, 232, 185);
    border-radius: 5px;
    border-color:rgb(239, 232, 185);

}

.equal {
    width: 100px;
    height: 100px;
    margin: 1px;
    font-size: 300%;
    background-color: rgb(199, 240, 221);
    border-radius: 5px;
    border-color: rgb(199, 240, 221);

}

.clear {
    width: 100px;
    height: 100px;
    margin: 1px;
    font-size: 300%;
    background-color: rgb(250, 211, 224);
    border-radius: 5px;
    border-color: rgb(250, 211, 224);

}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.