<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);
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.