HTML과 JavaScript로 길이 변환기 만드는 방법

HTML과 JavaScript를 활용하면 킬로미터(km)를 미터(m)로 실시간 변환해주는 간단한 길이 변환기를 손쉽게 만들 수 있습니다. 사용자가 값을 입력하는 즉시 결과가 화면에 표시되도록 구현하는 방법을 예제 코드와 함께 살펴보겠습니다.

전체 예제 코드

<!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>킬로미터 단위의 길이를 입력하면 미터로 변환됩니다</h2>
<p>
<label>킬로미터</label>
<input id="inputKm" type="number" placeholder="킬로미터 입력"
oninput="KmtoMConverter(this.value)" onchange="KmtoMConverter(this.value)">
</p>
<p>미터: <span class="meters"></span></p>
<script>
    function KmtoMConverter(length) {
        document.querySelector(".meters").innerHTML = length * 1000;
    }
</script>
</body>
</html>

코드 설명

이 코드의 핵심 동작 원리는 다음과 같습니다.

1. HTML 입력 필드

<input> 요소에 type="number"를 지정하여 숫자만 입력받도록 설정했습니다. 또한 oninput과 onchange 이벤트 핸들러를 등록했기 때문에, 사용자가 값을 입력하거나 변경하는 순간마다 KmtoMConverter() 함수가 자동으로 호출됩니다.

2. JavaScript 변환 함수

KmtoMConverter() 함수는 입력받은 킬로미터 값에 1,000을 곱하여 미터 단위로 변환합니다. 그런 다음 document.querySelector()를 통해 클래스명이 meters인 <span> 요소를 찾아 변환 결과를 화면에 출력합니다.

실행 결과

위 코드를 브라우저에서 실행하면 다음과 같은 화면이 나타납니다.

HTML과 JavaScript로 길이 변환기 만드는 방법

입력 필드에 킬로미터 값을 입력하면 아래와 같이 미터 단위로 즉시 변환된 결과가 표시됩니다.

HTML과 JavaScript로 길이 변환기 만드는 방법

활용 팁

이 기본 구조를 응용하면 센티미터, 밀리미터, 인치, 피트 등 다양한 길이 단위 간 변환 기능으로 확장할 수 있습니다. 예를 들어 셀렉트 박스(<select>)를 추가해 변환할 단위를 선택하게 하거나, 여러 개의 입력 필드를 배치하여 양방향 변환을 지원할 수도 있습니다.