[HTML] input 입력창에서 숫자만 입력받는 법 (type="number" 활용)

---

💡 숫자만 입력받는 입력창을 만들고 싶다면?

전화번호, 나이, 금액 입력란 등에서는
문자가 아닌 숫자만 입력받게 제한해야 할 때가 많아요.
이럴 때 HTML input 태그의 type="number" 속성을 사용하면 간단하게 숫자만 입력받을 수 있습니다.

---

🛠️ 숫자만 입력받는 입력창: 코드 예제와 설명

✅ 기본 예제 (type="number")

<input type="number" placeholder="숫자만 입력하세요">

✅ 위 코드처럼 type="number"를 사용하면
스마트폰에서는 숫자 키패드가 자동으로 나오고,
영문·특수문자는 입력되지 않습니다.

---

🎯 포인트 설명

• type="number" 👉 숫자만 입력 가능
• 기본적으로 양수, 음수, 소수점까지 입력 가능
• 문자 입력 시 자동으로 막지는 않지만, submit 시 validation 발생
• 모바일 환경에서는 숫자 키패드 제공 → UX 향상!

---

⚡ 최소값·최대값 설정하기 (min, max 속성)

<input type="number" min="1" max="100" placeholder="1~100 사이 숫자 입력">

✅ min과 max로 입력 가능한 숫자의 범위를 설정할 수 있습니다.

---

🧩 참고: step 속성으로 소수점 조정

<input type="number" step="0.1" placeholder="소수점 한 자리까지 입력 가능">

속성	설명
min	최소 입력값
max	최대 입력값
step	증가 단위 설정 (예: 0.1, 5 등)
placeholder	힌트 텍스트

---

🏁 마무리 요약

목표	방법
숫자만 입력받고 싶다	input type="number" 사용
최소·최대 숫자 제한하고 싶다	min, max 속성 추가
소수점 조정하고 싶다	step 속성 사용

---

👉 다음 글 예고

[HTML] input 입력창에서 영문 대문자만 입력받는 방법 (pattern 속성 활용)
이어서 알아볼게요! 놓치지 않으려면 "좋아요" 눌러주시고 "구독" 해주세요 😊