계산기 웹 애플리케이션을 만드는 것은 HTML, CSS 및 JavaScript를 배우기 위한 환상적인 프로젝트입니다. 계산기는 흔하거나 다소 평범하지만 처음부터 계산기를 만들면 초보자가 HTML로 콘텐츠 구조화, CSS로 요소 스타일 지정, JavaScript로 대화형 기능 추가 등 웹 개발의 기본 개념을 이해하는 데 도움이 됩니다.
이 개요에서는 완전한 기능을 갖춘 계산기를 만드는 데 필요한 코드의 모든 부분을 살펴보겠습니다. 이 가이드는 코드를 제공할 뿐만 아니라 각 줄을 자세히 설명하여 모든 것이 어떻게 조화되는지 이해할 수 있도록 합니다. 이 프로젝트가 끝나면 개인화하거나 고급 기능으로 확장할 수 있는 원활한 대화형 계산기를 갖게 될 것입니다.
계산기 기능
이 계산기에는 다음과 같은 기본 기능이 포함되어 있습니다.
현재 입력 및 결과를 표시하는 디스플레이 영역입니다.
숫자 버튼(0~9) 및 추가 "00" 버튼.
산술연산 버튼: 덧셈( ), 뺄셈(-), 곱셈(*), 나눗셈(/).
특수 버튼:
AC는 현재 입력을 삭제합니다.
DEL은 마지막 문자를 삭제합니다.
/- 양수와 음수 사이를 전환합니다.
= 표현식을 평가하고 결과를 표시합니다.
이 프로젝트를 통해 다음 방법을 배울 수 있습니다.
HTML을 사용하여 사용자 인터페이스를 만듭니다.
CSS를 사용하여 요소에 스타일을 적용하여 시각적 매력을 향상합니다.
JavaScript를 사용하여 버튼을 처리하는 계산기 로직 구현
상호 작용하고 계산을 수행합니다.
1단계: HTML 구조 - 계산기 레이아웃 작성
HTML 코드는 계산기의 기본 구조를 제공합니다. 이 부분에서는 버튼, 표시 영역 등 계산기를 구성할 요소를 정의합니다. 이 효과를 위해 원하는 편집기를 사용할 수 있습니다. 저는 개인적으로 Visual Studio 코드를 선호합니다. 계산기의 전체 HTML 코드는 다음과 같습니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Calculator</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div>
<p>Explanation</p>
<p>Document Type and Language Declaration:<br>
</p>
<pre class="brush:php;toolbar:false"><!DOCTYPE html>
이 문서가 HTML5 문서임을 브라우저에 알립니다.
<html lang="en">
HTML 문서를 시작하고 언어를 영어로 지정합니다. 이는 검색 엔진과 스크린 리더가 문서의 언어를 이해하는 데 도움이 됩니다.
헤드 섹션:
<head>
문서에 중요하지만 사용자에게 표시되지 않는 메타데이터와 링크가 포함되어 있습니다.
<meta charset="UTF-8">
문자 인코딩을 설정하여 대부분의 언어와의 호환성을 보장합니다.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
다양한 기기에 맞게 레이아웃을 조정하여 반응형 페이지를 만듭니다.
<title>Calculator</title>
브라우저 탭에 표시되는 제목을 설정합니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Calculator</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div>
<p>Explanation</p>
<p>Document Type and Language Declaration:<br>
</p>
<pre class="brush:php;toolbar:false"><!DOCTYPE html>
스타일이 정의된 CSS 파일에 대한 링크입니다.
계산기 레이아웃:
<html lang="en">
계산기의 기능을 처리하는 JavaScript 파일에 대한 링크입니다.
2단계: CSS 스타일 지정 - 계산기 인터페이스 디자인
이제 구조가 잡혔으니 스타일링으로 넘어가겠습니다. 이 CSS 코드는 색상, 둥근 버튼, 그림자 및 반응형 레이아웃 조정을 추가하여 계산기를 더욱 현대적으로 보이게 만듭니다.
<head>
설명
기본 재설정 및 글꼴:
<meta charset="UTF-8">
기본 패딩과 여백을 제거하고 일관된 크기를 위해 상자 크기를 테두리 상자로 설정하고 최신 글꼴을 적용합니다.
바디 스타일링:
body: Flexbox를 사용하여 계산기 컨테이너를 화면 중앙에 배치하고 그라데이션 배경을 적용합니다.
계산기 컨테이너:
.calculator: 패딩, 둥근 모서리, 그림자를 추가하여 깔끔하고 카드 같은 모양을 연출합니다.
디스플레이 입력:
입력: 이 스타일은 디스플레이 영역에 큰 글꼴 크기와 올바른 정렬을 제공하여 실제 계산기 디스플레이와 유사합니다.
버튼 스타일:
.계산기 버튼: 그림자 효과, 흰색 텍스트 색상, 정렬 간격이 포함된 원형 버튼을 설정합니다.
.actionbtn, .clearbtn 및 .enter: 특정 버튼을 돋보이게 하는 스타일입니다(예: 연산자는 녹색, 투명은 빨간색, 같음은 주황색).
3단계: 여기에서 모든 Javascript 논리가 실행됩니다. 계산기를 작동하게 만들기
구조와 스타일이 잘 완성되었으면 JavaScript를 사용하여 기능을 추가해 보겠습니다. 이 스크립트를 사용하면 버튼 클릭을 처리하고, 산술을 수행하고, 결과를 표시할 수 있습니다.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
설명
페이지 로드를 위한 이벤트 리스너:
<title>Calculator</title>
모든 HTML 콘텐츠가 로드된 후 스크립트가 실행되도록 합니다.
입력 및 버튼 변수:
<link rel="stylesheet" href="style.css">
표시 영역을 선택합니다.
<div> <p>Wraps the entire calculator interface. We’ll apply styles to this container to make it look like a calculator.<br> </p> <pre class="brush:php;toolbar:false"><input type="text" placeholder="0"> <p>This is the display area of the calculator, where we show the current number or result. It is disabled, so users can’t type directly.</p> <p>Buttons:<br> </p> <pre class="brush:php;toolbar:false"><button> <p>Clears the calculator display and resets the current calculation.<br> </p> <pre class="brush:php;toolbar:false"><button> <p>Deletes the last entered character.<br> </p> <pre class="brush:php;toolbar:false"><button> <p>Toggles between positive and negative values.<br> </p> <pre class="brush:php;toolbar:false"><button> <p>The division operator.</p> <p>Remaining button elements represent numbers (0–9), operators (+, -, *, /), and a decimal point (.). The = button (class="enter") is used to evaluate the expression.</p> <p>JavaScript File:<br> </p> <pre class="brush:php;toolbar:false"><script src="script.js"></script>
쉽게 조작할 수 있도록 모든 버튼을 배열로 수집합니다.
버튼 클릭 이벤트:
*{
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: 'poppins', sans-serif;
}
body{
width: 100vw;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background: linear-gradient(45deg, #0a0a0a, #3a4452);
}
.calculator{
border: 1px solid #a2a2a2;
padding: 20px;
border-radius: 20px;
background: transparent;
box-shadow: 0px 3px 15px rgba(113, 115, 119, 0.5);
}
input{
width: 272px;
min-height: 100px;
border: none;
padding: 5px;
margin: 10px;
background: transparent;
font-size: 40px;
text-align: right;
cursor: text;
outline: none;
color: #fff;
}
input::placeholder{
color: #fff;
}
.calculator button{
width: 50px;
height: 50px;
margin: 10px;
border-radius: 50%;
border: none;
box-shadow: -5px 3px 10px rgba(9, 9, 9, 0.5);
background: transparent;
color: #fff;
cursor: pointer;
outline: none;
}
.calculator .actionbtn{
color: #1afe17;
}
.calculator .clearbtn{
background: #f31d1f;
}
.calculator .enter{
background: #f5881a;
}
각 버튼에 클릭 이벤트를 추가합니다. 버튼에 따라 다양한 작업이 수행됩니다:
표시 글꼴 크기 조정: 입력 길이가 10자를 초과하면 글꼴 크기를 줄입니다.
등호(=): eval()을 사용하여 표현식을 평가하고 결과를 표시합니다. 오류(예: 잘못된 구문)가 있는 경우 “오류”가 표시됩니다.
Clear(AC): 문자열을 재설정하고 표시를 지웁니다.
삭제(DEL): 문자열에서 마지막 문자를 제거하고 표시를 업데이트합니다.
숫자 및 연산자 버튼: 버튼의 값을 문자열에 추가하고 디스플레이를 업데이트합니다.
토글 기호( /-):
* { padding: 0; margin: 0; box-sizing: border-box; font-family: 'Poppins', sans-serif; }
현재 숫자에 -1을 곱하여 양수 값과 음수 값 사이를 전환합니다.
결론적으로 HTML, CSS 및 JavaScript를 사용하여 간단하면서도 기능적인 계산기 웹 앱을 구축하는 것은 초보자와 숙련된 개발자 모두에게 환상적인 프로젝트입니다. HTML이 제공하는 구조적 기초, CSS로 생생하게 구현된 스타일 요소, JavaScript로 구동되는 대화형 기능을 신중하게 결합함으로써 기본 목적을 달성할 뿐만 아니라 핵심 웹 개발 개념도 보여주는 직관적인 도구를 만들 수 있습니다.
게다가 이 프로젝트는 더 많은 탐구와 개선을 위한 광범위한 가능성을 열어줍니다. 여기서 배운 교훈은 보다 복잡한 프로젝트를 위한 포괄적인 기반을 제공합니다. 웹 개발은 지속적인 학습 과정이며, 이 프로젝트는 모든 코드 라인이 기능적이고 매력적인 경험에 어떻게 기여하는지 보여줍니다.
계속 기술을 연마하면서 이 계산기를 더욱 사용자 친화적이고 강력하게 만들 수 있는 방법을 생각해 보세요. 다양한 레이아웃을 실험하고 추가 수학 함수를 구현해 보세요. 모든 변경을 통해 코딩 원리에 대한 이해가 깊어지고 개발 리소스가 향상됩니다.
즐거운 코딩하세요!
위 내용은 간단한 웹 기반 계산기 구축: Html CSS 및 JavaScript를 사용한 단계별 길드의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
