계산기 웹사이트 만들기 - HTML, CSS, JS

2024. 10. 15. 20:20ㆍ부트캠프

심플한 계산기 웹사이트 만들기 및 Netlify에 배포하기

HTML, CSS, JavaScript를 사용하여 간단한 계산기를 만들어서 GitHub에 커밋하여 Netlify에 배포하는 과정입니다.

1. 프로젝트 설정

프로젝트 폴더 생성

먼저 계산기 웹사이트를 위한 프로젝트 폴더를 만듭니다.

mkdir simple-calculator
cd simple-calculator

이제 HTML, CSS, JavaScript 파일을 생성합니다.

touch index.html style.css script.js

파일 구조

simple-calculator/
├── index.html
├── style.css
└── script.js

2. HTML 코드 작성

index.html 파일에 HTML 구조를 작성합니다.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Simple Calculator</title>
  <link rel="stylesheet" href="style.css" />
</head>
<body>
  <div class="calculator">
    <input type="text" id="display" disabled />
    <div class="buttons">
      <button onclick="clearDisplay()">C</button>
      <button onclick="appendToDisplay('1')">1</button>
      <button onclick="appendToDisplay('2')">2</button>
      <button onclick="appendToDisplay('3')">3</button>
      <button onclick="appendToDisplay('+')">+</button>
      <button onclick="appendToDisplay('4')">4</button>
      <button onclick="appendToDisplay('5')">5</button>
      <button onclick="appendToDisplay('6')">6</button>
      <button onclick="appendToDisplay('-')">-</button>
      <button onclick="appendToDisplay('7')">7</button>
      <button onclick="appendToDisplay('8')">8</button>
      <button onclick="appendToDisplay('9')">9</button>
      <button onclick="appendToDisplay('*')">*</button>
      <button onclick="appendToDisplay('0')">0</button>
      <button onclick="appendToDisplay('.')">.</button>
      <button onclick="calculate()">=</button>
      <button onclick="appendToDisplay('/')">/</button>
    </div>
  </div>

  <script src="script.js"></script>
</body>
</html>

3. CSS 스타일링

style.css 파일에 간단한 스타일을 추가합니다.

body {
  font-family: Arial, sans-serif;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  margin: 0;
  background-color: #f4f4f4;
}

.calculator {
  width: 200px;
  background-color: white;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

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

.buttons {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}

button {
  width: 100%;
  height: 40px;
  font-size: 18px;
  border: none;
  background-color: #ddd;
  border-radius: 5px;
  cursor: pointer;
}

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

4. JavaScript 기능 추가

script.js 파일에 계산기 기능을 추가합니다.

// 디스플레이 값을 초기화합니다.
function clearDisplay() {
  document.getElementById('display').value = '';
}

// 디스플레이에 값을 추가합니다.
function appendToDisplay(value) {
  document.getElementById('display').value += value;
}

// 계산을 수행하고 결과를 디스플레이에 표시합니다.
function calculate() {
  const display = document.getElementById('display');
  try {
    display.value = eval(display.value);
  } catch (error) {
    display.value = 'Error';
  }
}

5. Git 설정 및 커밋

Git 초기화

이제 Git을 사용해 프로젝트를 버전 관리합니다.

git init

.gitignore 파일을 만들어 필요 없는 파일을 제외합니다.

touch .gitignore

GitHub에 프로젝트 푸시

  1. GitHub에서 새 리포지토리를 만듭니다.
  2. 프로젝트를 GitHub에 푸시합니다.
git add .
git commit -m "Initial commit"
git remote add origin <GitHub-Repository-URL>
git push -u origin master

6. Netlify에 배포

Netlify 계정 생성

Netlify에 가입하고 로그인합니다.

GitHub 연동

Netlify에서 GitHub 계정을 연동하고, 방금 푸시한 리포지토리를 선택합니다.

배포

자동으로 빌드가 시작되며, 잠시 후 배포가 완료됩니다. Netlify는 생성된 URL을 제공합니다. 이 URL을 통해 언제든지 웹사이트를 확인할 수 있습니다.

이제 심플한 계산기 웹사이트가 Netlify에 성공적으로 배포되었습니다! 🎉

'부트캠프' 카테고리의 다른 글

리액트 훅(Hooks)을 알아보자  (1) 2024.11.07
리액트(React)를 알아보자  (1) 2024.11.06
Javascript 자바스크립트 기본 문법  (2) 2024.10.11
HTML / CSS  (0) 2024.10.07
Git/Github 사용법  (2) 2024.10.07

관련글

티스토리툴바