CSS Typewriter Effect: CSS3 애니메이션으로 타이핑 효과 만들기: steps()함수

CSS Typewriter Effect: CSS3 애니메이션으로 타이핑 효과 만들기

웹사이트의 텍스트를 동적이고 흥미롭게 만드는 방법 중 하나는 타자기 효과(typewriter effect)를 사용하는 것입니다. 이 효과는 텍스트가 점차적으로 나타나는 것처럼 보이게 해서 사이트 방문자의 주목을 끌 수 있습니다. 이 글에서는 순수 CSS만을 이용해 타자기 효과를 만드는 방법을 알아보겠습니다.

타자기 효과는 쉽게 만들 수 있다

타자기 효과를 구현하는 것은 그다지 어렵지 않습니다. 이 튜토리얼을 이해하기 위해서는 기본적인 CSS와 CSS 애니메이션에 대한 지식만 있으면 충분합니다. 우리가 만들 타자기 효과는 CSS의 steps() 함수를 이용해 텍스트 요소의 너비를 0%에서 100%까지 점차 변경하면서 텍스트를 나타나게 하는 것입니다. 또한, 커서가 텍스트를 "타이핑"하는 것처럼 보이게 하기 위해 깜박이는 애니메이션도 추가할 것입니다.

웹 페이지 구성하기

먼저 타자기 효과를 시연할 웹 페이지를 만들어 보겠습니다. 웹 페이지에는 타자기 텍스트를 위한 <div> 컨테이너가 포함됩니다.

<!doctype html>
<html>
<head>
  <title>Typewriter effect</title>
  <style>
    body {
      background: navajowhite;
      font-family: 'Trebuchet MS', sans-serif;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="typed-out">Web Developer</div>
  </div>
</body>
</html>

타자기 텍스트의 컨테이너 스타일링하기

웹 페이지의 레이아웃을 준비했으니 이제 "typed-out" 클래스를 가진 <div>를 스타일링해 보겠습니다.

.typed-out {
  overflow: hidden;
  border-right: .15em solid orange;
  font-size: 1.6rem;
  width: 0;
}

여기서 overflow: hidden;과 width: 0;를 사용해 타자기 효과가 시작되기 전에는 텍스트가 나타나지 않도록 했습니다. 또한 border-right: .15em solid orange;를 사용해 타자기 커서를 만들었습니다.

텍스트를 나타내는 애니메이션 만들기

이제 타자기 애니메이션을 만들어 보겠습니다. 이 애니메이션은 "typed-out" 요소 내부의 텍스트가 한 글자씩 타이핑되는 것처럼 만듭니다.

@keyframes typing {
  from { width: 0 }
  to { width: 100% }
}

이 애니메이션은 요소의 너비를 0%에서 100%까지 변경합니다. 이제 이 애니메이션을 "typed-out" 클래스에 포함시키고, 애니메이션의 방향을 forwards로 설정하여 애니메이션이 끝난 후에도 텍스트 요소가 원래대로 돌아가지 않도록 하겠습니다.

.typed-out {
  /* ... */
  animation: typing 1s forwards;
}

타자기 효과에 단계 추가하기

지금까지의 애니메이션은 텍스트를 부드럽게 나타나게 하지만, 이는 타자기 효과와는 거리가 있습니다. 이를 해결하기 위해 CSS의 steps() 함수를 사용하여 애니메이션을 단계별로 나눠 보겠습니다.

.typed-out {
  /* ... */
  animation: typing 1s steps(20, end) forwards;
}

이제 타자기 애니메이션이 20단계로 나눠져, 텍스트가 한 글자씩 나타나게 됩니다.

깜박이는 커서 애니메이션 추가하기

원래의 기계식 타자기에는 깜박이는 커서가 없지만, 현대의 컴퓨터나 워드 프로세서에서 볼 수 있는 깜박이는 커서 효과를 추가해 보겠습니다.

@keyframes blink {
  from { border-color: transparent }
  to { border-color: orange; }
}

이 애니메이션은 타자기 효과의 커서가 사용하는 요소의 테두리 색상을 투명에서 주황색으로 변경합니다.

.typed-out {
  /* ... */
  animation: typing 1s steps(20, end) forwards, blink .8s infinite;
}

이렇게 하면 커서가 0.8초마다 깜박이게 됩니다.

결론

이 글에서는 CSS만을 이용해 타자기 효과를 만드는 방법을 알아보았습니다. 이 효과는 웹 페이지에 다양하게 활용될 수 있으며, 특히 랜딩 페이지나 개인 웹사이트에서 눈에 띄게 사용될 수 있습니다. 하지만 이 효과를 과도하게 사용하면 사용자 경험에 부정적인 영향을 미칠 수 있으므로 주의가 필요합니다.

저작자표시 비영리 변경금지

'Dev > html css' 카테고리의 다른 글

CSS로 네온 텍스트를 만드는 방법 (0)	2023.10.11
[SCSS] &:hover의 의미와 input label에 hover했을 때 효과 (0)	2023.09.02
CSS 텍스트 네온사인 만드는 방법 (0)	2023.06.14
CSS IE 상위 padding, child absolute position eorror 문제 크로스 브라우징 (0)	2021.07.15
웹 접근성 앵커 태그 A에 onfocus hover 시각화 (점선 테두리)가 나타나지 않을 때 해결법. 초점을 인지할 수 없는 링크 및 서식 개수 (0)	2021.07.07

CSS Typewriter Effect: CSS3 애니메이션으로 타이핑 효과 만들기: steps()함수