HTML과 CSS만을 사용하여 계산기를 만드는 방법

HTML 프로그래밍 코드만 사용하여 계산기를 만든 적이 있습니까?

당신의 대답이 '아니오'라면 이 기사에서 새로운 것을 배우게 된 것을 축하합니다.
많은 사람들이 JavaScript 프로그래밍 코드가 계산기를 만드는 데 가장 중요한 역할을 한다고 말합니다. 그래서 HTML 프로그래밍 코드만을 사용하여 만든 계산기를 만들었습니다. 여기서 소량의 CSS 프로그래밍 코드가 디자인에 사용되었습니다. 이 기사에서는 아주 적은 양의 HTML 프로그래밍 코드를 사용하여 학습합니다how to make a calculator. 여기에 표시된 calculator은 일반 계산기와 똑같이 작동합니다.

기본적으로 여기에서 모든 종류의 덧셈, 뺄셈, 곱셈, 나눗셈 등 수학 계산을 쉽게 풀 수 있습니다. 여기에는 다양한 유형의 버튼이 사용되었으며 CSS 코드를 사용하여 디자인되었습니다. 나는 이전에 Casio Company , neumorphism , Responsive 등과 같은 더 많은 유형의 계산기를 디자인했습니다. 그러나 이 디자인은 완전히 새롭고 일반적입니다. 이 문서에서는 이 새로운 디자인을 만드는 데 도움이 되는 모든 종류의 필수 소스 코드와 자습서를 찾을 수 있습니다.

비디오 자습서를 시청하여 전체 단계를 단계별로 알아보십시오.

아래에서 비디오 자습서를 볼 수 있습니다. 이것은 이 계산기를 만드는 방법을 완전히 배우고 이해하는 데 도움이 될 것입니다.


Demo: Click here

Download: Click here

위의 비디오에서 이 계산기를 만드는 방법을 배웠기를 바랍니다.

HTML과 CSS를 사용하여 이 계산기를 만드는 방법

아래에서는 내가 어떻게 만들었고 여기에 사용된 요소를 만드는 데 어떤 프로그래밍 코드가 사용되었는지 보여드리겠습니다.

배경을 만들었다

먼저 이 계산기의 배경을 CSS 코드를 이용하여 만들었습니다. 배경에 밝은 녹색 색상을 사용했으며 원하는 색상으로 변경할 수 있습니다.

body{
    background-color: #a9bd7e;
}
table{
    margin: auto;
    background-color: #9dd2ea;
    width: 295px;
    height: 325px;
    text-align: center;
    border-radius: 4px;
}

버튼 추가

여기에서는 완전한 HTML 프로그래밍 코드로 구성된 다양한 유형의 버튼을 사용했습니다.
일부 키워드 버튼과 일부 연산자 버튼이 있습니다. 연산자 버튼은 더하기, 빼기, 곱하기, 나누기 등과 같은 계산을 수행하는 데 도움이 됩니다.

<input type="button" name="one" value="1" onclick="calc.input.value += '1'">
            <input type="button" name="two" value="2" onclick="calc.input.value += '2'">
            <input type="button" name="three" value="3" onclick="calc.input.value += '3'">
            <input type="button" class="operator" name="plus" value="+" onclick="calc.input.value += '+'">
            <br>
            <input type="button" name="four" value="4" onclick="calc.input.value += '4'">
            <input type="button" name="five" value="5" onclick="calc.input.value += '5'">
            <input type="button" name="six" value="6" onclick="calc.input.value += '6'">
            <input type="button" class="operator" name="minus" value="-" onclick="calc.input.value += '-'">
             <br>
             <input type="button" name="seven" value="7" onclick="calc.input.value += '7'">
             <input type="button" name="eight" value="8" onclick="calc.input.value += '8'">
             <input type="button" name="nine" value="9" onclick="calc.input.value += '9'"> 
             <input type="button" class="operator" name="times" value="*" onclick="calc.input.value += '*'">
             <br>
             <input type="button" id="clear" name="clear" value=" C " onclick="calc.input.value=''">
             <input type="button" name="zero" value="0" onclick="clac.input.value +='0'">
             <input type="button" name="doit" value=" = " onclick="calc.input.value=eval(calc.input.value)">
             <input type="button" class="operator" name="div" value="/" onclick="calc.input.value += '/'">
             <br>

버튼 디자인

다음 코드는 HTML 코드로 만든 버튼을 디자인하고 계산기로 변환하는 데 사용되었습니다. 이 코드를 사용하여 다양한 유형의 색상이 추가되었습니다.

input{
    outline: 0;
    position: relative;
    left: 5px;
    top: 5px;
    border: 0;
    color: #495069;
    background-color: 4px;
    width: 60px;
    height: 50px;
    float: left;
    margin: 5px;
    font-size: 20px;
    box-shadow: 0 4px rgba(0,0,0,0.2);
}

.operator{
    background-color: #f1ff92;
    position: relative;
}


#clear{
    float: left;
    position: relative;
    display: block;
    background-color: #ff9fa8;
    margin-bottom: 15px;
}

디스플레이 만들기

다음 프로그래밍 코드는 이 계산기에 표시하는 데 사용되었습니다. 일부 계산을 수행할 때 해당 계산을 확인하기 위해 만들어진 디스플레이는 다음 프로그래밍 코드의 도움으로 만들어집니다.

<input type="text" name="input" size="16" id="answer">

#answer{
    width: 270px;
    font-size: 26px;
    text-align: center;
    background-color: #f1faeb;
    float: left;
}
/* answer hover effect */
#answer:hover{
    width: 270px;
    font-size: 26px;
    text-align: center;
    box-shadow: 0 4px rgba(0,0,0,0.2);
    background-color: #f1faeb;
}

호버 효과 추가

이 계산기는 자체 프로그래밍 코드를 사용하여 호버 효과를 생성합니다. 버튼 위로 마우스를 가져가면 버튼의 현재 색상이 변경됩니다. 다음 코드는 이 작업을 수행하는 데 사용되었습니다.

/* add input hover effectg */
input:hover{
    border: 0 solid #000;
    color: #495069;
    background-color: #8f5fda;
    border-radius: 4px;
    width: 60px;
    height: 50px;
    float: left;
    margin: 5px;
    font-size: 20px;
    box-shadow: 0 4px #644294;
}
/* hover */
.operator:hover{
    background-color: #e7f56b;
    box-shadow: 0 4px #b7c259;
}
/* hover */
#clear:hover{
    float: left;
    display: block;
    background-color: #f297a0;
    margin-bottom: 15px;
    box-shadow: 0 4px #cc7f86;
}

위의 튜토리얼이 계산기를 만드는 방법을 배우는 데 많은 도움이 되었기를 바랍니다. 문제가 있으면 확실히 댓글을 달고 물어볼 수 있습니다. 나는 확실히 당신을 도울 것입니다. 공식 웹 사이트를 팔로우하여 더 많은 기사를 읽을 수 있습니다.

 💗  If you like this HTML calculator, please like the article 💗