<div class="box">
  <div>
    
  <h2>숫자를 입력해보세요!</h2>
  <input type="text" oninput="formatPrice(this)">
  </div>
  <div>
</div>
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css");

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  outline: none;
  word-break: break-all;
  font-family: Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto,
    "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR",
    "Malgun Gothic", sans-serif;
}

input {
  width: 20rem;
  height: 3.5rem;
  border-radius: 5px;
  padding-left: 1rem;
  border: 2px solid #777;
  background: #f8f9fd;
}

h2 {
  color: #2a3189;
  margin: .6rem 0;
}

.box > div {
  margin: 2rem 1rem;
}
const formatPrice = (target) => {
  // 숫자만 남긴 후 포맷
 target.value = Number(target.value
   .replace(/[^0-9]/g, ''))
   .toLocaleString();
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.