내 css코드에 중복코드가 많다는 것을 깨달았다. 중복되는 코드는 하나의 class에 넣어서 html태그에 해당 class만 추가하면 된다.

<!-- class="center" 만 추가하면 가운데정렬! -->
<div id="loginMain" class="center">

/* "center"라는 class를 만들어서 dispaly: flex 등등 가운데 정렬을 위해 넣은 반복 코드를 한번에 처리하자! */
.center {
  display: flex;
  justify-content: center;
  align-items: center;
}

#loginMain {
  width: 350px;
  height: 396px;
  border: 1px solid #e6e6e6;
  flex-direction: column;
}

JavaScript - input Event

TIL-25를 보면 addEventListener("keyup",function(){}); 이렇게 keyup 이벤트를 사용했지만, keyup이벤트보다 input이벤트를 더 많이 사용하는 것 같다.

• <input>, <select> 및 <textarea> 요소의 value 속성이 바뀔 때마다 발생한다.

예시 ) <input> 요소에 값을 입력하자마자 로그에 기록한다.
출처 : mozilla - input_event

<input placeholder="내용을 입력하세요!" name="name"/>
<p id="values"></p>

const input = document.querySelector('input');
const log = document.getElementById('values');

input.addEventListener('input', updateValue);

function updateValue(e) {
  log.textContent = e.target.value;
}

• e.target은 이벤트가 발생하는 태그를 가리킨다. 위에서는 input태그를 가리킨다.
• e.target.value는 input태그의 value이므로 input에 값을 입력할 때 마다 p태그에 텍스트로 들어가게 된다.