웹 개발을 배우는 과정에서 가장 좋은 연습 프로젝트 중 하나가 바로 단위 변환기입니다. 이번 글에서는 HTML과 JavaScript만을 사용하여 킬로그램(kg)을 그램(g)으로 실시간 변환하는 간단한 무게 변환기를 만드는 방법을 소개합니다.
동작 원리
이 변환기의 핵심 로직은 매우 간단합니다. 사용자가 입력 필드에 킬로그램 값을 입력하면, oninput과 onchange 이벤트가 발생하면서 JavaScript 함수가 호출됩니다. 함수는 입력된 값에 1,000을 곱한 후, 그 결과를 화면의 <span> 요소에 출력하는 방식으로 동작합니다.
전체 예제 코드
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
input, span {
font-size: 20px;
}
</style>
</head>
<body>
<h1>Weight Converter</h1>
<h2>Type weight in kg to convert it into grams</h2>
<p>
<label>Kilogram</label>
<input id="inputKG" type="number" placeholder="Kilogram"
oninput="KgtoGConverter(this.value)" onchange="KgtoGConverter(this.value)">
</p>
<p>Grams: <span id="outputGrams"></span></p>
<script>
function KgtoGConverter(weight) {
document.getElementById("outputGrams").innerHTML = weight * 1000;
}
</script>
</body>
</html>코드 구성 요소 살펴보기
1. CSS 스타일
body에는 가독성이 좋은 'Segoe UI' 계열 폰트를 적용하고, input과 span 요소의 글자 크기를 20px로 지정하여 사용자가 숫자와 결과를 쉽게 확인할 수 있도록 했습니다.
2. HTML 입력 필드
<input type="number">를 사용하여 숫자만 입력할 수 있도록 제한했습니다. oninput 속성은 사용자가 타이핑하는 즉시, onchange 속성은 입력이 완료되거나 포커스가 벗어날 때 KgtoGConverter() 함수를 호출합니다.
3. JavaScript 변환 함수
KgtoGConverter() 함수는 매개변수로 전달받은 무게 값에 1,000을 곱합니다. 이는 1kg = 1,000g이라는 단위 관계를 활용한 것입니다. 계산 결과는 document.getElementById()를 통해 outputGrams 요소의 내용으로 출력됩니다.
실행 결과
위 코드를 브라우저에서 실행하면 다음과 같은 화면이 나타납니다.
입력 필드에 킬로그램 값을 입력하는 순간, 그램 단위의 변환 결과가 바로 아래에 표시됩니다.
확장 아이디어
이 기본 코드를 바탕으로 다양한 기능을 추가할 수 있습니다.
- 다른 단위 지원: 파운드(lb), 온스(oz), 톤(t) 등으로의 변환 옵션 추가
- 역방향 변환: 그램을 킬로그램으로 변환하는 입력 필드 추가
- 유효성 검사: 음수나 잘못된 입력값 처리 로직 추가
- 결과 반올림:
toFixed()메서드를 활용해 소수점 자릿수 조정
JavaScript의 이벤트 처리와 DOM 조작 개념을 익히기에 가장 적합한 입문용 예제이니, 직접 코드를 작성하며 변형해 보시길 권합니다.