간단한 계산기를 구현하기위해서
첫 단계로 Html로 뼈대를 구현하였다
<body>
<div class="calculator">
<button class="exit1"></button>
<button class="exit2"></button>
<button class="exit3"></button>
<div class="calculator__display--bare">
<span class="calculator__operend--left">0</span>
<span class="calculator__operator">+</span>
<span class="calculator__operend--right">0</span>
<span class="calculator__equal">=</span>
<span class="calculator__result">0</span>
</div>
<div class="calculator__display--for-advanced">0</div>
<div class="main">
<div class="clear__and__enter">
<button class="clear">AC</button>
<button class="plus">+/-</button>
<button class="dont">%</button>
<button class="operator">÷</button>
</div>
<div class="number_button">
<button class="number">7</button>
<button class="number">8</button>
<button class="number">9</button>
<button class="operator">x</button>
</div>
<div class="number_button">
<button class="number">4</button>
<button class="number">5</button>
<button class="number">6</button>
<button class="operator">-</button>
</div>
<div class="number_button">
<button class="number">1</button>
<button class="number">2</button>
<button class="number">3</button>
<button class="operator">+</button>
</div>
<div class="number_button">
<button class="zero">0</button>
<button class="decimal">.</button>
<button class="operator">=</button>
</div>
</div>
</div>
</div>
</div>
<script src="./index.js"></script>
</body>
화면으로 보여지는 각 줄마다에 새로운 class를 지정하여 자식요소로 그에 할당하는 button 형식으로 숫자와 사칙연산을 넣었다.
그리고 css를 입히는데 주로 flex를 사용하여 배치를 하고
내가 만들고 싶었던 맥 계산기모양과 같이 만들기 위해서 여러가지 css태그를 활용하여
구현 해보았다.
.calculator {
width: 250px;
height: 360px;
background-color: rgb(102, 101, 101);
border-radius: 13px;
padding: 0px;
overflow: hidden;
}
body {
display: flex;
justify-content: center;
align-items: center;
border: 1px solid red;
height: 100vh;
}
또한 hover, active 태그를 활용하여서 다양한 효과를 넣었다.
.main .operator {
background-color: orange;
}
.number_button > button:hover {
background-color: rgb(161, 156, 156);
}
.clear__and__enter > button:hover {
background-color: rgb(143, 140, 140);
}
.number_button .operator:hover {
background-color: rgb(202, 134, 8);
}
.clear__and__enter .operator:hover {
background-color: rgb(202, 134, 8);
}
.number_button > button:active {
font-size: 30px;
}
.clear__and__enter > button:active {
font-size: 30px;
}요