HTML과 JavaScript를 활용하면 사용자가 입력한 속도 값을 실시간으로 변환해 주는 간단한 웹 애플리케이션을 만들 수 있습니다. 이 글에서는 시속(km/h)을 초속(m/s)으로 변환하는 속도 변환기를 직접 구현하는 방법을 단계별로 살펴보겠습니다.
변환 원리 이해하기
1km/h는 약 0.277778m/s에 해당합니다. 따라서 킬로미터 매 시간(km/h) 값에 0.277778을 곱하면 미터 매 초(m/s) 값으로 쉽게 변환할 수 있습니다.
예제 코드
아래는 HTML과 JavaScript로 작성한 속도 변환기의 전체 코드입니다.
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
input, span {
font-size: 20px;
}
</style>
</head>
<body>
<h1>속도 변환기</h1>
<h2>시속(km/h)을 입력하면 초속(m/s)으로 자동 변환됩니다</h2>
<p>
<label>킬로미터 매 시간</label>
<input
id="inputKm"
type="number"
placeholder="KilometersPerHour"
oninput="KmphtoMpsConverter(this.value)"
onchange="KmphtoMpsConverter(this.value)"/>
</p>
<p>미터 매 초: <span class="metersPerSecond"></span></p>
<script>
function KmphtoMpsConverter(speed) {
document.querySelector(".metersPerSecond").innerHTML = speed * 0.277778;
}
</script>
</body>
</html>코드 동작 방식
- 입력 필드: type="number" 속성을 사용해 숫자만 입력할 수 있도록 제한합니다.
- 이벤트 처리: oninput과 onchange 이벤트를 함께 등록하여 사용자가 값을 입력하거나 변경하는 순간마다 변환 함수가 호출됩니다.
- 결과 출력: document.querySelector()로 결과를 표시할 span 요소를 선택한 뒤, innerHTML을 통해 변환된 값을 즉시 화면에 렌더링합니다.
실행 결과
위 코드를 브라우저에서 실행하면 다음과 같은 초기 화면이 나타납니다.
입력 필드에 km/h 값을 넣으면 별도의 버튼 클릭 없이 즉시 m/s 값으로 변환되어 표시됩니다.
마무리
이처럼 HTML의 입력 요소와 JavaScript의 이벤트 처리만으로도 실용적인 단위 변환기를 몇 줄의 코드로 완성할 수 있습니다. 여기에 CSS를 추가해 디자인을 다듬거나, 마일스퍼아워(mph) 등 다른 단위 변환 기능을 확장해 보는 것도 좋은 연습이 됩니다.