웹페이지에서 공학 계산기를 사용할 수 있는 HTML, CSS, JavaScript 코딩 만들기

날짜:

공학용 계산기 기능을 웹 페이지에서 사용할 수 있게 HTML, CSS, JavaScript를 사용하여 코딩하는 방법을 알려드리겠습니다. 이 예제는 기본적인 산술 연산, 공학적 기능 (예: 제곱근, 로그, 삼각 함수)을 포함합니다.

HTML (공학용 계산기 구조)

html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>공학용 계산기</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="calculator">
    <input type="text" id="display" disabled>
    <div id="buttons">
        <button onclick="appendValue('1')">1</button>
        <button onclick="appendValue('2')">2</button>
        <button onclick="appendValue('3')">3</button>
        <button onclick="appendValue('+')">+</button>
        <button onclick="appendValue('4')">4</button>
        <button onclick="appendValue('5')">5</button>
        <button onclick="appendValue('6')">6</button>
        <button onclick="appendValue('-')">-</button>
        <button onclick="appendValue('7')">7</button>
        <button onclick="appendValue('8')">8</button>
        <button onclick="appendValue('9')">9</button>
        <button onclick="appendValue('*')">*</button>
        <button onclick="appendValue('0')">0</button>
        <button onclick="calculate()">=</button>
        <button onclick="clearDisplay()">C</button>
        <button onclick="appendValue('/')">/</button>
        <button onclick="appendValue('Math.sqrt(')">√</button>
        <button onclick="appendValue('Math.log(')">log</button>
        <button onclick="appendValue('Math.sin(')">sin</button>
    </div>
</div>
<script src="script.js"></script>
</body>
</html>

CSS (스타일링)

css
body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: #f4f4f4;
    margin: 0;
}

#calculator {
    width: 300px;
    background: #fff;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
}

#display {
    width: 100%;
    margin-bottom: 10px;
    padding: 10px;
    font-size: 24px;
    text-align: right;
}

button {
    width: 23%;
    padding: 15px;
    font-size: 20px;
    margin: 2px;
    cursor: pointer;
    border: 1px solid #ccc;
}

button:hover {
    background-color: #f0f0f0;
}

JavaScript (계산 로직)

javascript
function appendValue(value) {
    document.getElementById('display').value += value;
}

function calculate() {
    let display = document.getElementById('display');
    try {
        display.value = eval(display.value);
    } catch (e) {
        display.value = "Error";
    }
}

function clearDisplay() {
    document.getElementById('display').value = '';
}

이 코드는 사용자가 버튼을 클릭하여 수식을 입력하고 계산 결과를 얻을 수 있는 간단한 공학용 계산기를 구현합니다. 제곱근, 로그, 삼각 함수 등의 공학적 기능을 위해 JavaScript의 Math 객체를 사용합니다. eval() 함수를 사용하여 입력된 문자열을 계산하는데, 이 함수는 잘못된 입력이 주어질 때 오류를 처리할 수 있도록 예외 처리가 필요합니다.

이 스크립트는 웹 페이지에서 직접 실행할 수 있으며, HTML, CSS, JavaScript 파일을 각각 분리하거나 HTML 파일 내에 <style> 태그와 <script> 태그로 직접 삽입할 수 있습니다.

Location: 대한민국