TIL 28일차_DOM 가운데배치, 키로 함수 실행

DOM_엘리먼트 가운데배치 & 엔터키로 함수실행하기

---

엘리먼트 정 가운데에 배치하기

position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

position: absolute와 top,left 속성으로 해당엘리먼트의 위치를(정확히는 왼쪽위 꼭짓점을) 부모엘리먼트의 중앙에 위치시켜 놓은 뒤 transform속성을 입력해준다.

transform: translate(-50%, -50%의 의미는 다음과 같다.

height: 90vh;
width: 90vw;

margin-top: -45vh;
margin-left: -45vw;

즉, 해당 엘리먼트의 너비와 높이의 50%만큼을 다시 left,top쪽으로 당겨준다.
이렇게하면 top과bottom의 margin이 같게되고, left,right의 margin이 같아져서
부모엘리먼트의 정중앙에 위치하게된다.

텍스트창에서 엔터키로 함수 실행시키기

const searchLine = document.querySelector("header input");

searchLine.addEventListener("keydown", function enterKey() {
  if (window.event.keyCode === 13) {
    getData();
  }
});

keydown이 아니라 keyup을 넣으면 함수가 2번실행되어서, 이둘의 차이점을 찾아봤다.

키보드 이벤트 함수는 onkeyDown, onkeyUp, onkeyPress가 있다.

• onkeyDown : 키를 눌렀을 때 발생(이벤트 발생 후 문자 입력)
• onkeyUp : 키를 눌렀다 놓았을 때 발생(문자 입력 후 이벤트 발생)
• onkeyPress : onkeyDown와 이벤트는 같다. shift, ctrl, backspace, tab, 한/영 등의 키를 인식하지 못한다.