HTML, CSS를 사용하여 계산기 목업 만들기

이상원·2022년 5월 6일
0

간단한 계산기를 구현하기위해서
첫 단계로 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;
  }요

profile
코드짜는 제빵왕이상원

0개의 댓글