[HTML] input 입력창에 최대 글자수 제한하는 법 (maxlength 속성 활용)

---

💡 input 박스에 최대 몇 글자까지 입력할 수 있게 제한하고 싶다면?

회원가입, 전화번호 입력, 닉네임 입력란 등에서는
최대 글자수 제한을 두어야 하는 경우가 많아요.
이럴 때는 maxlength 속성을 사용하면 간단하게 최대 입력 가능한 글자수를 설정할 수 있습니다.

---

🛠️ 최대 글자수 제한: 코드 예제와 설명

✅ 기본 예제 (maxlength 속성 사용)

<input type="text" placeholder="최대 10글자 입력" maxlength="10">

✅ 위 코드처럼 maxlength="10"을 설정하면 최대 10글자까지만 입력 가능합니다.
추가 설정 없이 HTML만으로 바로 적용됩니다.

---

🎯 포인트 설명

• maxlength="숫자" 👉 입력 가능한 최대 글자 수
• input, textarea 모두 사용 가능
• 숫자, 문자, 특수기호 포함해서 한 글자 = 1로 계산됨
  (한글도 글자 단위로 1)

---

⚡ textarea에 적용하기

<textarea placeholder="최대 200자 입력" maxlength="200"></textarea>

---

🧩 참고: JavaScript로 입력 길이 체크하기 (추가 제어 시)

<input type="text" id="nickname" maxlength="10" placeholder="최대 10글자">
<p id="counter"></p>

<script>
  const input = document.getElementById('nickname');
  const counter = document.getElementById('counter');

  input.addEventListener('input', () => {
    counter.textContent = `${input.value.length} / ${input.maxLength} 글자`;
  });
</script>

✅ 현재 입력한 글자 수를 실시간으로 보여줄 수 있어 UX 개선에 도움!

---

🏁 마무리 요약

목표	방법
최대 글자수 제한 설정	maxlength="숫자" 사용
textarea에도 적용하고 싶다	textarea에 maxlength 추가
실시간으로 글자 수 확인하고 싶다	JavaScript로 input.value.length 사용

---

👉 다음 글 예고

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