HTML, CSS

HTML로 계산기 만들기 (feat.input 태그)

lazy_cat 2021. 9. 4. 22:06

맥북 계산기 따라 만들기

따라 만들어볼 계산기 디자인

 

계산기 구조

  • form, input 태그만으로 계산기 구성한다.
  • 계산기 결과창 및 버튼인 input 태그들을 div로 감싼 뒤 id를 주어 묶는다.
  • input태그들의 클래스는 버튼 색상을 참고하여 result, clear, zero, operator로 구성.
  • type이 button인 input 태그는 버튼 클릭시 document.forms.result.value로 작동하도록 구성.

 

<!DOCTYPE html>
<html lang="ko" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>MacBook Calcluator</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@200;300&display=swap" rel="stylesheet">
  </head>
  
  <body>
    <div id="cal">
      <form name="forms">
        <input type="text" class="result" name="result" readonly>
        <input type="button" class="clear" value="C" onclick="document.forms.result.value=''">
        <input type="button" class="operator" value="÷" onclick="document.forms.result.value+='/'">
        <input type="button" value="7" onclick="document.forms.result.value+='7'">
        <input type="button" value="8" onclick="document.forms.result.value+='8'">
        <input type="button" value="9" onclick="document.forms.result.value+='9'">
        <input type="button" class="operator" value="×" onclick="document.forms.result.value+='*'">
        <input type="button" value="4" onclick="document.forms.result.value+='4'">
        <input type="button" value="5" onclick="document.forms.result.value+='5'">
        <input type="button" value="6" onclick="document.forms.result.value+='6'">
        <input type="button" class="operator" value="-" onclick="document.forms.result.value+='-'">
        <input type="button" value="1" onclick="document.forms.result.value+='1'">
        <input type="button" value="2" onclick="document.forms.result.value+='2'">
        <input type="button" value="3" onclick="document.forms.result.value+='3'">
        <input type="button" class="operator" value="+" onclick="document.forms.result.value+='+'">
        <input type="button" class="zero" value="    0" onclick="document.forms.result.value+='0'">
        <input type="button" value="." onclick="document.forms.result.value+='.'">
        <input type="button" class="operator equal" value="＝" onclick="document.forms.result.value=eval(document.forms.result.value)">
      </form>
      </div>
  </body>
</html>

 

CSS를 통해 스타일 디자인

 

음.. 그리드로 해서인지 result 부분만 별도 높이 조절을 못하겠다 ^_ㅠ

그래서 아직은 미완성이나 작동은 잘 됨!