HTML로 계산기 만드는 방법

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

파트 1

파트 1 의 4:

코드 이해하기

PDF 다운로드

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 다운로드

왼쪽 상단에서 커서를 잡고 밑으로 쭉 드래그하여 하이라이트가 되게 한 다음, 오른쪽 하단 까지 드래그하면 텍스트가 파란색이 된다. 그리고 맥에서는 "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>

파트 3

파트 3 의 4:

자신만의 계산기 만들기

PDF 다운로드

1
텍스트 편집기 프로그램을 컴퓨터에서 실행한다. 여러가지 프로그램이 있지만 좋은 퀄리티와 편리성을 고려하면 텍스트 편집기나 메모장을 추천한다.^{[9]X출처 검색하기}^{[10]X출처 검색하기}
- 맥의 경우 오른쪽 상단 코너에서 돋보기를 클릭하면 스포트라이트를 열 수 있다. 열고 나면, 텍스트 편집기를 입력하고 해당 프로그램을 클릭하면 된다. 파란색으로 하이라이트 표시가 될 것이다.
- PC의 경우, 화면 왼쪽 하단 코너의 시작 메뉴를 연다. 검색창에 메모장을 입력하고 메모장을 연다. 오른쪽에 결과가 뜰 것이다.
2
문서에 HTML 코드를 붙여넣기한다.
- 맥의 경우, 문서 내용 부분을 클릭하고 "Command+V"를 누른다. 코드를 붙여 넣은 후, 화면 상단의 "형식"을 클릭하고 "기본 텍스트로 만들기 " 를 누른다.^{[11]X출처 검색하기}
- PC의 경우, 문서 내용 부분을 클릭하고 "Ctrl+V"를 누른다.
저장하려면 창 왼쪽 상단에 "파일" 버튼을 누르고 PC에서는 "다음으로 저장..." , 맥에서는 드롭다운 메뉴의 "저장.."을 누르면 된다.
"다음으로 저장..." 메뉴에서 자신의 파일명 다음에 ".html"을 입력하고 "저장"을 클릭한다. 예를 들어 파일 이름을 '첫번째 계산기'로 하고 싶다면, "첫번째 계산기.html"로 저장한다.
광고