이번에 개인 사이트를 만드는 중인데,
페이지 첫 화면이 너무 심심한 느낌이 있어서,
고민을 하다가 타이핑 효과로 간단한 메세지를 처음에 띄우면 좋겠다는 생각이 들었습니다.
Next.js를 사용하고 있어서 React를 사용해서도 만들어볼테지만,
기본적인 자바스크립트로 먼저 구현을 해보고자 합니다.
1) 먼저 텍스트를 넣을 태그와 원하는 출력 텍스트를 지정하고,
// index.html
<body>
<p class='title'></p>
<script src='./index.js'></script>
</body>
// index.js
const paragraphTag = document.querySelector('.title')
const content = '안녕하세요. 프론트엔드\n개발자\n김영은입니다.'
2) 맞는 로직을 짭니다.
//index.js
const paragraphTag = document.querySelector(".text");
const content = "안녕하세요.\n프론트엔드 개발자\n김영은입니다.";
function play() {
let i = 0;
function typing() {
if (i === content.length - 1) {
clearInterval(timer);
}
paragraphTag.innerHTML += content[i];
i++;
}
const timer = setInterval(typing, 200);
}
play();
3) 출력은 되는데, 원하는 것처럼 줄바꿈이 되지 않네요. - case1
4) 그리고 출력이 한번만 되고 끝나는게 아니라, 계속 반복되게 만들어야 겠습니다. - case2
const paragraphTag = document.querySelector(".text");
const content = "안녕하세요.\n프론트엔드 개발자\n김영은입니다.";
function play() {
let i = 0;
function typing() {
if (i === content.length - 1) {
//초기화
i = 0;
paragraphTag.innerHTML = "";
return;
}
//줄바꿈
if (content[i] === "\n") {
paragraphTag.innerHTML += "<br/>";
} else {
paragraphTag.innerHTML += content[i];
}
i++;
}
const timer = setInterval(typing, 200);
}
play();
왜 \n이 적용이 안되나 했더니, innerHTML이여서 그런거였네요.
(왜？ [ JavaScript ] innerHTML vs innerText vs TextContent )
innerText로 바꿔준 다음에, 띄어쓰기도 이스케이프시퀀스로 적어주면 끝입니다. - case3
const content = "안녕하세요.\n프론트엔드\u00A0개발자\n김영은입니다.";
끗！
참고
자기소개 페이지 만들기(6) 자바스크립트 타이핑 효과
아무런 움직임이 없는 홈페이지는 제작하기 쉽지...제작 중인 홈페이지에 들어오면 대문이 아무런 움직임이 없는 것이 초라한 느낌이 들어 타이핑 효과를 주어 좀더 동적으로 보이게 하고 싶었
velog.io
이스케이프 시퀀스 > https://freedeveloper.tistory.com/191
이스케이프 시퀀스 \n \r \t \a \b
이스케이프 시퀀스 이스케이프 시퀀스 의미 \a 경고음 \b 백스페이스 \f 페이지 나누기(폼 피드): 프린트 전용 \n 줄바꿈, 개행 \r 복귀(캐리지 리턴) \t 수평 탭 \v 수직 탭: 프린트 전용 \\ \ \' ' \" " `?
freedeveloper.tistory.com
'FrontEnd > JavaScript' 카테고리의 다른 글
| [ JavaScript ] 특정 값으로 배열 채우기 (0) | 2024.01.16 |
|---|---|
| [ JavaScript ] HTMLCollection 은 forEach가 안된다? (0) | 2023.12.02 |
| [ JavaScript ] Object.freeze (0) | 2023.11.27 |
| [ JavaScript ] 배열에서 특정 요소 찾기 (0) | 2023.11.13 |
| [ JavaScript ] 문자열에서 공백 있는지 확인하기 (0) | 2023.11.04 |
