텍스트가 한 글자씩 나타나는 타자기 효과를 CSS로 만듭니다. 헤더·인트로 메시지에 활용하세요.
CSS + HTML 코드
CSS 타이핑 효과 사용법
- 표시할 텍스트와 속도를 조정합니다.
- 커서 모양과 색상을 선택합니다.
- 실시간 미리보기로 확인합니다.
- HTML+CSS 코드를 복사해 사용합니다.
주요 기능
- 속도·폰트 크기·색상 자유 조정
- 4가지 커서 모양 (막대·블록·언더스코어·없음)
- 커서 색상 별도 지정
- 1회·3회·무한 반복
- 실시간 미리보기 + 한 번 클릭 코드 복사
활용 예시
- 웹사이트 메인 헤드라인 인트로
- 포트폴리오 자기소개 효과
- 코드 데모 페이지
- 404 에러 페이지
- 온라인 게임·터미널 시뮬레이터
타이핑 효과 원리
steps() 타이밍 함수를 사용해 글자 단위로 width를 늘려가며 한 글자씩 나타나게 합니다. overflow: hidden으로 아직 안 나타난 부분을 가리고, 별도 애니메이션으로 커서를 깜빡이게 합니다.
자주 묻는 질문
한글에도 적용되나요?
네, 한글도 적용 가능합니다. 단, 한글은 자모 단위가 아닌 글자 단위로 나타나므로 영문보다 자연스러움이 덜할 수 있습니다.
여러 줄에도 가능한가요?
본 도구는 한 줄 텍스트에 최적화되어 있습니다. 여러 줄은 각 줄마다 별도 애니메이션을 정의해야 합니다.
모바일에서도 잘 동작하나요?
네, 모든 모던 브라우저에서 동일하게 동작합니다. ch 단위가 등폭 폰트(monospace)에서 가장 정확합니다.
접근성 문제는?
스크린 리더는 전체 텍스트를 한 번에 읽으므로 문제없습니다. 단, prefers-reduced-motion으로 모션 줄이기 사용자에게는 즉시 표시하도록 처리하세요.