● 텍스트 입력 효과 구현하기
앞에서 메인 영역의 텍스트 부분을 HTML 코드로 직접 작성했는데, 이를 자바스크립트 코드로 작성하게 합니다. 먼저 메인 영역의 h2 태그 안에 있는 span 태그의 텍스트를 지웁니다.
13/end/html/main.html - 메인 영역
<main id="main">
<div class="container">
<h4>Welcome</h4>
<h2>I`M A <span></span></h2> <!-- span 태그 콘텐츠 비우기-->
(중략)
</div>
</main>
이어서 자바스크립트 코드를 다음과 같이 작성합니다. 이 코드에서 하는 일은 텍스트를 작성할 span 요소 노드를 가져오고, 작성할 문장을 배열로 정의해 txtArr 변수에 할당합니다. 그리고 인덱스 초깃값도 index 변수에 할당해서 배열의 첫 번째 요소에 접근하게 합니다. 또한, String 객체의 split() 메서드로 문장을 문자 단위로("") 쪼개서 배열로 만든 뒤 currentTxt 변수에 할당합니다.
13/end/js/text.js
// span 요소 노드 가져오기
const spanEl = document.querySelector("main h2 span");
// 화면에 표시할 문장 배열
const txtArr = ['Web Publisher', 'Front-End Developer', 'Web UI Designer', 'UX Designer', 'Back-End Developer'];
// 배열의 인덱스 초깃값
let index = 0;
// 화면에 표시할 문장 배열에서 요소를 하나 가져온 뒤, 배열로 만들기
let currentTxt = txtArr[index].split("");