HTML로 계산기 만드는 방법

PDF 다운로드
공동 작성자 위키하우 직원

출처

PDF 다운로드

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

파트 1
파트 1 의 4:

코드 이해하기

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

기본적인 HTML 계산기 코드

PDF 다운로드
  1. {"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 
 >
파트 3
파트 3 의 4:

자신만의 계산기 만들기

PDF 다운로드
  1. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/e\/e6\/Create-a-Calculator-Using-HTML-Step-3-Version-4.jpg\/v4-460px-Create-a-Calculator-Using-HTML-Step-3-Version-4.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/e\/e6\/Create-a-Calculator-Using-HTML-Step-3-Version-4.jpg\/v4-728px-Create-a-Calculator-Using-HTML-Step-3-Version-4.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    여러가지 프로그램이 있지만 좋은 퀄리티와 편리성을 고려하면 텍스트 편집기나 메모장을 추천한다. [9] [10]
    • 맥의 경우 오른쪽 상단 코너에서 돋보기를 클릭하면 스포트라이트를 열 수 있다. 열고 나면, 텍스트 편집기를 입력하고 해당 프로그램을 클릭하면 된다. 파란색으로 하이라이트 표시가 될 것이다.
    • PC의 경우, 화면 왼쪽 하단 코너의 시작 메뉴를 연다. 검색창에 메모장을 입력하고 메모장을 연다. 오른쪽에 결과가 뜰 것이다.
  2. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/9\/99\/Create-a-Calculator-Using-HTML-Step-4-Version-4.jpg\/v4-460px-Create-a-Calculator-Using-HTML-Step-4-Version-4.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/9\/99\/Create-a-Calculator-Using-HTML-Step-4-Version-4.jpg\/v4-728px-Create-a-Calculator-Using-HTML-Step-4-Version-4.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    • 맥의 경우, 문서 내용 부분을 클릭하고 "Command+V" 를 누른다. 코드를 붙여 넣은 후, 화면 상단의 "형식" 을 클릭하고 "기본 텍스트로 만들기 " 를 누른다. [11]
    • PC의 경우, 문서 내용 부분을 클릭하고 "Ctrl+V"를 누른다.
  3. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/e\/e1\/Create-a-Calculator-Using-HTML-Step-5-Version-2.jpg\/v4-460px-Create-a-Calculator-Using-HTML-Step-5-Version-2.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/e\/e1\/Create-a-Calculator-Using-HTML-Step-5-Version-2.jpg\/v4-728px-Create-a-Calculator-Using-HTML-Step-5-Version-2.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    저장하려면 창 왼쪽 상단에 "파일" 버튼을 누르고 PC에서는 "다음으로 저장..." , 맥에서는 드롭다운 메뉴의 "저장.." 을 누르면 된다.
  4. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/9\/9e\/Create-a-Calculator-Using-HTML-Step-6-Version-2.jpg\/v4-460px-Create-a-Calculator-Using-HTML-Step-6-Version-2.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/9\/9e\/Create-a-Calculator-Using-HTML-Step-6-Version-2.jpg\/v4-728px-Create-a-Calculator-Using-HTML-Step-6-Version-2.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    "다음으로 저장..." 메뉴에서 자신의 파일명 다음에 ".html"을 입력하고 "저장"을 클릭한다. 예를 들어 파일 이름을 '첫번째 계산기'로 하고 싶다면, "첫번째 계산기.html"로 저장한다.
    광고
파트 4
파트 4 의 4:

계산기 사용하기

PDF 다운로드
  1. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/1\/16\/Create-a-Calculator-Using-HTML-Step-7-Version-2.jpg\/v4-460px-Create-a-Calculator-Using-HTML-Step-7-Version-2.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/1\/16\/Create-a-Calculator-Using-HTML-Step-7-Version-2.jpg\/v4-728px-Create-a-Calculator-Using-HTML-Step-7-Version-2.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    스포트라이트에서 파일명을 입력하거나 시작 메뉴 검색창에 입력하면 된다. "html" 확장자를 입력할 필요는 없다.
  2. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/1\/19\/Create-a-Calculator-Using-HTML-Step-8-Version-2.jpg\/v4-460px-Create-a-Calculator-Using-HTML-Step-8-Version-2.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/1\/19\/Create-a-Calculator-Using-HTML-Step-8-Version-2.jpg\/v4-728px-Create-a-Calculator-Using-HTML-Step-8-Version-2.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    기본 브라우저의 새 웹 페이지에 계산기가 열릴 것이다.
  3. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/2\/28\/Create-a-Calculator-Using-HTML-Step-9-Version-2.jpg\/v4-460px-Create-a-Calculator-Using-HTML-Step-9-Version-2.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/2\/28\/Create-a-Calculator-Using-HTML-Step-9-Version-2.jpg\/v4-728px-Create-a-Calculator-Using-HTML-Step-9-Version-2.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    답은 빈칸에 나올 것이다.
    광고

팁

  • 원한다면 웹 페이지에 계산기를 끼워넣을 수도 있다.
  • 계산기 모양을 바꾸려면 HTML 스타일링을 사용할 수도 있다.
광고

관련 위키하우

QR 코드 스캔하는 방법
컴퓨터 사양 확인하는 방법
컴퓨터에 프린트기 연결하는 법
컴퓨터 메모리 확인하는 방법
윈도우즈 컴퓨터로 스크린샷 찍기
프린터 무선 연결하는 법
윈도우 PC 종료 시 쓰이는 6가지 단축키
마인크래프트에서 지도 만드는 방법
엑셀에서 표준편차 계산하는 방법
캐논 프린터로 문서 스캔하는 법
팝업 차단 해제하는 방법
사진에서 QR 코드 스캔하는 방법
마인크래프트에서 마을을 찾는 방법
PC와 블루투스를 연결하는 방법
광고

출처

  1. ↑ http://www.w3schools.com/html/html_basic.asp
  2. ↑ http://www.w3schools.com/html/html_head.asp
  3. ↑ http://www.w3schools.com/html/html_formatting.asp
  4. ↑ http://www.w3schools.com/tags/att_input_type.asp
  5. ↑ http://www.w3schools.com/tags/att_input_value.asp
  6. ↑ http://www.w3schools.com/tags/ref_eventattributes.asp
  7. ↑ http://www.w3schools.com/tags/tag_br.asp
  8. ↑ http://www.w3schools.com/html/html_forms.asp
  9. ↑ http://computers.tutsplus.com/tutorials/quick-tip-configure-textedit-for-coding-html--mac-44786
  1. ↑ http://webdesign.about.com/od/notepad/a/aa040501a.htm
  2. ↑ http://www.askdavetaylor.com/how_do_i_save_html_files_from_textedit/

이 위키하우에 대하여

다른 언어
이 문서는 7,337 번 조회 되었습니다.

이 글이 도움이 되었나요?

광고