無제

Vanilla Javascript_타이핑 효과 예제 본문

<script>

Vanilla Javascript_타이핑 효과 예제

yo-u-loo 2026. 6. 12. 18:30

 

Vanilla-JS-​typo

<!DOCTYPE html>
<html lang="ko">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=3.0">
    <title>타이핑 효과 예제-https://www.youtube.com/watch?v=5lo_QdeWm_g&list=PLpK-F7ihqVc39kaC4-77snhSpxa5umFRg&index=12
    </title>
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css">
    <link rel="stylesheet" href="js2.css">
    <script src="script.js"></script>
</head>

<body>
    <section>
        <div id="text">
        </div>
    </section>

    <script>
        let i = 0;
        let text = "Where does it come from?"

        function typing() {
            if (i < text.length) {
                document.getElementById("text").innerHTML += text.charAt(i);
                i++;
                setTimeout(typing, 60);
            }
        }
        typing();
    </script>
</body>

</html>

 

@import url('https://fonts.googleapis.com/css?family=Quantico&display=swap');

* {
    margin: 0;
    padding: 0;
}

body {
    width: 100%;
    height: 100vh;
    background: linear-gradient(-30deg, #222 50%, #000 50%);
    font-family: 'Quantico', sans-serif;
    font-size: 2rem;
}

#text {
    color: white;
    text-align: center;
    font-style: italic;
    text-transform: uppercase;
}

div {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    text-align: center;
}

 

이번 코드는 웹사이트의 첫 화면이나 인트로 페이지에서 시선을 사로잡을 때 자주 사용되는 ‘타이핑 효과(Typing Effect)’ 기능입니다.

텍스트가 한 번에 나타나는 것이 아니라, 실제로 누군가 키보드를 치는 것처럼 한 글자씩 부드럽게 화면에 출력되며 완성되는 인터랙션입니다.

이 효과는 포트폴리오 사이트의 메인 대문이나 자기소개 영역에 적용했을 때 사이트 전체를 더욱 세련되고 완성도 높게 보이게 만드는 데 효과적입니다.

또한 이 코드를 실습하면서 자바스크립트의 비동기 타이머 메서드인 setTimeout과 문자열 내장 메서드가 어떻게 함께 동작하는지 이해하는 것이 중요합니다.

 

 

[charAt과 setTimeout]

문자 타이핑 효과를 이해하기 위해 반드시 알아야 하는 핵심 개념 두 가지입니다.

  1. text.charAt(i) 이란?
    문자열에서 특정 위치의 문자 하나만 정확하게 가져오는 함수입니다.
    예를 들어 text = "Where"일 때, text.charAt(0)은 "W", text.charAt(1)은 "h"를 반환합니다.
    이 값을 카운터 변수 i와 함께 사용하고 i++로 증가시키면, W → h → e → r → e 순서로 문자를 하나씩 꺼내 화면에 출력하는 구조를 만들 수 있습니다.

  2. setTimeout(함수, 밀리초) 이란?
     지정한 시간이 지난 뒤 해당 함수를 한 번 실행하는 브라우저의 타이머 기능입니다. (1000밀리초 = 1초)
    이번 예제에서는 이 setTimeout을 함수 내부에서 다시 호출하는 방식으로 반복 구조를 만들고 있으며, 이를 통해 ‘재귀 함수 형태의 타이머 구조’가 구현됩니다.
    또한 i < text.length라는 탈출 조건이 함께 존재하기 때문에, 문자열의 끝에 도달하면 실행이 자동으로 종료됩니다.
    따라서 무한 루프에 빠지지 않고 안전하게 동작하는 구조입니다.

 

'<script>' 카테고리의 다른 글

Vanilla Javascript_풀 스크린 오버레이 메뉴  (0) 2026.06.12
Vanilla Javascript_이미지 갤러리 전환  (0) 2026.06.12
Vanilla Javascript_하단 슬라이드 모달  (0) 2026.06.12
Parameter (파라미터)와 Argument (아규먼트)  (0) 2026.06.02
var, let, const 변수 선언 방식  (0) 2026.06.02
'<script>' Related Articles more