<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="calculator__display--bare">
<span class="calculator__operend--left">0</span>
</div>
<div class="calculator__display--for-advanced">0</div>
<div class="calculator__buttons">
<div class="clear__and__enter">
<button class="clear">AC</button>
<button class="calculate">=</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="number double">0</button>
<button class="decimal">.</button>
<button class="operator">/</button>
</div>
</div>
</div>
</div>
</body>
</html>
* {
margin: 0;
padding: 0;
border: 0px;
color: black;
box-sizing: border-box
}
body {
background-image: url("")
}
.container {
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
.calculator {
background-color: rgb(54, 68, 74);
width: 350px;
height: 500px;
border-radius: 10px;
padding: 30px 20px;
}
.calculator__display--bare {
background-color: #eaf3f6;
text-align: center;
vertical-align: middle;
height: 120px;
width: 100%;
border-radius: 10px;
font-size: 20px;
padding: 25px 15px;
overflow: hidden;
overflow-wrap: break-word;
}
.calculator__display--bare > span {
display: inline-block;
text-align: center;
margin: 5px;
width: 40px;
height: 45px;
border-radius: 10px;
font-size: 20px;
padding: 10px 5px;
}
.calculator__display--for-advanced {
display: none;
height: 100px;
width: 100%;
border-radius: 10px;
font-size: 20px;
text-align: center;
vertical-align: middle;
padding: 25px 15px;
overflow: hidden;
overflow-wrap: break-word;
}
.calculator__buttons {
background-color: #f9f9cb;
width: 100%;
height: 330px;
margin-top: 10px;
padding: 10px;
border-radius: 10px;
}
.clear__and__enter {
height: 50px;
margin: 10px;
}
.clear__and__enter > button {
border-radius: 10px;
width: 50px;
height: 40px;
margin: 0px 5px;
color: rgb(188, 252, 252);
background-color: #29344a;
cursor: pointer;
outline: none;
}
.button__row {
height: 50px;
margin: 10px;
}
.button__row > button {
width: 50px;
height: 40px;
border-radius: 10px;
cursor: pointer;
outline: none;
background-color: #a15757;
color: #f5cfcf;
}
.button__row > .operator {
color: #213513;
background-color: #bee284;
}
.button__row > .double {
width: 115px;
}
.button__row > .isPressed {
background-color: #00da75;
}
.logo {
position: fixed;
padding: 30px;
bottom: 0px;
right: 0px;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.