HTML로 계산기 만드는 방법

공동 작성자 위키하우 직원

컴퓨터에 있는 계산기를 이용해서 계산을 할 수 있는 방법이 많지만, 간단한 HTML 코드를 이용해서 직접 만드는 방법도 있다. HTML로 계산기를 만들기 위해서는 기본적인 HTML을 배운 다음, 필요한 코드를 텍스트 편집기에 복사하고 HTML 확장자로 저장하면 된다. 그리고 원하는 브라우저에서 HTML 문서를 열어 계산기를 사용하면 된다. 그러면 브라우저에서 계산도 할 수 있고, 코딩에 대한 기초 지식도 배울 수 있다 !

파트 1

파트 1 의 4:

코드 이해하기

PDF 다운로드

{"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/0\/08\/Create-a-Calculator-Using-HTML-Step-1-Version-3.jpg\/v4-460px-Create-a-Calculator-Using-HTML-Step-1-Version-3.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/0\/08\/Create-a-Calculator-Using-HTML-Step-1-Version-3.jpg\/v4-728px-Create-a-Calculator-Using-HTML-Step-1-Version-3.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}

1
각 html의 기능을 이해한다. 계산기를 만들때 사용할 코드는 문서의 다른 요소들을 정의하는 코드 문법이 모여 만들어진다. 여기를 클릭하여 이해를 위해 설명을 읽어보거나 계산기를 만드는데 사용하는 코드 각 줄에 있는 텍스트를 읽어본다.
- html : 이 문법은 문서 나머지에 어떤 언어가 사용될지 알려준다. 코딩에서는 다양한 언어로 코딩을 하고, <html> 은 문서 나머지 부분에 - (쓸 언어가 들어감) - html 를 쓸 것이라는 걸 알려준다. ^{[1]
  X
  출처 검색하기}
- head : 문서에게 이 밑에 있는 데이터는 "메타데이터"라고도 알려진 데이터라는 것을 알려준다. <head> 명령어는 보통 문서의 스타일적인 요소를 정의하기 위해 사용되는 말하자면, 제목, 부제목 등과 같다. 우산을 생각해보면 된다. 우산 아래 코드가 정의된다. ^{[2]
  X
  출처 검색하기}
- title : 문서의 제목이 들어갈 부분을 넣는 곳이다. 이 속성은 html 브라우저에서 열 때 문서의 제목을 정의하는데 사용된다.
- body bgcolor= "#" : 이 속성은 코드 배경과 body 부분의 색상을 정할 때 사용한다. 쌍 따옴표 안에있는 # 뒤에 오는 숫자는 정의된 색상 이 들어간다.
- text= "" : 쌍 따옴표 안에 들어가는 단어가 문서의 텍스트 색상을 정한다.
- form name="" : 이 속성은 형식 이름을 지정한다. 이 이름은 자바스크립트가 해당 형식 이름에 대해 알고 있는 내용을 기반으로 형식 뒤에 오는 구조를 만들 때 사용된다. 예를 들어, 사용할 형식 이름은 계산기이고, 이에 맞게 문서에 구조를 만들 것이다. ^{[3]
  X
  출처 검색하기}
- input type="" : 액션이 일어나는 부분이다. "input type" 속성은 문서에게 괄호 나머지 부분에 들어가는 것이 어떤 종류의 텍스트일지 말해준다. 예를 들어, 텍스트, 비밀번호, 버튼 등이 될 수 있다(계산기니까). ^{[4]
  X
  출처 검색하기}
- value="" : 이 명령어는 위에 input type에 지정된 부분에 무엇이 들어갈건지 문서에게 알려준다. 계산기의 경우, 숫자(1-9), 연산자 (+,-,*,/,=)가 될 것이다. ^{[5]
  X
  출처 검색하기}
- onClick="" : 이 문법은 이벤트를 나타날 때 쓰는데, 버튼 클릭시 뭔가 일어날 거라고 문서에게 알려주는 역할을 한다. 계산기의 경우 각 버튼을 텍스트처럼 보이게 만들고 싶다. 그렇다면 버튼 "6"의 경우, document.calculator.ans.value+='6' 를 쌍 따옴표 사이에 넣을 것이다. ^{[6]
  X
  출처 검색하기}
- br : 이 태그는 문서에서 한 줄을 띄워주기 때문에 다음에 오는 건 한 줄 띄어서 뜨게 된다. ^{[7]
  X
  출처 검색하기}
- /form, /body, and /html : 이 명령어를 쓰면 이전에 선언됐던 명령어를 마친다는 것을 문서에게 알려준다. ^{[8]
  X
  출처 검색하기}
광고

파트 2

파트 2 의 4:

기본적인 HTML 계산기 코드

PDF 다운로드

{"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/4\/4b\/Create-a-Calculator-Using-HTML-Step-2-Version-4.jpg\/v4-460px-Create-a-Calculator-Using-HTML-Step-2-Version-4.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/4\/4b\/Create-a-Calculator-Using-HTML-Step-2-Version-4.jpg\/v4-728px-Create-a-Calculator-Using-HTML-Step-2-Version-4.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}

왼쪽 상단에서 커서를 잡고 밑으로 쭉 드래그하여 하이라이트가 되게 한 다음, 오른쪽 하단 까지 드래그하면 텍스트가 파란색이 된다. 그리고 맥에서는 "Command+C", 윈도우에서는 "Ctrl+C" 를 눌러 다음의 코드를 클립보드에 복사한다.

 < 
 html 
 > 
 < 
 head 
 > 
 < 
 title 
 > 
HTML Calculator </ 
 title 
 > 
 </ 
 head 
 > 
 < 
 body 
 bgcolor 
 = 
 "#000000" 
 text 
 = 
 "gold" 
 > 
 < 
 form 
 name 
 = 
 "calculator" 
 > 
 < 
 input 
 type 
 = 
 "button" 
 value 
 = 
 "1" 
 onClick 
 = 
 "document.calculator.ans.value+='1'" 
 > 
 < 
 input 
 type 
 = 
 "button" 
 value 
 = 
 "2" 
 onClick 
 = 
 "document.calculator.ans.value+='2'" 
 > 
 < 
 input 
 type 
 = 
 "button" 
 value 
 = 
 "3" 
 onClick 
 = 
 "document.calculator.ans.value+='3'" 
 >< 
 br 
 > 
 < 
 input 
 type 
 = 
 "button" 
 value 
 = 
 "4" 
 onClick 
 = 
 "document.calculator.ans.value+='4'" 
 > 
 < 
 input 
 type 
 = 
 "button" 
 value 
 = 
 "5" 
 onClick 
 = 
 "document.calculator.ans.value+='5'" 
 > 
 < 
 input 
 type 
 = 
 "button" 
 value 
 = 
 "6" 
 onClick 
 = 
 "document.calculator.ans.value+='6'" 
 > 
 < 
 input 
 type 
 = 
 "button" 
 value 
 = 
 "7" 
 onClick 
 = 
 "document.calculator.ans.value+='7'" 
 >< 
 br 
 > 
 < 
 input 
 type 
 = 
 "button" 
 value 
 = 
 "8" 
 onClick 
 = 
 "document.calculator.ans.value+='8'" 
 > 
 < 
 input 
 type 
 = 
 "button" 
 value 
 = 
 "9" 
 onClick 
 = 
 "document.calculator.ans.value+='9'" 
 > 
 < 
 input 
 type 
 = 
 "button" 
 value 
 = 
 "-" 
 onClick 
 = 
 "document.calculator.ans.value+='-'" 
 > 
 < 
 input 
 type 
 = 
 "button" 
 value 
 = 
 "+" 
 onClick 
 = 
 "document.calculator.ans.value+='+'" 
 >< 
 br 
 > 
 < 
 input 
 type 
 = 
 "button" 
 value 
 = 
 "*" 
 onClick 
 = 
 "document.calculator.ans.value+='*'" 
 > 
 < 
 input 
 type 
 = 
 "button" 
 value 
 = 
 "/" 
 onClick 
 = 
 "document.calculator.ans.value+='/'" 
 > 
 < 
 input 
 type 
 = 
 "button" 
 value 
 = 
 "0" 
 onClick 
 = 
 "document.calculator.ans.value+='0'" 
 > 
 < 
 input 
 type 
 = 
 "reset" 
 value 
 = 
 "Reset" 
 > 
 < 
 input 
 type 
 = 
 "button" 
 value 
 = 
 "=" 
 onClick 
 = 
 "document.calculator.ans.value=eval(document.calculator.ans.value)" 
 > 
 < 
 br 
 > 
Solution is < 
 input 
 type 
 = 
 "textfield" 
 name 
 = 
 "ans" 
 value 
 = 
 "" 
 > 
 </ 
 form 
 > 
 </ 
 body 
 > 
 </ 
 html 
 >