html 코드
<body>
<div class="container">
<div class="calculator">
<div class="display">
<span>0</span>
<span>+</span>
<span>0</span>
<span>=</span>
<span>0</span>
</div>
<div class="controller">
<button>clear</button>
<button>enter</button>
</div>
<div class="buttons">
<div class="row">
<button class="col">7</button>
<button class="col">8</button>
<button class="col">9</button>
<button class="col">+</button>
</div>
<div class="row">
<button class="col">4</button>
<button class="col">5</button>
<button class="col">6</button>
<button class="col">-</button>
</div>
<div class="row">
<button class="col">1</button>
<button class="col">2</button>
<button class="col">3</button>
<button class="col">*</button>
</div>
<div class="row">
<button class="col w50">0</button>
<button class="col">.</button>
<button class="col">/</button>
</div>
</div>
</div>
</div>
</body>CSS 코드
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
.container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.calculator {
border: 1px solid black;
width: 360px;
height: 540px;
display: flex;
flex-direction: column;
}
.display {
height: 20%;
display: flex;
justify-content: space-evenly;
align-items: center;
}
.controller {
height: 10%;
display: flex;
}
.controller > button {
flex-grow: 1;
}
.buttons {
display: flex;
flex-direction: column;
height: 70%;
}
.row {
flex-grow: 1;
display: flex;
}
.col {
flex-basis: 25%;
}
.w50 {
flex-basis: 50%;
}
내가 보려고 정리하는 블로그🔥