자바스크립트 타이핑 효과

🐧 HTML

  <div id="window2">
    <div class = "text"></div>
  </div>

html문서에서는 해당 페이지의 id 와
텍스트가 들어갈 부분에 클래스명을 넣어주었다.

🐱 CSS

  .text{
    display: table-cell;
    vertical-align: middle;
    font-size: 50px; font-weight:bold;
    width: 100vw; height: 100vh;
    color: white;
    padding-left:37vw;
    }

css에서는 텍스트의 위치와 스타일을 설정해주었다.

🦊 Javascript

const content = "Stacking  up . . ."
const text = document.querySelector(".text")

let index = 0;

function typing(){
  text.textContent += content[index++]
  if(index > content.length){ 
    text.textContent = "" 
    index = 0;
  }
}

setInterval(typing, 200) 

content 선언 후 타이핑 되기를 원하는 텍스트를 넣고,

text에 document.querySelector('') 를 이용해서 css를 선택한다.

✨ document.querySelector() 메서드

document.querySelector()는 CSS 선택자로 요소를 선택하게 한다. 다만 동일한 여러 선택자가 있을 경우 첫번째 요소만 선택된다.

typing 함수는 textContent라는 프로퍼티를 사용하고, content 의 인덱스를 1씩 증가시키며 반복한다. 이 때 인덱스가 text길이보다 길어지면 리셋시킨다.

✨ textContent 프로퍼티

element.textContent = '내용' 형태로 element에 텍스트를 추가할 때 사용한다. innerText와 다르게, 두 개 이상의 공백을 그대로 반환한다.

typing 함수를 반복, 200ms 마다 호출한다.

✨ setInterval() 함수

setInterval은 첫 번째 인자로 반복할 코드가 담겨있는 함수를 받고, 두 번째 인자로 반복 주기를 밀리초(ms) 단위로 받는다.