개발 노트

간단한 계산기 본문

프로그래밍/Html

간단한 계산기

알 수 없는 사용자 2022. 1. 3. 18:43 
* {
  font-size: 40px;
}

h1 {
  color: #ffffff;
}

body {
  background-color: #000000;
}
article {
  display: flex;
  flex-direction: column;
}
.center {
  text-align: center;
}
.calculator {
  width: 287px;
  border: 6px solid rgb(33, 182, 58);
  background-color: #ffffff;
  padding: 6px;
  display: inline-block;
}
.calculator form {
  display: grid;
  grid-template-columns: repeat(4, 65px);
  grid-auto-rows: 65px;
  grid-gap: 5px;
}
.calculator form input {
  border: 2px solid #333;
  cursor: pointer;
}
.calculator form input:hover {
  box-shadow: 1px 1px 2px #333;
}
.calculator form .clear {
  background-color: #ed8848;
}
.calculator form .operator {
  background-color: #f65;
}
.calculator form .dot {
  background-color: lightgreen;
}
.calculator form input[type="text"] {
  grid-column: span 4;
  text-align: right;
  padding: 0 10px;
}
.calculator form .clear {
  grid-column: span 3;
}
.calculator form .result {
  grid-column: span 2;
}​
<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>계산기</title>
    <meta name="description" content="간단한 계산을 위한 웹 계산기입니다." />
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div class="center">
      <h1>계산기</h1>
      <div class="calculator">
        <form name="forms">
          <input type="text" name="output" readonly />
          <input
            type="button"
            class="clear"
            value="지우기"
            onclick="document.forms.output.value=''"
          />
          <input type=button class=operator value=/
          onclick="document.forms.output.value+='/'">
          <input
            type="button"
            value="1"
            onclick="document.forms.output.value+='1'"
          />
          <input
            type="button"
            value="2"
            onclick="document.forms.output.value+='2'"
          />
          <input
            type="button"
            value="3"
            onclick="document.forms.output.value+='3'"
          />
          <input
            type="button"
            class="operator"
            value="*"
            onclick="document.forms.output.value+='*'"
          />
          <input
            type="button"
            value="4"
            onclick="document.forms.output.value+='4'"
          />
          <input
            type="button"
            value="5"
            onclick="document.forms.output.value+='5'"
          />
          <input
            type="button"
            value="6"
            onclick="document.forms.output.value+='6'"
          />
          <input
            type="button"
            class="operator"
            value="+"
            onclick="document.forms.output.value+='+'"
          />
          <input
            type="button"
            value="7"
            onclick="document.forms.output.value+='7'"
          />
          <input
            type="button"
            value="8"
            onclick="document.forms.output.value+='8'"
          />
          <input
            type="button"
            value="9"
            onclick="document.forms.output.value+='9'"
          />
          <input
            type="button"
            class="operator"
            value="-"
            onclick="document.forms.output.value+='-'"
          />
          <input
            type="button"
            class="dot"
            value="."
            onclick="document.forms.output.value+='.'"
          />
          <input
            type="button"
            value="0"
            onclick="document.forms.output.value+='0'"
          />
          <input
            type="button"
            class="operator_result"
            value="="
            onclick="document.forms.output.value=eval(document.forms.output.value)"
          />
        </form>
      </div>
    </div>
  </body>
</html>

 

저작자표시

'프로그래밍 > Html' 카테고리의 다른 글

html 리스트태그 연습 1  (0) 2022.05.30
Html 링크걸기  (0) 2022.05.30
Html 기술  (0) 2022.05.16
Html 연습하기  (0) 2022.05.16
html 기본 구조 코드  (0) 2021.12.27
'프로그래밍/Html' Related Articles more