<input type="text" oninput="change(this.value)" autofocus  placeholder='영어문장을 입력해주세요.'>

<h2>영어문장을 입력해보세요!</h2>
@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;
}

body {
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: #febf00;
}

input {
  width: 300px;
  height: 55px;
  border: none;
  border-radius: 5px;
  background: #f8f9fd;
  padding: .4rem 1rem;
  box-shadow: 0 0 1rem 3px rgba(0 0 0 / 6%);
}

input::placeholder {
  color: #999;
}

h2 {
  width: 300px;
  min-height: 55px;
  margin-top: 1.2rem;
  padding: .5rem .7rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f8f9fd;
  box-shadow: 0 0 1rem 3px rgba(0 0 0 / 6%);
  border-radius: 5px;
}
// 첫문자 대문자 변경 함수
function toCapitalize(str) {
  return str.replace(/\b\w/g, (match) => match.toUpperCase());
}

// -----------------------------------

// 입력 감지 이벤트
const change = (value) => { 
  // 문자 변경하기
 const char = toCapitalize(value);
  
 document.querySelector('h2').innerHTML = char || '영어문장을 입력해보세요!';
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.